How To Update Next-Auth Session in Next.js 13: A Simple Trick

hey what's going on developers in this tutorial I'm going to show you how we can update the next auth session in the client side as well as the server side updating the next auth session can be a little tricky if you have used the update function to mutate the next off session you might have noticed that it doesn't work so at the end of this video I will come up with a simple solution to fix that so you will be able to update the session both in the client side and also in the server side so let's get into it okay I open up the previous videos project and here we have already set up the next off with next shares and if you're not familiar with the next off and you don't know how we can set up the next off with next.js I highly recommend you to watch my previous video which its link is now on the screen so here as you can see in the API directory of the app directory we have set up the next off with the next shares so in this video I just want to show you how we can update the next auth session so here there is a question why we need to update this session in the first place one of the common use cases of updating the next auth session is when our backend access token expires and we want to send a request to the refresh token API and get a new access token and then we want to replace the old access token with the new one this is a very common use case of updating the next of a session manually so let's get into it here I'll go to the home page first of all I'm going to access to this session of the next off with the use session hook so I'm going to say const object and set it to use session Hulk and then we have the data and let's rename it to the session okay now inside the j6 I'm going to create two button the first one for the updating this session and the second one for just logging this session to see if updating this session works so I just paste this to button the first one as you can see the update session and the second one is the log session so inside the on click event of the log session I'm going to just log the session and inside the unclick event of the update session button I'm going to call the update session function but we didn't Define the update session function so here I'm going to just Define it so it would be in async one and now inside this function we want to update our session so here we can just mutate this session so for example I can say session dot user dot access token equals to something like DDD so it says that the left hand side of the assignment expression cannot be optional so let's just remove this question mark here and say if the session is existed then update this session so here there is a problem and let me show you what is the problem with this approach so let's save this and run our server foreign here as you can see we have the common error of the Nexus version 13 and it is because since we are using the use session inside the home page we have to mark it at the use client so let's save this and open up our browser and here as you can see we have the update session and log session so let's sign in into our application and now let's open up the console okay now let me log this session as you can see the access token is this JWT here and now if I update this session and now again lock the session you can see the access token is changed into DDD stream so that's worked for now but there is a problem and that is it only works inside the client side it doesn't update the session on the server so if I reload the page here as you can see the access token goes back to its default value so as I said this knife approach just update this session in the client side but it won't update this session on the server side so in order to fix this problem we can use the update function of the use session hook so I just comment this out and here in the U session I'm going to grab the update function and I'll go to the update session function and here we can call the update function so I'm going to say await update and then inside it we can put our updated session so here I just want to spread the session and then we have the user and then inside it we're going to spread the session that user and then we just want to update the access token which is going to be a string like DDD so let's save this and go back to our browser and here let's lock this session as you can see the access token is the default one and now let's clean this up and click on the update session and let's click on the log session and here as you can see the changes into the access token have not been applied so the update function didn't work here in order to fix this I go to the API route of the next off and here as you can see we have the callbacks object inside the callbacks object we have created two function jwtn session we have defined these two function in the previous video in order to have access to the access token inside the user object of the next half session so again if you're not familiar with the next off you should see the full stack authentication tutorial so we're not working with the session function at the moment but we need to make some changes in the JWT function so in the first step I'm going to grab the trigger and also the session from the parameter of the JWT function and here I will check if the trigger equals to update then I'm going to return an object and then spread the token and also session that user so let's save this and go back to our browser and here let's clean up the console now let me log this session as you can see the access token is the default one click on the update session and then clean up the console again and then again lock the console you can see the access token is now with the new value so let's refresh log this session again and as you can see the session is updated in the server side as well as the client side so in this way we can update the session in the client side and also in the server side so let's quickly recap what we have done in this tutorial I'll go back to vs code and I go to the home page first of all we need to grab the update function from the use session hook and then wherever we want to update our session we use the update function and then inside this function you pass a new object for our session and inside this new object we can update whatever property that we want to change inside this session so in this case we wanted to change the access token from the user object and also we can for example change the name of the user and set it to a new value but this update function alone doesn't work for us so in order to fix the functionality of the update function we go to the API raft of the next off and inside the callbacks object in the derivative function we grab the trigger and also session from the parameter of the JWT function and then we check if the trigger equals to update we return an object as the JWT and then insert it we spread the token and also session that user and else we just return an object that combines the token and the user object so these three lines of code will fix the functionality of the update function and in this way we can update the next auth assertion both in the client side and also in the server side so yeah I think that's it for this video and if you like the video please hit the like button and if you want to see more content like this please subscribe to my channel have a nice time bye bye

Channel: Sakura Dev

Views: 33,801

Keywords: next js, next js 13, next auth, next auth app dir, next-auth jwt, next-auth middleware, next-auth tutorial, next-auth credentials, next-auth custom login page, how to mutate session, how to update next-auth session

Id: gDsCueKkFEk

Length: 8min 54sec (534 seconds)

Published: Wed May 10 2023