Next Auth with NextJS

in this video i'm going to be walking you through how to use next auth with next.js to add auth to your application without using a third-party provider for example like off xero or anything like that hosting your own auth but using oauth to do it so let's go ahead and walk through how this works so we're going to go ahead and start up a new application i'm going to come in here and we're going to do mpx create next off our next app and then we're just going to call it auth so i'll go ahead and save that it'll go ahead and run the instructions to create the next js application in the auth folder and then we'll go ahead and start adding next auth into the app so that's done we're going to cd into auth and then i'm just going to do code a to open it up in my file structure on vs code so we're good there and so uh first we want to do is we want to install next auth so i'm just going to use yarn add next auth so we're good to go there now following these these instructions we basically need to create a auth folder inside of the api folder and then we need to create a file uh with the dot dot syntax it's basically destructuring a whole bunch of routes for you so you don't actually have to create a whole bunch of new files so if i create that there then we just want to copy uh this entire file over and we'll walk through it so basically this is using next auth with its providers and they have a whole bunch of providers so if i click here you can see that there's a whole bunch of providers you can use that all follow the oauth syntax they all have this similar callback url that you need to provide and so we're just going to go with github to start with we're going to walk through first without a database and then we're going to add a database as well so you can see how that works so to start we need to get a github id and a github secret in our dot m file i'm going to go ahead and show the dot m file that i'm creating uh just because i'm going to be deleting the oauth app after before this video gets uploaded so you won't be able to use these anyways but you'll know exactly how to create them so first we'll need to go to github so we'll go to authorized applications i'm just going to go down to developer settings here and go to oauth apps and create a new oauth app and then i'm just going to call this auth video and then for the home page url doesn't really matter but since next locally uses 3000 we're going to go and go with that the most important thing is this authorization callback url so like it was showing inside of here for the providers origin app off callback provider that's exactly how you're going to want to set it up inside of the callback so we'll say localhost 3000 slash api slash auth slash callback and of course we're using github so we'll do github i'm just going to register the application we'll have a client id that will stick you up here for the github id and then on top of that we're going to generate a new client secret copy that over to here and save that and then to next thing we want to actually add a page to be able to click a button and sign in so coming down here uh this is just the client side react hooks version of this so i can go ahead and copy this over to our pages index i'm just going to delete the boilerplate there and save and so what next auth client gives you is a a few nice features there's a sign in and sign out button so sign out destroys the cookie session sign in direct you to the page to sign in and then of course use session is just a hook to give you a loading state and then give you back that session so you can actually like direct them for example if you if they're not signed in or just provide a button this page is just going to provide basically buttons to direct yourself whether you're signed in or signed out so i'm going to go ahead and save that and then we're going to go ahead and do yarn dev to start the server up and then we'll show you exactly how this works there's going to be a few warnings we can walk through in the console but this should work as is so just refresh the server not signed in we'll go ahead and make this a little bit bigger click sign in there's the boilerplate page you get api auth sign in this is all customizable if you wanted a different look you can you can change this so i can click sign in with github this gives you the authorization here so i can say it's only wanting full access to personal user data and nothing else so i can say authorized nearby coder that'll redirect you back and so we're signed in and we're signed in with cookie auth there's no server data right now so of course if i refresh we still have that token and all that in the client we are signed in what we want to do now is first we're going to clear some of these warnings that we have in the console so there's a couple here we're going to go ahead and just walk through them the first one is this next auth url it's just basically saying hey i don't know where i need to redirect and provide that link to the uh to the provider so what i can do is i know for my local machine i'm going to do localhost 3000. but if i was deploying this to versailles or something like that you would change this to the domain that you're pointing to the next thing that there is is there's this session warning auto-generated signing key so this is basically just extra security on top of what you're already providing for this so we're just going to provide like a jwt session key for this and it provides you instructions on how to actually set this up so basically we're just going to copy this over into our next auth after providers we're just going to paste this here and then we want to provide this environment variable here and what we need to do is it says we want to install a node jose tools so i can just come down here stop the server and we'll do mpm install g node jose tools save that and it gives you a nice little uh script here to run just to generate this jwt and so we can copy this into this right here again this is all secret stuff you shouldn't be sharing this but again i'm sharing it so you know exactly how to do this so i went ahead and saved so we should be good to restart the server and then we should not get any console warnings or errors going forward for that so i refresh not signed in of course because everything changed so if i refresh i can sign in sign in with github and you'll see that i'm signed in nothing in the console we're all good so the next stage is say you want to provide some sort of way to identify some other records that you have in your database with this user what would be really good is if we actually had the ability to add these these records to our database right so let's go ahead and walk you through how to set that up so we're going to go ahead and uncomment this database process m database url environment variable and then we're going to want to go to prisma because we're going to be installing prisma for this so i just want to do npm install save i'm just going to use yarn here so npm add prisma dev and then that'll actually give us we also want to install a global we actually don't even have to install it you can use mpx for this but uh mpx prisma generate actually we want a knit first to knit the folder structure and you'll see once once that's done you'll see that like we have let's see should be see the auth let's do dash a dot to make sure that this is opened up on the left hand side here because it doesn't look like it is we'll just open that file here for us there we go there now it has the prisma file okay so from here what we want to do is we already have the schema that's kind of generated for us and then in our m file it generated also a database url we'll want to change some of this stuff for example my user is nearby coder localhost doesn't have a password for me and then also we need to set up the database name so we're going to call this auth example and then schema is public we can just remove that for now and so what we want to do is before we actually go with running this we'll go into i use postico but you can use whatever this is using postgres locally i'm just going to go ahead and add a database call it off the example actually let me go ahead and remove the one that i have here drop database and then add database auth example so we're good there and so that's set up and then we want to go back to the schema file and we want to go to the prisma adapter so how you can get to that is just when you're on next auth you can say prisma up here and then it'll actually walk you through what you need to install to get this to work so i'm just going to copy this over here and then we're gonna do a yarn add that and then we need to modify what we have here for the next off pretty simple we just want to change these imports up and then we want to add this adapter and uncomment the database so we're good there everything's working for that the next thing we need to do is it shows us the schema file stuff that we need to set up so i'm just going to copy this over we need to remove a few things for example we don't need these lines because we already have our set up and then also this provider account id needs to be int there's a small mistake there github requires that to be an int i'm not sure if any other auth providers work with that but that's a step that i had to do for getting this to work so the next thing that we can do is we can do um we're going to generate to migrate so mp mpx prisma migrate uh dev because we're going to do local dev then we just we can name it anything i'm going to name it off it'll actually generate a migration for us and migrate the database so now if we come back to our database we'll see let me go ahead and go to auth example we'll see that we have account session and user tables for us to work with so we should be able to sign in and have that filled up with my github users account so let's do yarn dev and then i'm going to refresh and then i'm going to click sign in oh uh prisma not defined oh you aren't add prisma dev yarn dev you know what i need to there we go yarn add prisma dash dash dev i was in a directory lower so it didn't actually get installed in the npm file so now if i do yarn dev and we refresh go here prisma dot defined oh uh one step that i missed here let's go back to providers here there's one line that i missed right here so that just creates the prismaclient and any config options that you need to put inside of there you can put inside of there refresh now we should get the sign in page sign in sign in with github and we're signed in and then if we come over here and refresh we should see that we have an account set up oauth github there's that id the int that i was telling you about and then the session and user so we're all good we actually have an authorized user that's saved in the database that we can actually attach relationships to and just work with that you no need for auth0 or anything like that this was very simple to set up and that's it for this video next video i might actually get into adding like a task that's attached to this user so each individual user that logs in they can actually see the tasks that they own directly but that's it we'll see in the next video

Channel: nearbycoder

Views: 3,088

Rating: 5 out of 5

Keywords: React, Next, NextJS, Auth, Javascript, Development, Programming, Web Dev

Id: bNEAnviNdJM

Length: 13min 36sec (816 seconds)

Published: Mon Jun 21 2021