Next auth credentials - signup & login with email & password (Next JS app router)

all right guys in this tutorial we're going to be covering next orth with email and password login First of all we're going to be starting off with creating a registration endpoint a registration API endpoint where we can register a user we're going to Hash the password we're going to store the email and password in a postgress database to host it on Vel and then we're going to hook up the next or part where we can log in using those credentials now I've seen so many tutorials covering next or with GitHub who the frigg is logging in to application using GitHub nobody nobody fraking logging into your application using GitHub people are logging in they want to log in using email and password so that's the reason I've created this tutorial we're going to be logging in with email and password using next O Okay so enough of me talking let's crack on with it there's probably a couple of other things I've missed out in that little intro but we'll get to it as we go along so first things first let's create let's open up our terminal here I'm going to create a new Next app so I'm going to go MPX create D next- apppp at to latest and I'm going to call it next or Tut let's move my head out the way here so yeah just proceed with all of this we want to use typescript we want to use eslint we want to use Tailwind we don't want to use the source droke Tre we want to use the app rout we don't want to customize the import Alias so while that's setting up we may as well head on over to verell and create a new postgress database so we need to head on over to the versel dashboard head on over to the storage tab from here then let's hit create database and let's select postgress let's hit continue let's hit accept the database name I'm going to call it something like next or /t and the closest place to me is Singapore so let's hit create and then if we scroll down we should be able to connect to our new project the project we just created however first of all we need to upload our project to GitHub then we need to connect our GitHub hosted project to versel and then we can connect our postgress database to our project on our Local Host so first of all I'm going to head on over to GitHub and create a new repository I'm going to call it something like next or DT and I'm going to keep it as private then let's hit create repository then while that's creating we want to head on back to our code and first of all we want to CD into our new project so I'm going to CD into I can't remember the name I gave it so create next or t Okay so CD into next or Tut then let's hit code dot to open this in vs code let's open this window up then and now we want to open up a new terminal and connect our project or upload our project to GitHub so let's go over to GitHub we want to push an existing repository from the command line so I'm just going to copy each of these lines in GitHub and actually I don't need to do this main one because we already have our main branch here however after we've done that and we've pushed our new Branch for our project we should be able to connect this project the next or tou project to our postest database on versel and actually we didn't actually link our project of versel yet so we need to go back to versel and let's go to overview here let's hit add new project and we want to link that new project we just created this next or tou project that we created in GitHub let's import this project let's just hit deploy here then we need to take note of our project name it's next or one word dtut so first of all we want to connect our project we want to hit this connect project here want to select our project the next or Tut and hit connect then we need to connect our project using versell link so let's do that then in our terminal let's go versel link and by the way before we can run this versel link you need to npm i-g versel so this will install the versel CLI tool and if you're on Mac you're probably going to need to prefix this with Pudo I've already got it installed that's why I can use versell Link now then we want to set up this project let's hit yes I'm going to select my organization here link to an existing project yes what's the name of your existing project we called it next or DT so now we've got our project linked then back in verse cell we don't need to wait for this to deploy we can hit back here then want to go back to our dashboard and storage and next we T postest database then we want to go over to getting started here and we want to versel end of pull and we want to pull all the environment variables that Verso creates for this project and we want to clone them to our local machine within the file. N.D development. local so let's go ahead and copy this command here then let's paste it within our terminal and we should see now a new N.D development. looc file and first thing we want to do is we want to comment out this versell equals 1 because for some reason this will force https which isn't going to work for our Local Host because we're running HTTP locally so for just for our local development we just want to comment out this verell equals 1 so from here let's install a bunch of packages that we're going to need for our project we're going to need next off and actually because we're not going to be doing anything else we're not going to be doing validation we're not going to be sending emails and things like that we're just going to be focusing on registration and login we just want nextor and bcrypt bcrypt will be hashing our password and that's all I can think of right now so let's just install those for now we want to mpmi bcrypt and next- or then within while that's installing within the app directory let's create two new Roots we want a login route and a registration route let's create a new folder in the app directory here we're going to call it login and another one called register then let's work on the reg route first we want a page. TSX we're going to export default async function register page and we're going to return a form here and it's going to be very basic we're going to have an email input and we're going to have a two password inputs actually no we're going to have one password input I'm can't be bothered to implement the confirm password here when we're registering a user so very risky I know but in a real world project you want to password confirm again I don't want to do any validation in this tutorial this is just registering a user to our database making sure we hash their password and then being able to log in as that user using nextor with that email and password so we're going to keep it very very basic so let's save this now and I know I said I'm going to keep it basic but I actually want to see these inputs on the screen so I'm just going to add a border here and a border black do exactly the same for the password input and I'm going to make sure that the form is display Flex Flex call going to have a gap of two just to make things look a little bit nicer little bit spicier on the screen we also want a button here this button will be a submit button so we're going to have a type of submit and the label text for this button will be register so then let's save this now let's npm run Dev in the terminal and open up our project in Local Host 3000 let's see what we've got here we need to navigate to SL login and actually no it's the register we need to navigate to SL register here so we've got our register form all looking good let's add an MX Auto to centry align this on the screen and we want to add a Max width I'm just going to add a Max width of something like this let's add a margin top just so we've got a bit spacing from the top here something crazy like mt10 then there we go this is looking okay for our form I'm not going to do any more customization to this however from here we want to hook up some sort of registration so back in our code then within the app directory let's create a new folder first of all to get next or working we need to create an API directory within the API directory we need to create an or directory within the or directory we need to create another new folder and this will be a catch all route for everything to do with next or so we can go dot dot dot next or and it's really important that the a in or is lowercase here I've made the mistake so many times to have next or with a capital A and hasn't fraking worked I don't know why it's not working and it's because of this fraking little bugger here the lowercase a so it needs to be next or or lowercase then we need to create a new file in here called root. TS now this is going to be our API route for everything to do with next o so all we need to do to get everything set up in next or so next or is going to take care of the JWT tokens it's going to take care of the csrf tokens so we don't have to deal with anything to do with the or on that side of things obviously we're just storing a username and password next or is going to handle the auth tication of everything for us so in our root Den dots what we need to do is to set up next door we need to import next or from next or/ nextt and actually not SL nextt just from next or we need to create a const Handler and set this equal to next or and this next or function takes a bunch of options and it's within here these options that we want to set up our next or so obviously we want next or to be able to cater for login with with email and password now if we head on over to the next door docs we can see we have here A bunch of if we scroll down uh it's this particular section here this is the bare minimum setup that we need so we need to import the credentials Provider from nextor providers credentials and we need to add pretty much this snippet here this is the setup we're going to need for our credentials provider and you may see at the top here that we have a danger the functionality provided for cred based authentication is intentionally limited to discourage use of passwords due to the inherent SC risk associated with them and the additional complexity associate with supporting usern names and passwords you know what I like to live my life dangerously I also like to live dangerously with that said let's crack on and ignore this danger message so back in our code then what we want to do is actually first of all let's copy the import credentials provider here so we want to import credentials Provider from next door/ providers credentials then we need to pass a providers array to the next door options and this is where we want to use the credential provider so we want to use credentials provider in here and we want to set up a few basic things what we need to do is pass first of all pass a credentials object and this is going to contain in this example here it's called username but we want to specify an email so we're going to have an email and password and it's the email and password that's going to authenticate our users we're going to check to see if those email and password combination is correct so I'm just going to copy this authorized function as well what this authorized function does is constructs the JWT token and whatever we return we can return an ID a name email I think there might be a couple of other things we can return that will make up the JWT token however we're just going to be returning the user ID and the user email because we're not going to have any name in this case so we also want to copy this authorized function here and of course if we return null from this authorized function for example if the username or sorry the email and password aren't correct for a user trying to log in when we return n from authorized that means we sort of reject that login we're saying that this was an invalid login and the login wasn't successful so when we return a user from authorized it means login was successful they have a JWT token and they authorized on our app and it's within this authorized function as well that we're going to be quering our postgress database oh and by the way I forgot to mention right at the start of this video we're not going to be using an omm like drizzle or can't remember the other one Prisma thing it's called we're not going to be using that we're big boys okay we're going to be writing plain old raw SQL with that said we want to copy this async authorized function here and the credentials let's head on back to our code let's paste it in for our credentials provider and we're going to add our own logic in here we're going to be querying our SQL database for the login however to get this all working let's update this to email we can just set this as an empty object same with the password because we're going to be creating our own form we're going to be creating our own login form so we don't need this however we want to export this Handler then right at the bottom here let's export Handler as get and Handler as post so with that said then we're going to forget about this authoriz for now however we want to set up our registration route So within this orth directory we want to create a new folder we're going to call it lowercase register and we're going to create a new file in here called roots. TS and we're going to export a default async function post so we're only going to accept post requests to this endpoint and we're going to pass a username and password to this endpoint so let's add a tri catch here this is console log any errors that we may face in our request we're going to grab the request that's sent to this post and this will be of type request then what we want to do in our try catch let's go cons destructure email and password set this equal to await request. Json so we're grabbing the email and password that we passed to this register API endpoint then I'm not going to do any validation here but it's at this point you want to do some validation so validate email and password for example make sure that the email is a valid email make sure the password is minimum characters or maybe you want your password to have a special character and also I want to point out as well that you can use a library like Zod or something like that and Zod is a very very popular library for things like validating data on the front end and back end so I'm not going to be using any validation or things like that in this little tutorial however it's really important that you do include validation I'm not going to use it I just want to get to the next or side of things so we're just going to skip over the validation for now but with that said let's console log first our email and password just so we know this is all working and hooked up correctly then within our app and register page . TSX what we can do is add an onsubmit Handler and let's go handle submit here and what we want to do is go const handle submit and this will be a function this will be a form event and of course we need to import form event then from react at the top here then we want to go e. preent default and we want to grab the email and password that we input here so to do that let's go const form data and set this equal to new form data passing in our e. Target and we're going an over here and that is because we need to pass to the form event an HTML form element so we need to make sure that this is an HTML form element and it should be e do current Target here instead of e. Target so that clears up that error then we on our form data we can use the doget function to grab our email and password from each of our inputs so what we want to do as well is we're going to hit our new register API endpoint so here let's go const response and set this equal to a wait Fetch and because we're using a weit here we need to turn this into an asynchronous function and we want to hit the API orregister endpoint the method is going to be of type post the body we're going to json. stringify and we want to pass the email so we want to grab that from formdata doget email and the password do exactly the same thing formdata doget password so let's save this let's go console log here the response and actually I don't think we're going to get a response back because we're not returning anything however we should see in our terminal logs the email and password being logged so first of all let's head on back to the browser and we're getting this error here and that is because we've got a bunch of browser specific spe ific logic or only logic that the browser can handle within a server component so what we need to do is either at the top of this file here we need to add a use client directive and then we need to remove the asynchronous function here and just have a normal function however I'm going to show you as well if the user is logged in we're just going to redirect them if they try and access the register page we'll redirect them to the homepage for example if they're already logged in so a logged in user can never access the register page or the login page page so with that said we need to make sure that the register page is a server component but we're going to create a child component which will just handle all the form logic So within our register page let's create form. TSX in here and we're just going to move all of our markup into this form and it's going to be a client component so we need to use use client at the top here then let's export default function form we're going to return that markup that we just copied speed and we're going to copy as well we need to cut all this the handle submit logic and in our form component then let's paste all in there that all should work now then but oh and we need to import this form event type at the top here from react then in our page. TSX let's remove this form markup but we want to render our form which we need to import to the top here from form let's remove this form event import and then in form. TSX okay great we've got our used client Ive back in our browser then everything should be working fine so let's see what happens then if we type in a username and password and it looks like my text color here is white so let's fix this real quick for our form on our inputs let's add a text black exactly the same for that password input text black so let's save this now and head on back to the browser let's type in an email okay great and a password let's hit register and let's see what happens we should have some console logs within our terminal it doesn't look like we have so we've got detected default export in register route so if we go to our API orregister rotts we don't want to export default async function we want to just export a named function we want to export post as a named export so let's save this now and this all should work so let's hit register Famous Last Words let's head on back to our terminal and again we're getting an error here no response is returning from root Handler so so let's fix this and let's just go return next response and we need to import next response at the top here from next server we're going to pass a next response. Json and let's just put a message success even though that's probably a lie then let's hit refresh in our browser again let's add some dummy data in here let's hit register and we got an email and password set to null on both of these so means we've got some issue with our logic in our form. TSX it's probably because in our form data here looks like our form data is probably not set correctly and that is because we try to grab email and password from our form but our Imports don't have any names so we need to add a name to our each of our Imports each of our inputs we need to add an email name and a password name so then we can grab using theget on email andget on password inputs so now if we save this and take a look at the browser again let's hit register and again let's head on back to our code and we can see we have our email and password all loging correctly from within this is coming now from within our console log here within our register endpoint so from here we want to register this particular user to our database we want to save our user to the database we need toh the password but first of all we need a users table in our database so let's head on over to our browser then within postgress in verel what we want to do is click on the data tab here and let's create a query here we want to create a new table we're going to create a table called users and we want to specify each data item we want an ID and this ID will be serial and it's going to be our primary key then we want an email and this will be a text data type and we're going to have not null in here exactly the same as password password will be text and not null so if we hit run query then and we get an error here it's because I haven't added commas after each data item so let's hit run query again let's head on to browse and let's select our table the user Table and there we go we've got ID email and password so now because we've already connected our postest database from versel to our project what we can do is now now save some data to our database so first of all we want to do is Hash our password so we want to import hash from bcrypt and what we're going to do is we're getting an error here and that is because looks like bcrypt doesn't export any type definitions so we want to npmi saave Dev at typ bcrypt and this should clear up that error so while that's installing what we want to do is create a const hashed password here and set this equal to await hash and we want to pass our password in here and the number of salt or rounds and we're just going to add a number of 10 in here with our hash password and we've got our email what we can do is save our new user to the database so at the top here we want to import SQL from at verell and actually we need to import sorry we don't need to import we need to install this package it doesn't look like we've installed this package let's go to getting started in verell and we want to need to MP M install at versel / postgress so let's do that for our project then we should be able to import SQL at the top here from at verel SL postgress so with this SQL function then what we can do is underneath our hash password Here we can go const response and set this equal to await SQL and we just want to add our SQL query in here so our SQL query is going to be insert into users we don't need to specify the ID because we've specified that that is a Serial data type which postgress them and will autoincrement the ID every time we add into this table but we want to specify the email and password and then we want to specify the values as email and hashed password so if we save this now then what on our response we should get how many rows were affected by this however we're just going to trust that this all work correctly we're not going to use use this response we're just going to mpm runev and let's check to see that everything is saving to our database correctly so I'm going to head on back to the browser let's hit Refresh on our register page and I'm going to add info at Tom fi. co.uk in here going to add my test password let's hit register now if we head on over to postgress over to the data Tab and let's select our users Table and there we go we have our new user we have our email address and the hashed password so from here we just need to hook up some login logic and all this login logic is going to be handled with next o so if we head on back to our code within if we scroll to the top here let's work on our login page so in app and login let's create a page. TSX I got txx there let's create a page. TSX and what we want to do is export default fun function login and I'm going to call this login page then we want to return do exactly the same thing we're just going to have a form here we're going to have a bunch of inputs well when I say a bunch of inputs we're just going to have two inputs we're going to have exactly the same thing we could have just copied this actually I'm going to do that from the register form so I am just going to copy everything from the register form in our login page I'm going to add another form. TSX and paste everything from the Reg just a form into the login form and what we can do is let's comment out everything in handle submit and instead let's update this to say login the email and password inputs will remain exactly the same then in our page. TSX for our login now remember this is important this is in the login page not the register page we want to do exactly the same we want to render that form component which we need to import at the the top here from do/ form so now if we head on over to the browser again let's head on over to login and there we go we can see we've got our login form here now we need to hook everything up so in our form. TSX for our login page we still want to grab in our handle submit here we want to grab the form data but we don't want anything to do with this register call here so actually let's just remove this register call what we want to do though is use the builtin sign in method signin function from next or/ react so we can use the signin function and we need to pass a couple of things in here the first argument to the sign in function we need to pass credentials because we're signing in with credentials then we need to pass the form data so it's going to be email and password so we can grab that from form data. getet email exactly the same for password form data doget password then we want to specify redirect false oh it's not true we want to specify redirect false here so it doesn't redirect anywhere only a couple of things left now within our app API next author and routts we need to make sure we have some valid authorization logic here so what we're going to do is grab our first of all let's console log let's return null first so we get rid of this error but we want to console log our credentials just so we know everything's being passed correctly so let's console log credentials here let's head on back to our code and I'm going to just type in or am I going to type in my email and password and hit login then we should be able to see within our terminal window we should be able to see our credentials here we have our email and our password so we can use email and password then to query our database and make sure that these two values are correct so with that the credentials are indeed correct so to do that we need to import because remember we didn't save a plain text password we saved a hash password so we need to Hash our password again and compare both of those hashes but to do that we can use the compare method from bcrypt so let's import to the top here compare from bcrypt within our authorized Zen let's grab our user data using SQL from our postgress database so we can go in here again you probably want to make sure that an email and password has been passed correctly here so you want to do a little bit of validation within this authorized function again I'm going to skip over the validation part here and we're going to go straight to querying our database so we want to go here const response and set this equal to await SQL and we need to import SQL at the top here from ATL postgress and we want to select all where email equals credentials. email and just in case credentials is not undefined let's optional chain this then underneath our sqr query and actually I forgot to specify the table here so we need to select all from users where email equals credentials. email so then we should be able to get a row back if a row exists for this particular email address and our result is always returned as an array from SQL sorry from this SQL function from vers so we want to grab the user then and set this equal to response. rows and the first element in the array because obviously and actually we didn't specify that the email should be unique we should have specified that the email should be unique in our SQL query when we set up our table however that's not so important what actually is pretty important because we don't want a bunch of users being able to sign up with the same email address creating a bunch of accounts with the same email address actually I'm going to fix that now because that is actually really important so in our postest database in let's go over to the query tab so I'm going to go alter table users add conr unique email and it's going to be unique and we want to Target the email column let's hit run and I'm getting an error here and let's check Al table users add constraint unique email let's hit run and there we go so we have our unique constraint now on our email column so again back in our code let's finish all this off then we want to grab our user from our table from our users table we're to check to see if the password is correct so let's go password correct and set this equal to await compare we want to pass in the password that the user entered so that's we can grab that from credentials. password and we want to compare it to the user. password from our database so this will compare the hashed passwords now just in case this is no undefined let's just default this to an empty string and let's check then if password correct then we we want to return the ID of the user and the email address of the user which will make up part of the JWT token so let's go ID in here and set this equal to user. ID exactly the same as email let's set it equal to user. email sorry user. email here then if password is correct let's return that else we just want to return null and we've already got a return null there so we don't need to do anything with that so let's save this now then and take a look in our browser let's hit Refresh on our login page let's try and log in with credentials let's hit login and we're getting an error in the terminal here that is because we've got invalid URL we need to add to our M.D development. looc we need to add a next oror URL and set this equal to http Local Host 3000 and we also need to set a next or secret and we can generate Axor Secret by using op SSL r-b 6432 and let's copy this value here let's paste it in as our next or secret so now actually before we try this in the browser there's one more thing we need to do and that is in our or API or next or of routts we need to specify on our next or here above our providers we need to add a session and strategy set equal to JWT so now if we save this and in the brow in the terminal let's run mpm runev and we take a look at Local Host 3000 again for our login page let's give it a refresh let's add some info in here let's hit log in and head on back to the terminal and ideally we want to do is conso log some things in our login form so in our login form then let's await this sign in let's go con response and say this equal to a wait signing let's go console log then response see what comes back as part of the response let's go to our routts for our authorized let's check out our authorized so we've got here if password correct we're check in a way compare and let's make sure that we let's just console log here let's check to see if password is correct go console log password correct let's check this out let's hit login let's head on back to the terminal so password correct is true and we're logged in when weever we hit the sign in so what we can do is then to check to see if this all works within app and layout. TSX we can import at the top here let's import get server session and we need to import that from next or then we can use this get server session then within our root layout let's go const session and set this equal to await get server session and we want to change this to an async function then so let's go export default async function for the root layout then we can check to see if there is an active session so within our body let's create a nav tag above where we're rendering our children and this is just going to be very very simple I'm just just going to check to see if there's a session if there's a session I'm just going to render a link which will have the text log out else we'll have the text login first of all if there is a session we're going to have a button which will be the logout button so in here I'm just going to have a span again you're going to want to style this however you want however I'm just going to have a logout here do exactly the same thing for if we don't have a session it means the user is logged out so we'll have a login button but I'm going to use the link component here from nextlink and we need to import that right at the top here we need to import link from nextlink and the HF for this is just going to be SL login and then whenever we click the log up button we're going to sign the user out however to be able to add a onclick Handler we need to turn this into a client component so in our app directory here let's create a new file called log out. TSX we're going to export default function logout out and right at the top of this file as well we need to use the use client directive then we just want to return our span that says log out then add an onclick hand to our span so let's add on click here and then we want to import the sign out function from next or/ react and we just want to call that sign up function whenever we click our logout button so then in layout. TSX we need to instead of this span here we want to render our logout button which we need to import to the top here from do/ logout so if we save this now before we take a look in the browser within our login and form. TSX whenever we successfully log in ideally what we want to do is just redirect to the homepage so first of all let's check in our console in the browser what we're getting back on the response whenever we first of all enter an incorrect password and then enter a correct password so let's head on back to the browser for localhost 3000 login let's give it a refresh we can see we've got our log up button here because we're already logged in let's click the log out button and there we go we can see because now we're logged out we're rendering the login button of course we're already on the login page so let's navigate to the dashboard sorry the homepage and then if we click login it should take us to the login page let's enter some credentials which are incorrect first so I'm going to add an incorrect password in here and then if we hit enter on that we should see a response let's open up the response we can see whenever we enter incorrect details we have an error so we have a credential sign in error however when we enter a correct password the error is null so all we can do is check to see if there was an error if there was an error then we just send a message to the screen or render a message to the screen saying there was a login error however if error is null we can successfully redirect to the homepage so let's do that then let's Implement that logic within our handle submit we want to check to see if there is no response. error I.E our login was successful we want to optional chain this response as well so if there's no response. error I.E our login was successful then we can redirect using the router so in our form component we need to import router so we can use cons rout set the equal to use router but we need to import use router instead of from next SL rter it needs to be from next / navigation then we can use in our if statement here router. push and we just want to navigate to the homepage and we're also going to need to use the router. refresh so it refreshes the cache because nex1 13 has caching by default and unfortunately the router also has a cache so we need to just essentially refresh our page which will also clear the router cache so if we save this now then and take a look in the browser let's enter now some correct login details so I'm going to enter my correct details in here hit login then we should be navigated to our homepage and we can see we have our logout button so if we hit log out we can see we're prompted to log in so again let's log in let's make sure this flow all works enter the correct details now hit enter and there we go our next auth is all set up and working correctly from here then there's a couple of things we could do for example ideally when a user is logged in we don't want the to be able to navigate to the login page because they're already logged in exactly the same as the register page ideally we'll protect these roots so if the user is logged in they'll just be redirected to the homepage for example additionally we want to protect Roots the other way around so if a user is logged out then for example if we had a dashboard route then the user won't be able to access this dashboard route until they're logged in so first of all let's hook up the login and register Pages back in our code for our login page. TSX at the top here we want to change this first to an export default async function and we want to do exactly the same we want to go const session and set this equal to get server session and we need to await this then all we can do is all we need to do is check to see if there is a session if there is a session then we want to redirect to the homepage so here we can use the redirect from next sln we need to import at the top here and we just want to redirect to/ the homepage now let's copy all the logic we've got here for our login page and do exactly the same thing for our register page. TSX all we need to do is copy and paste it at the top here we need to import get server session from next o and redirect from next snation so let's test this out then back in the browser if we try and navigate to/ login we automatically get redirected to the homepage and exactly the same for register we automatically get redirected now let's do it the other way around let's first create a new route in our app so let's create a dashboard route and we need to create a new file in here called page. TSX let's export default function dashboard page and let's return in here just a div that says private dashboard page you need to be logged in to view this this so then let's check this out first of all in the browser let's navigate to slash dashboard and we can see we've got our dashboard page here however if we hit log out we should still be able to access this which is not ideal ideally we want to protect this dashboard page so we can use middleware for this back in our code in The Roots directory of our project let's create a new file called middleware dots and we want to export default from next or North SL middleware and to protect our dashboard page all we need to do is export a const config and set this equal to an object we'll have a matcher key which will be an array and all we need to do is specify our rout that we want to protect so I'm just going to obviously we've only got one that we want to protect here it's the dashboard page so we just need to protect slash dashboard so let's save this now and take a look in the browser let's give it a Refresh on the dashboard page and we may need to rerun mpm runev for these changes to be picked up by our middleware dots and actually the reason the middleware isn't working is because I've just realized I've spelled middleware wrong so let's rename our file here this should be middle wear like so and now if we give it a Refresh on SL dashboard we should be redirected to this is the signin page that next or provides out of the box for us ideally though we want to navigate to the SL login page so we need to add some extra configuration in next o to be able to navigate to the/ login page I.E our own login page so back in our code then if we scroll up to our app API or next or and root. TS if we scroll up to our Handler const here let's add another property for our configuration we want to specify a pages and the signin page we want to specify slash login so if we save this now then and let's hit back in the browser which should navigate us to the dashboard and actually it's navigated us to the homepage so let's go to slash dashboard and see what happens and there we go we now get redirected to the login page so let's see what happens then now if we log in with our correct credentials and then once we log in successfully we then try and navigate now to slash dashboard we can now see our dashboard page only when we're logged in

Channel: WebDevEducation

Views: 21,126

Keywords: next-auth tutorial, next auth, next js

Id: v6TPcU23wP8

Length: 43min 1sec (2581 seconds)

Published: Sat Sep 23 2023