Credentials Provider, Session Updates etc. | Authentication with Next Auth and Next.js 14 Part 2

hey my name is Yan and in this video you will learn how to implement the credentials provider inside of your next js14 app this is the part two of the next O Series in part one I already teach you guys how you can implement or or login options such as Google and GitHub inside of your app and today you will learn how to store user data inside of your database and to then utilize next or in order to use these do credentials so that people can use them to sign into your app also I wanted to say thank you for almost 100 subscribers the feedback on the last next o video was was super positive and I'm very happy about it and I've seen a lot of people asking for this part two video and so without further Ado let's just get started we will just use the project from the last video so let me quickly hop into this project and let us spin up the development server with PMP run def I'm using the table flag which right now makes the whole def experience a lot faster in terms of compiling times right so now our application is running and for this video we will also install shedan which is a component Library which is extremely popular right now and we will use it together with zot in order to create a registration and login form that has client side validation in order to make sure that your users are going to have a great user experience so let's just so let's just click on get started installation let's click on next J because that's what we are using and so let us quickly follow the installation guide we are just going to run the init command with pnpm just like so now we just got to wait and now it's asking us on which style we would like to use I personally prefer the default one now it asks us for a base color I'm going just choose neutral because I think it looks the best I personally love CSS variables because they make theming a lot easier so let's just click on yes and that should be essentially it now let's also try to add the dark mode to our app as well so let's follow the installation guide from the dark mode documentation right apparently we have to create a new component which is called theme provider. TSX let's paste this inside just like so and let's wrap our children inside of this theme provider and for the default theme let's just choose Arc and as you can see we now got the arc theme working obviously this isn't too good looking so let us actually for the sake of this video create an actual registration page I'm going to make things a bit more big for you guys just like so let us first of all prepare next o so let's go back inside of our or options and for the providers we want to add the credentials provider actually we have to import this again so let copy and paste this credentials provider just like so and here we need to once again pass pass an object which serves as the configuration also let us actually turn off the AI so we can learn something there we go for the name we are going to use credentials this is basically the text that will automatically appear on the if you didn't know next off has a preconfigured template page and whatever you've write in here will pretty much be at the top of the of the sign in form as the text then we need to initi ize a credentials object and here we can pretty much enter whatever field we expect to get past so what you could put here is essentially like email password a username a twoof a token I think you I think you get the idea but for the sake of this video we'll just use a normal email as well as a password and lastly let's create the authorized function which in the end we will use in order to add all of our validation logic and if everything is correct we'll just return a user object but for now let us just return all because we are currently not passing anything so let's just leave that out for now amazing let us also quickly create a little demo backend for the registration just to make sure that we are passing both the email and the password to our back end so let's actually go inside of our or folder let's create another folder in here which we will call register and of course we will have another route. TS and we will need next response and we want to export a string function and the method is going to be post we just need the request as the first as the first prop now let us quickly add a try catch block um error is going to be any that way we can just conso loog the error. message and then here we just going to destructure both the email and password from the request. Json and then as I said we're just going to console lock them for now just to make sure that everything is working as expected actually let's WRA these inside of an object there we go amazing Let Us Now quickly create the register page front end so for this we just create a new folder in our app directory again and we just want to call it register and let's create a form. TSX which is going to be our registration form where we are just going to use uh the use client we're going to use the use client method inside of and then we of course need a page TSX amazing let us quickly create a boil plate let's start off by obtaining the session and we actually going to obtain the session on the server as you may know on the app directory now every single page is by default a server server component so we can just use get server session and we and we need to pass in the O options obviously we have to specify this S A synchronous otherwise we can't use the weight now that we got the session we can essentially just do the following thing if we have a session then the user obviously doesn't need to see the registration page and th we can just use the we can just use the redirect function from next navigation and we're just going to redirect the user to the index page or wherever you actually want to redirect them that's up to you of course and so let's actually create a section here for the class name we are just going to say hey height is going to be screen so the M height actually of your entire screen then we can just use flex and then we actually Center the whole thing just like so maybe also say container just so you have some padding and um yeah actually let's create a diff here we're just going to give it a width of let's say 800 pixels and let's quickly also initialize our form component also here we need to specify use client at the top because we're using some client components that wouldn't work in a server component that's essentially also why we had to split these up into two pages right here because this is used on the server and this is used for client components let's also call this register form makes things a lot more easy I think and now we are going to essentially use shetan for this so let's go into the documentation and look for the form and here we have essentially everything we need first of all we need to add the form component so let us quickly do that just like so it's now installing now that we have everything installed it's as easy as just copying everything over that we need so that's going to be obviously zot and a form schema which we're going to customize in a bit apparently we also need a zot resolver obviously that and the use form Hook from reactor form it's pretty much just now a little copy and paste game nothing too fancy let us copy this as well this obviously has to go inside of our component just like so let us also get rid of all of the commons for now and obviously we need these form components as well or our front end and we also need to install in input I just I'm just noticing yeah we obviously need inputs as well so let us actually use a use this command let's modify it to input instead of form and let's paste it there we go and now this error should be gone yep just like so by the way if this error doesn't go away you can just hit control shift and P and then you can just say restart TS server that is just going to restart typescript in that case that often helps a lot right so let us now actually insert the form part which is this one right here so let's copy and paste this over there we go just like so oh actually I did a little whoopsie here now it is correct yep that is looking very good so far let's actually make this terminal a bit smaller and now let's save this for now and let's see how this looks like also obviously we need to insert the register form here inside of our page. TSX and now let's navigate over to/ register and that is looking okay I guess yeah now we have a field called username obviously you could make this look a lot better on your own uh I think it wouldn't be super interesting for you guys if I would just work on the front end for like 30 minutes straight so I'm going just keep it very simple and just show you mostly the next o related stuff I hope you guys are okay with this okay let's actually work a little bit on our little schema which is actually in the end responsible for the client sided validation as I already mentioned in the beginning and so for the username that is already looking okay I think a maximum of 50 characters should be good or you can just customize this to to your own needs um but what I actually often like to do is specify a little um message here essentially inside of this Min or Max function you can pass a second argument which can be an object containing a message which is basically going to be automatically placed below your input by Shad CN in case the user does something your schema isn't a fan of and so in this case we would probably say username must be at least two characters along and for the max amount we want to specify a message as well as word can be longer than than 50 characters just like so let's Auto format this and obviously we own actually I just figured we don't need a username you could obviously add this just like this but um this video I forgot about our Au options and we actually only have email and password obviously you can customize this to your needs to your own needs but uh change this to email for this video and let's change the Min value to one and maybe let's say this field has to be filled and for an email let's make sure it's maybe not longer than 300 characters I'm not exactly sure if that makes a lot of sense but let just keep it like this for now obviously this and there's also something cool that comes with aod and that is called the email function which automatically validates if this is a correct email or not and in this case we can just say this is not a valid email you do not need to specify an object with the message key here you can just leave it like this this will work just fine and let's also create a schema for the password which is also going to be a z this is going to be a string as well and then for the Min value password let's say maybe six let's add a message password has to be at least six characters long and you probably also want a confirm password so this is going to be used so that the user is forced to repeat his password to make sure that he doesn't have a typo in it and in the end won't be able to loog into his account so here we can just copy and paste the Min amount over say confirm password has to be at least six car long set a comma here and then we can use something that is called a super refine and here we just create a function and in here we can just obtain /d structure from our schema so we just grab the confirm password as well as the password we just say CTX just like so now we can just essent essentially say ifirm password is not equal to your password Here we can just now create an issue I know this code is a bit uh complex but well Z overall is a bit complex but um yeah there's a lot of documentation and um issue reports and on stack Overflow so this stuff is actually pretty easy to find so the message will probably say the password did not match and then it's very important that we also specify a path here to where we want to display the arrow on and in this case we want to display the arrow on the confirm password field just like this this code this code should work and by the way in here you can just specify default values um in this case we don't need any for now so let's just leave this out okay so we're getting an error here because nothing in our schema says username as you can see we just changed this to email so obviously we have to change the name to email now so that when we later submit the form data we actually get a email field let's change this to email as well obviously and the input now needs to be of type email placeholder we can just say joho whatever.com for example and if you want to use a form description feel free to do so it's very user friendly this is your email used to sign into our app let's save this and let's see how this looks like looking good so far let's also check if the the schema validation is working let's type something in actually do not add type email to this as this um just don't do it otherwise the Zod error messages don't work for some reason but now that I've removed it when I now type something in and as you can see this is not a valid email but if we hit submit we now get a proper Clans sided error saying this is not a valid email and let's change this to a valid email and since we have this onsubmit function here which automatically gets called inside of a form as soon as you hit the submit button which type submit with type submit we can just now take a look at our console let's get rid of this out let's get rid of these errors and let's hit the submit button and as you can see it doesn't work why is that because we are still missing some fields we still need the password and confirm password field add it to our front end in order for these values to get passed properly so let's add these real quick as well so let's just copy this down let's call this one password password uh let actually don't add a placeholder for this this is your password used to sign in sign into to our app I think here we can safely add type password yep here it is actually fine if you add types type password so you can see that the validation works and we now get these hidden letters just like so amazing now let us also add the re password re password or like confirm what we've called it confirm password and still Ty password and here we need to say confirm password just like so please confirm your password just like so and now we should actually see the correct values in here as soon as we submit so let's create and just type something in submit and as you can see we successfully get a confirm password email and password amazing let's see if when we mess this up that oh yeah as you can see it says the pass the passwords did not match if they actually don't match which is all working as expected as you can see so this is working great so far amazing now that we got this working let us now pass this data to our back end to to the registration endpoint that we created at the beginning and so for that let's go inside of the unsubmit function and inside of here just say cons response it's going to be await patch now we're just going to say/ API SL off/ register and now we need to and now we need to pass some options here the method is going to be post it's going to be post request the body is going to contain or submitted data so we just need to Jason stringify this just pass these values here and obviously need to say Asing function here order to use a wait so in case the registration fails we may want to show some messages so let us just use um the toast component from shyn actually there's something called sonor yeah this one this looks a bit better in my opinion so let's just use this one so let's install this once again there we go we want to see some documentations on it we can just click this docks button and here you can essentially see that you can uh change the looks of the toast um or at least the icon and you just say toast. success info warning whatever um so that's good to know or we just take a look at the Docks read through them because it is most of the times um very worth it and so let's say say if response. error you want to say toast and here we can just paste in the response. error actually we got to say toast. error actually we need to get a Json first so let's say cons data and then we need to await Json and now we can just say if data. error we want to display the error message just like so some reason vs code is very slow right now for me so it's a bit annoying but yeah but in case there isn't an error we can just say post. success account created just like so and now let's see if that is working let us now add our email our password and let's hit submit obviously we're going to get an error as we just console logging inside of our back end but as you can see guys it did make an request to to the register endpoint and it should actually console look it should actually console Lo the data which it did as you can see if we take a look inside of a terminal it correctly got all of the information that we just passed from our from our registration form and guys in order to store the data in some sort of database I decided to use mongodb because that is what I usually use for my project and so this is what we're going to be using in this video I know that not all of you guys like mongodb but it is just what I personally prefer prefer to work with so let's actually create a deployment here you're just going to use the free tier for the sake of demonstration purposes I'm going to just use the region Frankfurt as that is the closest location to me and so let's actually create a deployment and we just going to quickly do a little capture now we need to create a database Bas user which is what I'm just going to quickly do and let's also choose a connection method and I think here we have to choose drivers yeah exactly and now let's actually install mongodb so let's just say pnpm install mongod DB this should now install in the background nice and now we got our connection string right here let us copy this over this is just to connect to our database and so let's create a new entry inside of our m. local let's call this one URL I'll just paste just paste the URL inside of here let's actually get rid of the app name cluster thingy I don't think that we need this and behind this slash here is actually what our database name is going to be I'm going just call this demo demo uh demoore next or just like so that should be good right actually let's call this mongod DB URL and let's save this now let's go inside of our lip folder and let's create a file called mongodb client. TS and just copy and paste this inside of it you will find this file inside of the GitHub repository that is linked in the description below this is basically the file that we need in order to establish the connection to our database and to also do all sorts of operations with it such as inserting updating data inside of our database pretty much yeah so perfect so now we can add the logic in order to store the data inside of a database for that let us also quickly install a library called bcrypt This is just to Hash the passwords before storing them into the into our database which is very important to do actually you do never want plain passwords inside of your database now that we installed this let's just say const hashed password let us quickly import the hash function from bcrypt actually let us just use require because there is no typescript support um so let's just say cons bcrypt require bcrypt actually would make more sense to do this down here and now we can just say bcrypt do has and then of course we just put plain password and the Sol rounds here can just enter 10 which will be enough and now we just first of all need to initialize the client so let's do await client promise from our mongod DB client then we just need to grab the database so we just say client. database and let's now on create account and here we just say await db. collection here we just use the users collection and now we just need to say insert one now we just pass an object we say email and for the password definitely make sure to use the hashed password here as I said never store the plain password inside of your database now we could just say return new next response you could just say account created here we could just pass a status code of 200 obviously we have to say next response. Json here we just say success and we can remove the new because this is not a normal response is a next response so I'll just copy this over and in this the case that something goes wrong we just say error and then we just say error. message status 500 and we go and this should now actually insert the user into our database obviously I would recommend you guys to use and create a complete schema for your user like with email and password in order to have some some sort of automated validation otherwise you will be forced to obviously uh add other validation inside of your back end as well by comparing that the email is an actual email and that the password and the rep password actually do match but I'm just leaving this out because otherwise the video would be too long but I'm pretty sure that you will figure this out yourself perfect so let's give this a try let's go back into our app actually let us quickly also connect to our database using mongodb Compass just very very easy to work with the data inside of you so I highly recommend you to download there to download this program so here we just paste in the connection string that we also use inside of our app now when we click connect we get beamed into our database pretty much obviously there's nothing in here right now but that should hopefully change now as soon as I will try to create an account let's say John do@ gmail.com enter some random password hit submit and hopefully we oh we actually do get an error for some reason oh yeah we we are missing a environment variable um this is because the mongodb client expects a environment variable called mongodb Ur uh so we actually need to readjust the name and we also need to restart our application in order for the changes inside of ourm local to take effect so let's actually restart our application real fast real quick and there we go it's already up and running let's do the same thing again let's hit submit and let's see what happens it says account created amazing so this seems to have worked first try and as as you guys can see I just hit refresh and now we have our demo next all database let's go inside of it and here we have a collection called users just as expected and as you can see guys we now have a document saying email and password and here we have our p hashed password so this already worked perfectly and for the payload as you can see guys I used this password and this is also what we're going to try to use as soon as we add our login logic all right now that we have a perfectly working registration form with client sided validation in place let us now also create another form for the login page so for that let us create a new folder called login and we once again need to create a form. TSX as well as a page. TSX let us copy this over to our login form so actually we need to adjust a few things first of all let's get rid of the super refine as well as the confirm password we do not need these side of all logins login form let's change this from register form to login form and here we just say you are now signed in the endpoint also changes from register to login and we can get rid of the confirm password field inside of our front end just like so obviously you have to to say login form here as well there we go I would probably get rid of the form description inside of the login page because I don't know I think they're a bit weird when you use them on the login page so let's get rid of them and this should be all amazing now let's just copy and paste this over as well um pretty much the same thing we can just leave this in because well when you're on the login page uh and you already signed in of course it would be better to just get redirected to the index page so let's just leave this in here we obviously need to now say login form in order to get the correct form maybe with the submit button let us create a link using next link let's say hre um slash login and then we could maybe like say already have an account just like so obviously in that case we have to create a diff with these inside of it or I think I can just say wait I think I can just say um block on the link and then it should work yeah just like so now if I click this we get redirected to the login form and let's add something similar let's also actually create a little create a little heading here saying um registration let's go back registration yeah that's looking okay I guess let's make it a big let's make it a bit bigger let save on semi Bol just like so and that looks pretty cool great let's copy this over to our login form let's say login here let's also grab this little thingy past this above the submit button and here we should say don't have an account question mark now we can just essentially oh think it's not defined H my bad let's past it like this there we go and now we can just switch between these oh actually have to just URL slash register now we can finally switch between these just like so great that's looking very good now we just need to add the signin logic inside of our login form and so I actually forgot that we do not that we do not need an extra Endo for this there's actually a built-in function inside of next o that makes the sign in possible and that pretty much forces you to then use the authorized function automatically inside for or options and so let's quickly use this function the function is called sign in so let's just import this from next or react and first argument we have to say credentials then we need to pass an object and here we are going to pass both the email and the password so we could essentially just say could just say values here that should theoretically work actually let us do it like this let's actually just say email is equal to values. email the password is equal to values. password and then we want to say redirect false let's also for now log the response just to see if everything works as expected and if there isn't a response. error and we can just uh actually let's let's create a router real quick so let's just say con router here we just say use router from next router and then if there isn't an error we Alo that basically means that the user is now signed in we can just redirect them to wherever we want in that case let us just redirect him to the dashboard for example so we obviously can get rid of this so that should now actually work let's go back inside of all options and I forgot to mention that we have to do one thing that is very very important for our sessions since we're using the credentials provider we need to store those PR credentials somewhere on the client and for that reason we have to say strategy JWT which basically stands for Json web token and that way we won't run into any errors let's Now quickly grab our mongod DB stuff that just paste this over inside of our authorized function we need to of course import this again now we can just now we can just um grab the user from the database I just quickly copy this over as well ev. collection. users in this case we need to say find one so the find method is going to make sure that we actually grab the user from the database so that we can in the end return it inside of the authorized function so in this case we have to make sure that the email is equal to credentials which could be possible possibly no so we have to add a question mark here do email and now since the password is hashed we need to actually compare it first so let's actually um require bcrypt again let's do this down here so now we just say const password correct now we just say await bcrypt do compare and now we just basically compare the the password that we passed with the password from the database oh we actually need to say await here it's pretty important there we go so now we can just say if password is correct we can just basically return an ID for example here we could just say user. ID and the email so user. email and once again we could just lock this for now just to make sure that everything is working as expected and otherwise um it is still throwing an error because we are still returning nothing in case that the password isn't correct so now we can just say return null in that case which now should also get rid of this error which it doesn't for some reason that's strange for some reason I had to say as any here that basically got rid of the arrow I don't know why um but yeah that seems to work now what is also really important in order for the credential provider to work is that you have a next off URL and next off secret so make sure that these two are included inside of yourn file if you don't know how to generate one of these secrets uh make sure to watch the full last video cuz I explain it in that video amazing that is now all saved and I think we can now try to log in so so let's go inside of our app and here is a little issue extra was not mounted let's see yeah I think the issue is because we are importing it from next router not next navigation let's change that yeah now it works as you can see so make sure to use next navigation for the use router hook great let's open up our console and let's see what's going on as soon as we try to log in I'm just going to use the email that is already stored um instead of a database so just was just j@ gmail.com use the password which was 2 three which what was was it yeah it was 2 3 4 1 2 3 4 2 3 4 1 2 3 4 and let's hit submit and we got redirected to the dashboard so that means that we should now be signed in actually obviously the SL dashboard page doesn't exist so let's quickly create that page okay now that we have a dashboard page let us create a um form. TSX here as well maybe but let's also go inside of the page again let's grab the session let's make this asynchronous need to import get services as well as well as all options and now we could just say welcome back and then session session. email we obviously do not have a username in this case session. email so I'm I'm just console loging the session right now and it seems as if this is inside of a user object so let's just do const user we just say session. user obviously what we should also do is if we do not have a session and we want to redirect the user to SL login just like so but otherwise we can just say con user session. user and here we could just say welcome back user. email just like so and as you can see it now says welcome back jundo gmail.com change the text size a bit and obviously we do not have anything else to display because this is just a very basic basic approach with just email and password but of course you could just store stuff like the username you could allow the user to upload to upload images so now let me just build something that allows us to change our email and as soon as we've changed our email we want to update our session on the client in order to display the newly set email in our front end and so in order to do this we have to do something very strange we have to create a function called reload session so let's actually create a fs. TS inside of our Leb folder let's just do export const reload session and here we just create an event so a new event and that event is called visibility that event is called visibility change and now we have to say document. dispatch Event Event just like so then we need to quickly hop back into our o options now next o allows us to initialize callbacks for certain events and inside of here we can create a JWT event which is going to be a asynchronous function which has a user a token a trigger and a session just like so and so if the trigger is going to be update I will show you where we will send do the update inside of our front end which will automatically trigger this call back then we are just going to return the JWT token as well as the updated session which is going to be automatically grabbed from the database otherwise we are just going to return our token and the user just as usual actually I think the callbacks have to be inside of here yeah obviously wait to put them inside of they actually have to be in this location just like so pretty much below providers you just through the callbacks then it should look essentially like this and let's quickly create a endpoint saying update emo and we just create a route. TS expert as function post and here we want to first of all get the session but we do get server session again and we just P pass the O options and so if there isn't a there isn't a session we want to essentially say status 400 not not authorized it's really important to add otherwise people could just use this mpoint to change anyone's email pretty much let's say cons does user exist now let's grab our mongod DB let's grab our mongod DB logic again to like at users and then we just say find one email we just say const emails equal to request. Json we have to await this of course and now we can just say email right here if does user exist actually if not does user exist we want to draw another error user doesn't exist and now that the user exists we can just update the email here so we could just add this logic here const update email we would also of course pass something which is called the new email um and here we would say update one and the field is going to be email and here we just pretty much insert the value of the update which is going to be new email just like so all right and that should then say email changed amazing let us then quickly create a little form U we have this already right here let us just use the register form for this and just modify it a bit so let's paste this here dasb form just rename that real quick and we will essentially just need an email so let's SC off the password and the confirm password yep that's looking good um modify your email just say it like this um can get rid of the password and the confirm password let's get rid of these and here we could essentially pass in the default value that's a very good use case um so let's actually um to our dashboard form let's just say email and here we're just going to pass the email that our user has our signed in user has so now we can just say default values and then we could just say email and now that is properly um properly inserted so let me just um just leave that as it is let capitalize this m and we're going to be hitting the update email end points and um in this case actually this makes no sense we can just leave it as email because here we just going to be saying update one session. user. email so email session. user. email oh and obviously always make sure to await the get server session I keep forgetting this for some reason and this is how it should look like now now it's essentially going to try to find the user from from the current sessions email and as soon as he found it the email is going to be updated with the email that is being passed to this endpoint from or update email form and let's change the to notification to email changed obviously now we just have to insert the dashboard form right in here and yeah as you can see it just now asking us for the email which we can just very easily pass here from our server session so we just say session. user. email and we have to say as string because it could also not exist we have no validations for this in place um but yeah in a real case scenario you would of course have to add a lot more checks here just to make sure that the that that the data actually exists but uh I think in this case it's going to be fine actually getting an error here for some reason when I save this now the error is gone apparently that strange either way as you can see it is automatically inserting our current email we now refresh the page which're is working just as expected oh we can just get rid of the um already have an account thing obviously we do not need this in the dashboard so let's remove this um for the submit button maybe let's make this more user friendly by saying um change email now let us first of all see if this works without updating the session so let's just take a look at the network tab and let's just I don't know say jundo [e-mail] as you can see guys our current email inside of the database is jundo gmail.com um we change email we get a 400 interesting okay user doesn't exist um that is weird let's see why that is I see I see um let's just um use this here as well because it essentially just used a new email to to find the user and because of that it said user doesn't exist by the way we have to say error here not success sorry a lot of mistakes I have a little bit of a headache today um I hope the video is still somewhat understandable um I didn't wanted you guys to wait too long for this video because I've gotten a lot of requests and so yeah I hope it's still fine let's refresh the page and let's say jundo [e-mail] and we get another error apparently update document requires Atomic operators oh yeah I forgot that we um I think this is because we just pass an object here like this but what we actually have to do is we have to we have to still pass an object of course but we have to use this dollar sign set thingy and then we have to pass whatever we want to change in this case the email um I think this should now work let's try this again so I just change this to jundo [e-mail] and now we get a 200 saying email changed let's actually see if the email changed inside of our database um yep it did as you can see so that's already already working correctly let's refresh the page and as you can see it is still inserting our old email because we haven't actually updated the session on the client and this is what I'm going to show you guys now how to do this we already created the reload session function and we also configured our o options in order to take in account the update event now to update the fun now to update the session we are just going to say we're just going to obtain the session on the client first of all con sta session like usual and then you would also need to get a function from this called update now we just use the um use session client sided book from next o just like so now that we have the update function we can now just call it so we just say update and then we pass our current session and whatever we want to update so as we know our session first of all contains a user object and for that user object we are now going to oops we're now going to of course first of all add our current session. user and now whatever we essentially want to update in this case we want to update the email so we just say email and then here we just say values. email just like so and that is going to be updating our session on the client and now what's extremely important is that you now use this reload session function to make the changes appear in real time that is only needed if you for example um add a add the functionality to to change the users's Avatar and you maybe have a nafar and the avatars at the top right hand corner and once you change the image here you maybe want to also uh change the image on the nav bar without the user having to refresh their page and that is essentially how you're going to do it but um this reload session thing is of course um this reload session function I can just highly recommend it to always call after you push an update just like this and so let's save this and see if it actually works so right now of course we s the old session but now maybe let's change this to web Deon at gmail.com change email and we get an error invalid invalid hook call uh I think this is because I'm trying to use the use session hook set of a function we have to actually put it up here just like so now let's try this again let's just say @gmail.com change email see if it changed in the database it didn't okay so that was a little oh yeah obviously because it is now trying to find it is now submitting our current email oh as you can see but it did update it already uh did update our session um which is actually kind of strange because I'll also make sure that if there's an error to return here because it now updated our session um without it without the endpoint actually returning a success um we actually have to manually change the email real quick in the database just like so so now everything is synced again and if we now say test em [e-mail] we change email get a success and if we now refresh the page we should get the updated email inside of this field which we do as you can see the session is correctly updated as well as in the welcome back message of course and this is essentially how you modify your session on the client this is it this video turned out pretty long let me check the recording time it's actually something it's actually almost 2 hours um as I said guys I have a little bit of a headache but I still hope that this video was still somehow watchable and that you learn something new today as always you can leave your questions down in the comment section below and I will try to answer all of them as soon as I can and everything that we've worked on in this video is also going to be in the GitHub repository under this video inside of the description before I'll end this video let us just quickly go over what we've created in this video so I'm going just quickly uh clear all my cookies which should now actually redirect me to the login page yeah as you can see this is all working um so let's just create an account as you can see we can just switch between login and registration this is everything that we have in our users collection right now let's create a new user called Web Defan gmail.com just going to use the same password as always now let's just hit submit and that should have created a brand new user which it did now let's go to the login page let's say webon gmail.com use the same password and now let's hit submit as you can see we're now on the dashboard it chose the correct email and now we also have the option to modify that email modified email gmail.com set change email and as you can see the email did change and if we now refresh the page the email changed also inside of our client session this is all I hope you guys are going to have a great day thanks for watching if you don't want to miss out on any new video make sure to subscribe and if you thought this tutorial was helpful please hit the thumbs up button to let me know that I did a good job here and I'll see you guys in the next one byee

Channel: WebDevJan

Views: 4,785

Keywords: authentication in nextjs, nextjs authentication, authentication, authentication in next.js 13, next.js 14 authentication with nextauth, next auth credentials provider, next auth credentials, next-auth credentials, next.js, next js authentication, nextjs 13 authentication, next.js authentication, nextauth with credentials providers, next.js and supabase authentication, nextjs, authentication in nextjs 14, nextjs14 authentication with nextauth.js

Id: Aq4FstAD3iM

Length: 41min 12sec (2472 seconds)

Published: Mon May 06 2024