Auth with JWTs & NextAuth.js Setup

[00:00:00]
>> Then now we're gonna be headed on to the next thing. The other part that everyone was really asking me about, I had a lot of people ask me about auth. I think it's probably the one number one requested thing, with next is like of, because it's such a triply framework.

[00:00:18]
It's like am I server side and my client side, and my build time, and my runtime. It's really hard to figure out where you are, and then try to figure out where the author goes in one of those places is even trickier. So I get it, so I'm gonna do my best to describe, how I handle off with next as at least one of the ways my preferred way.

[00:00:39]
And I'll talk about all the different ways but, this one's gonna be a little all over the place, because all kind of touches everywhere. Okay, so if we look at our app now, the sign-out experience is pretty legit. I mean, if I wasn't mistaken, I would think this was like, I don't know a 10 million Ar 20 million Ar SAS company just by looking at the landing page here.

[00:01:03]
So it's looking pretty good, we got our blog, it's all good. Now, we actually go to the product, and we, we actually got to show this to our VCs to get that funding. This has to work, we wanna be able to sign in right now, it doesn't do anything.

[00:01:16]
So the sign-out experience is done, we're gonna move into the sign in experience. We're gonna get this app working, so the first part is handling authentication. So let's do that, the way I like to handle authentication is with JWTs. If you don't know what a JWTs, it stands for a JSON web token.

[00:01:33]
It's basically just a serialized Jason is an encrypted serialized JSON object, that is used to. Identify and authorize you to access some type of endpoint somewhere. That's basically the difference between this, and a session is a session is something that's stored on the server in, a cache, or a database.

[00:01:58]
And that server keeps track of who is logged in, and what they have access to. Whereas the govt is stored on the client, and is sent every single request because the server doesn't remember who you are. Every single request has to be checked every single time, it doesn't associate a given request with a given session.

[00:02:18]
So we're going to be doing JW T's, but also kind of using them as sessions, but just not stored in the database as sessions, so you'll kind of see a little bit. So a couple things we need to do in our app, is we need to allow people to be able to create accounts.

[00:02:38]
All right, we want people to be able to make an account, that's the first thing. The second thing we want them to be able to do is sign into, that account once they have one. And then we need to protect the pages to our app, so if we go look at our URLs here, we have a pages slash app.

[00:02:55]
And we got this crazy looking file here, that is not a typo, that is a file if you've never seen that before next year. Yes, that's called an optional catch-all row, and I'll talk about that a little bit. So we want to lock that down, because that that is our app.

[00:03:09]
That's the sign-in experience, it's just one page, and this is again, this is where next year's gets really powerful. It's just one page but it's actually like, three pages and one page, I just handle it in one page. Then we need to lock down any database access that we haven't done yet but we will do.

[00:03:26]
Okay, so, we're gonna be using a package called NextAuth, if you go look at it, they got a nice little landing page here. It has recently been upgraded, which is why I'm recommending it now. A while ago, it was just really kind of fell off, but the creator of it got some new motivation.

[00:03:43]
Maybe he got some funding, I don't know, maybe because next.js is doing really well. But NextAuth is one of the best if not the only way to have a package kind of handled all for you. Obviously, you could set this up yourself, but we'd be here forever if I had to set it up myself.

[00:04:00]
So we're gonna use this package to get things going a little faster, all right. So to get things started, we need to configure our next off instance. So the way we can do that, is we're gonna create a new API route at /api/auth. With a catch-all route of next auth just like that, right, so, let's do it.

[00:04:25]
So I'm gonna go to my code, go to API, make a new folder, call it off, make another file in here, and we're gonna call it data dot next, and I'll do that. Yes, okay, so this is creating a catch-all route, this basically means any request to slash API slash auth.

[00:04:50]
Slash any, slash thing, slash after, slash auth is going to hit this route right, that's what that means. That's what this catch all means. Optional catch all, which is what this looks like, is the same as this except for it's inclusive, as in it will also include any requests to just like the index as well.

[00:05:13]
That's all it is, it includes the index, whereas this one doesn't, okay, so we got that. And then from there, we're just going to import a few things, so we're gonna import something from next. I wanna say I actually lose a call, there we go, copy those to save some time, so, we're gonna import these things.

