Auth Serverless Function

[00:00:00]
>> So, here's what I wanna do, I'm actually gonna use these serverless functions in a really rudimentary way. I want to fake authentication. And the reason I wanna do that is because the next thing that we're gonna learn is how to actually do password protected pages. But so, to do that,we're gonna use cookies and cookies are a very cool, kind of underused especially working in the web.

[00:00:23]
I feel like a lot of us talked ourselves out of using cookies because they were hard and we didn't have servers available, so we just throw stuff in local storage or things like that. It's not a great idea. Why not use a cookie? Cookies are surprisingly straightforward to use.

[00:00:37]
Especially with serverless functions, they are really straightforward to use. And they give us a lot of security and power. You can restrict them to HTTP only. You can restrict them to the same site. There's a lot of extra cool things that you can do that local storage doesn't provide.

[00:00:53]
Let's go ahead and build ourselves. I'm just gonna rename this one, we don't need a hello function. So I'm gonna call one login. And in our login function, we are not gonna use the request object. So, to get it to not complain that I have an unused variable, I'm gonna lead with this underscore which says yes, I know I'm not using that.

[00:01:09]
Then I'm going to set a header and the header that I wanna set is Set-Cookie. And to set a cookie, you give it a name. So, we'll give this a unique name. We'll call it frontend-masters-auth, then you give it a value. We're gonna mark it as true. I also wanna set the path that it's valid for which is the root path.

[00:01:35]
So, we're gonna set our header. It's going to set a cookie called frontend-masters-auth=true. And it's available to the whole site. We could sub domain it if we wanted to. Then once I've got that, I'm just gonna send back some JSON, and it's gonna be a status of ok.

[00:01:58]
So, this is a very simple function that I've just written. But what it's gonna do is when I come out here, if I look in my application, and I look in my cookies, you can see there's no cookies on this local host right now. But when I go to log in, it is now set a cookie for me, right?

[00:02:18]
So, this cookie is now set and I can use that cookie elsewhere in my site as a way of saying that somebody has done something. And I'm gonna use this to fake auth, but you could also use this to personalize content. Here's a really cool approach that I've seen.

[00:02:33]
My friend, Joel, does this, where when you sign up to a newsletter, they keep a cookie that says that you signed up and then they don't show you their opt in anymore. Because you've already opted in, you're part of their newsletter list. So they can actually show you something different, like more articles to read or a download that you get access to because you're opted in.

[00:02:58]
There's all these cool little personal touches that you can add and it doesn't take a lot, right? All you have to do is send this back on the way back. So once we submit this, hey, we're done, we did it, we got it. That's great. And I didn't have to learn anything special.

[00:03:17]
I didn't have to go figure out how servers work, I'm just able to do the serverless function. So next, let's make another one of these. But this on is gonna be a duplicate and I want it to be a log out. So, how do we unset a cookie?

[00:03:32]
And the way that you unset a cookie is you, first we'll just negate the value. So even if it doesn't work, we'll knock that value to false so that it would still fail. And then, we set an expires in the past. There's a specific RFC format that you have to use for dates in cookies, which is a little bit weird.

[00:03:57]
So, it's Thursday, and then the dates of 01 Jan, and then any year in the past is fine. And so we'll set 1970 and then a time in this format, and we'll set it to GMT. And basically what we're saying is, this cookie should be gone. Get rid of it.

[00:04:18]
And just in case you don't get rid of it, also set it to false so if there's any flicker in the middle where it's still available, the code should still fail if it's set to false. So, we can do that. And now if we pull open our application again and we're in login, so there's our cookie.

[00:04:34]
Let's go to log out. Cookies gone, right? Let's log in again. And now if I move around to other parts of the site, let's go to the books page, that cookie's still there, you see we can use that wherever we want. And if I go to log out, oops, API log out, I mean, Cookie's gone.

[00:04:59]
Now if I go back to books, there's no cookie there anymore, right? So, we've given ourselves the ability to set and remove a cookie. And then the last thing that I wanna do is I want to check whether or not that we are logged in. So let's add one more serverless function and this one is going to check auth status, so we'll call this one check-auth.js.

[00:05:23]
And this one is going to export default function handler and that's gonna take a request and a response. And that will check if logged in. And the way we're gonna do this is we're gonna use the Boolean constructor to, or we'll call Boolean as a function which will force whatever's inside of it to be a Boolean of true or false.

[00:05:49]
Then, we're gonna check if the req.cookies exist at all because they might not. And if they do, then we'll do req.cookies and we're gonna check for frontend-masters-auth, which will give us back that value. And that is gonna tell us whether or not we're logged in. So then what I can do is res.json and just send that value back.

[00:06:19]
So, let's just send back logged in. Okay, so, currently we don't have a cookie. So I would expect that if we go to check-auth, it should say false. Okay, logged in false. Let's go log in. All right, we have the cookie. Let's go check our auth status again, we are logged in true, right?

[00:06:39]
So this is the power of what we're doing. Let's log out. Check that auth again. Login false. One more time, login, check-auth, log in true. I mean this is just kind of mind boggling to me how straightforward this all is like, to build these routes in a server, it wouldn't necessarily be harder but it would definitely take longer.

[00:07:06]
And I think that that's the power of this, is you can develop at the speed of thought because you're not slowing down to write boilerplate or stand up services. You're able to just like, I have an idea, I need a server for that. Okay, let me throw a serverless function and I can do that thing.

[00:07:23]
It's a really nice flow. It's really, really helpful. But what we could do, looking at the way that this login works, the value that we set here could be like a JSON web token. It could be some details about your user that you could then use to display on the page, like somebody's username and email.

[00:07:49]
There are a lot of ways that you could approach this and it's, as far as local persisted storage goes, as long as you're not doing very much. Cookies are a pretty good way to keep a session alive. And I wouldn't put anything you need to keep keep, their drafts or something like that but something that's coming from a database.

[00:08:08]
I'm going out, I'm checking to see, all right, does auth zero? Does this person have an account? Is it valid? Is the password correct? Great, give me back those details. Throw them in a cookie, now I don't have to talk to auth zero anymore, right, until we do a logout or the expiry of the cookie hits.

[00:08:26]
It's a nice flow. It gives you a lot of flexibility. It keeps things pretty performing, you can build it fast.