[00:05:35]
Basically, the two things here is the NextAuth is the configuration thing, that we're gonna use to actually configure our authentication. And Providers is a utility to allow us to add different types of providers, for our authentication strategy. Right now we're only gonna be authorizing with GitHub, but you can do, I mean, if you go look at their docs, they have so many providers here.

[00:05:59]
Let me see if I can figure out here they go, yeah, there you go, they got a lot of them. You can log in with Apple, if you want to LinkedIn, you will log in with your LinkedIn account, who does that? But you can do that, so yeah, they got all this stuff.

[00:06:15]
So what we're gonna do is, we're going to export default and it's gonna be a function here, so requests response. And this is just going to use the next off, l wanna say it's new NextAuth maybe, is it new next It's not. No, it's not, you don't need to capitalize it, I don't know, anyway, so request response.

[00:06:41]
And then I believe that next thing here is going to be, let's see TypeScript, no, okay, the next thing is going to be, yeah, the object as well. Okay, so then we're gonna configure this object here, and this is where we're going to clear everything. So the first thing I wanna do is, I wanna put sessions, and I wanna turn by default, it's gonna use database sessions.

[00:07:02]
I don't wanna do that I wanna use a DBT say session data of a teacher like that. That's going to give us access to data, etc, so that's the first thing, actually, it's better if I just read them out here. He's already have them, labeled, so we're gonna put the JW T's there, the next thing we're gonna do is we're going to add a secret to our data t.

[00:07:24]
So if you don't know how JW T's work, basically, in order to encrypt a JW T, we need some type of secret. It's like the recipe for the encryption, you can put whatever you want in a string value. Whatever you want, don't worry, I'm gonna go over these environment variables, and how to set them, but you could just put them here.

[00:07:41]
So you can put any value you want, but just put the process end jadibooti secret and we'll configure all this stuff later in an environment. So this is saying we want to use AWT, this is saying that JT has the secret, next thing is we're going to do is the providers here.

[00:07:59]
So if we go to these providers, like I said, it's an array of whatever providers you wanna add, we're only adding to GitHub one. But if I just hopefully this thing has autocomplete on it, I don't know why it doesn't, I see providers dot Google, they have providers.

[00:08:17]
I mean I showed you a list of them, they have them all here, providers.email. So if you want email password, they even have password list, if you like password list sign up which I think is pretty smooth. I know Verse use password list sign up, It's really nice, so you can add that too.

[00:08:31]
They kinda handle that all for you, so you got that, a function of functional component, which is basically a render. It's just a big render, we can't really want to come in here and block the render loop with an if statement to do stuff like that. So we probably want to do a use effect, and I'm going to say use effect.

[00:08:49]
And then what I want to do is I want to get the router, so I'm going to say give me the router. Based off your database string, what type of database you're connecting to, and it uses something called type ORM underneath it. Which is like a universal ORM to facilitate the connection, and, management of your models between your application and that database.

[00:09:08]
So we're using Mongo, this is gonna be a Mongo URL that you're gonna create, it'll just detect it for you. You don't have to tell it, it's pretty, pretty intuitive, what it's gonna do is gonna create some models for you. In fact, you can probably look at the docs and say the exact models are gonna make but I know for sure they're gonna create the user model for you.

[00:09:26]
That's gonna have like a user's email, you know, their provider ID. So in this case, like a GitHub ID, or something like that, it'll have their name It'll have an avatar, it'll have all that stuff for the user collection. It'll create an account collection, or table for using the sequel.

[00:09:40]
And that's gonna have everything associated with that, an account that associated with the user. So because I might have the same user login with GitHub, and they also log in with Google, they also log in with Twitter. They also log in with LinkedIn, that's the same user, so those are multiple accounts.

[00:09:55]
So it'll create that collection for you, and I think the last one might be sessions. If you have sessions, there's probably no there's only two we really care about. If you don't like those, if you wanna change them, they have options to override those, and change those using type.

[00:10:09]
Or I am which is actually really easy to use, you can look it up, and learning about an hour or less.