Refresh Token Rotation With Next-Auth V5 || Managing Tokens With A Custom Backend

[@xeom]

I've been grappling with this issue for a long time, and your video finally provided the solution. Thank you so much for your clear and insightful guidance. keep it up Sir!! From VN

[@nathancho4037]

this is the most clear guide ive ever seen. it would be much greater if you handle TS in this guide but whatever i can take care of that myself. thanks! love your video

[@tapasadhikary]

Thanks a lot ❤️

[@hichamgr3152]

GREAT CONTENT! i watched all the next auth series as they were excellent, but is there anyway to make a video where you push the access token auth further using jwt User Roles for RBAC ?

[@MahfouzTeyib]

Wow keep it up Sir!!

[@tapasadhikary]

Thank you 🤩

[@imkir4n]

thank i asked about this at the beginning of the series.

[@tapasadhikary]

@@imkir4n I know 😀. Glad to help now.

[@imkir4n]

@@tapasadhikary yeah. A suggestion maybe you can add 'with a custom backend on title' there is no content out there with a separate backend.

[@tapasadhikary]

@@imkir4n Great suggestion.. updated.

[@utsavmaji4798]

Thanks sir, This video saved me

[@tapasadhikary]

Glad it was helpful ❤️

[@SLCricket-io6qi]

very very thanks sir💗

[@tapasadhikary]

❤️❤️

[@mdsumonh.shohan9159]

I want to learn nodejs backend do you have any suggested YT playlist?

[@kunalrathor7114]

thanks sir , learn a lot can you make one video more related to cookie based Auth, ( accessTOken and refreshTOken are in cookie)

[@tapasadhikary]

Sure, thanks a lot.

[@milesrykerodazie171]

this is a really great video.thanks for this.i want to ask can this refresh token rotation be done using cookies instead of sending the access and refresh tokens in the response from backend?

[@tapasadhikary]

Yes very much but remember Next.js does not allow modifying the cookies from the client for the security reason... so even if you have to handle it through cookies, it has be on the server side only.

[@milesrykerodazie171]

@@tapasadhikary thank you so much this helped.

[@neerajrathore]

Awesome 💯

[@tapasadhikary]

Thanks 🔥

[@sameedahri3939]

Best video brother, you just saved me

[@tapasadhikary]

Thanks man, thanks a lot. Glad to know.

[@sameedahri3939]

@@tapasadhikary can you please share the font name used in VSCODE

[@sameedahri3939]

I have one issue also, my refresh token work well in first time but not work in second time, because JWT still saved the old token :/ can you please help. I am using same versions as you used in tutorial

[@tapasadhikary]

​@@sameedahri3939 That's weired. JWT will not save the old access token... asin it will not save but it will use. You need to programmatically refresh it only when it expires. It could be with the logic in the code...As you have seen in the video tutorial, the jwt callback always check for the expiry and everytime it expires, we were forcefully refreshing. So I would suggest you to check in two places: - The expiry of the access token. - The logic to check the expiry and refreshing the token. All the best!

[@sameedahri3939]

@@tapasadhikary Thanks for your reply, I still having the same issue, because token is not updated after refresh call, because Next JS doesn't allow to modify cookie while it is rendering. I am curious how your code is working :D

can we do that same with prisma neon or superbase

[@dev-akeel]

15:55 Why a new refresh_token? I got it that the access_token is short lived and has expired but I am unable to understand the logic behind getting new refresh_token. This might make the refresh_token expiry as infinite ♾️??

[@ItsKrishnaPanthi]

Was waiting for callbacks handling jwt and session. Thanks for the in depth explanation. Any particular reason for not including login and refresh end points in the source code?

[@tapasadhikary]

Thank you! No reason other than making it available as part of the MERN videos to create a Node Express based auth endpoint... Will make the code available also along with it.

[@supersanjay666]

I have a query what if the refresh token expires. will it automatically logout or we have to write some logic to check if refres_token expires should redirect to /auth/signin?

[@tapasadhikary]

We should have the logic written for it. It will not be automatic here.

[@petursteinn9718]

Can you address how to deal with race conditions? When two parallel requests come in, triggering jwt callback at the same time and they get new sets of refresh tokens seperately

[@LouisNgatale]

Did you find a way around this, as I've been struggling with this, since my approach is, refresh tokens should be invalidated/blacklisted upon re-freshing, so in case of race conditions, This causes mayhem

[@RitikRaj-we2sc]

hello sir, I am facing an issue with session expiry. It would be great if you could help me out. Thanks I have a Navbar (server component) that is part of my layout. And I render links like "Login" and "Logout" in the Navbar based on the session using getServerSession(). The problem is that when the session expires and I navigate around the app, my route handler redirects me to the / route using the redirect() function from next/navigation. However, the Navbar state doesn't update to reflect the expired session. How to handle this ?

[@alexdin1565]

thanks , what if the user login using a provider ? the tokens and refresh tokens are same thing or what? please make deployment with docker

[@tapasadhikary]

It is similar in that case too.. in fact auth.js doc has a example with Google Provider you can check out. I have done a deployment of it on vercel front end and render the API portion.. Haven't tried the docker yet.. will surely make when I give a hand on it.

[@ayushshende4290]

What changes are needed in the nextjs code if the server sends http-only cookies (access and refresh) and we don't want to use next-auth ?

[@TechWarriorzOfficial]

Saved me!!! Brooooo

[@tapasadhikary]

@@TechWarriorzOfficial you are most welcome

[@karemelshendy-8945]

thank you for amazing video , what the extension for console.log preview

[@tapasadhikary]

Thank you! The extention name is console ninja

[@justin9494]

THANK YOU SO MUCH

[@tapasadhikary]

Most welcome

[@soulfly9306]

Should i type if else catch after every request to check my token has expired I think this is bad idea. What do you suggest instead of this ?

[@tapasadhikary]

No you do not need to... check other way instead.. check if the token is still alive then continue to use it... if not, return the refreshed token. That way code will be lesser. Also, you do not want to throw an exception is token expired as we are rotating it instead. I hope it makes sense.

[@imrancse94]

Hi Tapas da. How can I update session according to api response value in lib/fetch-client.js? Is there any way for it?

[@tapasadhikary]

For that only we have the session callback, vai. Whatever you need to add to the session or update, do it in the session callback. Session callback has got all the information from the jwt callback for you to update. Also remember, session is just an object, you can even add your own data to it.

[@abdurrahman720]

I was working on a company (building e-commerce site) and faced this custom backend token rotation issue with nextAuth v5. I had to go through a 'bangla' system to manage the issue and for more secured api, I had to use the native nextjs api as well as the server action. eagerly waiting for this! maybe there is no other solution on youtube on this regard! thanks

[@tapasadhikary]

Thanks! I just deployed the entire solution on Vercel, Render, and MongoDB Atlas.. it works like a charm.

[@ParthPatel-n6l]

which font do you use in vscode can you please share?

[@tapasadhikary]

Lws, Operator Mono

[@loznicafk]

nice one, but session callback doesn't return what you put in it.. it always return the default obj

[@tapasadhikary]

The session callback gets the session object along with the user and token information. So we can set the information on the session object and return. It helps you to pass the data to the browser and make it available there on the client.

[@Rajesh-rg6fw]

Extremely informative. But I don't think this is the better way of doing this. What i do most of the time store the refresh token in the db, and only share the access token to client on secure cookies. So everytime i dont have to send it again and again, by default the cookies will on every request. If it expired then got 401 and based on that again a request to backend for token rotation. Don't u think this a better way of doing this?

[@郭海杰-f8y]

如何在API里面获取到session内容（用户信息 id等）

[@tapasadhikary]

Use the auth() function to get the session object const session = await auth()

[@sashirkl]

Sir kuch suggestion Dena chahta hoon. Aapka video acha hai but kuch kami laga mujhe . Yeh Mera personal view hai. Sir thoda slow chaliye. Har video mein ek agenda sheet dikhaiye ki what exactly u want to deliver. English ko thoda slow and pause leke boliye . Awaz thoda tremble kar raha hai . Video editing mein usko thoda adjust kariye . Har topic ek real project mein kahan fit hota hai thoda bataiye. Matalab Kahan hai aur kya achive karna hai .

[@tapasadhikary]

Thank you for watching my videos and your interest in learning from them. Some of your suggestions are great, I will bring them in my future videos wherever they are relevant. Keep learning.

[@xardasu3646]

Why is that when I refresh token the first time , I got the tokens updated. The moment I refresh again it returns older token. It seems that cookie not updated in the client. I think I already follow your code.

[@DaviReisVieira]

I have the same problem. Did you find how to solve?

[@xardasu3646]

@@DaviReisVieira not yet. clueless right now.

[@alexdin1565]

in your code, if you refresh the page before the token expires the refresfToken function calls again if you deploy this app and you have many users refreshing the token on every request this will hurt your server

[@tapasadhikary]

Yes, good point. I think it will be persist the refreshtoken in a store or something like that like an array of tokens for user and issue that? Do you suggest any other solution for that?

[@normydev]

@@tapasadhikary Didn't get that how the `refreshAccessToken` will get executed on every request. The code already has the expiry check and if the token is not expired then it should not call `refreshAccessToken`, isn't it?

[@jubayer-ahmed46]

🎉 20k

[@tapasadhikary]

@@jubayer-ahmed46 wow, yeah ❤️, thanks 🙏

[@manualchnn]

I think this process has some issues as if the flow is based on cookies, the cookie is not updated so once the token is expired its going through the refresh token process everytime. I think this is an issue as the cookies are not updated after each rotation. Any idea how to sort it out?. You can check this in your video at 46:10 when you hover you can see the log is executed update refresh token multiple times. Ideally the cookie should be updated, otherwise once its expired it is going to call refreshToken all the time.

[@tapasadhikary]

There seems to be an open issue already with auth.js about the rotation, hoping it gets resolved github.com/nextauthjs/next-auth/issues/7558

[@MahinKhan-s2h]

sir bangla video chai

[@tapasadhikary]

In Bangla channel :-)

[@Etymologicult]

Great tutorial on implementing Auth.js beta 5 with Next.js! I have a few questions about some aspects of the implementation: - Refresh Token Handling: In the refreshAccessToken function, an error is returned when the refresh fails, but it's not clear how this error is handled downstream. How would you recommend dealing with invalid refresh tokens in the jwt callback or elsewhere in the auth flow? I have a python backend handling the token and other routes and I am not sure how to correctly handle that - Potential Redirect Loop: In the user page, there's a check for a 403 status that redirects to the login page. However, if Auth.js still considers the token valid, couldn't this create a redirect loop? How would you suggest preventing this - maybe by clearing the session before redirecting ? Thank you!

[@tapasadhikary]

Thank you for your comments. Glad you liked it. Here is how I am thinking of the scenarios: - The best way to handle the error from auth,js(this is what I found so far) is by throwing the custom exceptions from the error prone places. Now in most cases the invocation point of the calls would be either from a Server component, Client Component, or Server Actions. We can catch and treat the errors these ways: a) Server Component: in error.js by checking for the exception type b) Client Component: Some kind of toast message by checking the exception type c) Server Action: Rethrow it from a try-catch and catch it again in either of the above a or b cases. Let me know if you want to add anything to this approach. Would love to discuss and learn. - Cleaning the session before redirecting seem to be a good solution. Thanks!

[@Etymologicult]

@@tapasadhikary Thank you for your response! I will try different options to see which one could be the best

[@Etymologicult]

So here is what I am doing currently (not sure I am 100% happy with it) Refresh Token Handling: In the jwt callback, I attempt to refresh the token when it expires. If refresh fails, I an error flag: {...token, error: "RefreshAccessTokenError"}. This error is then passed to the session in the session callback. Error Handling in Auth Flow: I am using authorized callback checks for the RefreshAccessTokenError (I am doing every logic here not in the middleware file itself) If detected, it redirects to the login page with an error parameter. This approach allows the login page to display an appropriate error message and to sign out the user. Preventing Redirect Loops: The authorized callback includes checks for different route types (API, public, auth). For auth routes, even with a RefreshAccessTokenError, it returns true, preventing loops. For other routes, it redirects to login with the error parameter. This works perfectly, there's one scenario that needs attention: If a user with an errored session navigates directly to `/login` (without query parameters), they can access the login page without seeing the appropriate error message. I didn't find an appropriate answer for that with the current logic

[@soumyajeetdas5339]

The backend code would have been more helpful

[@pratiksavaliya3890]

I don't think this is how it should be implemented...it seems like you are embedding third party server token in authjs token so there are two types of access tokens now in your system.

[@OnlyJavascript]

How is it done??

[@pratiksavaliya3890]

@@OnlyJavascript as far as i know there is no official way of doing credential login with authJs and third party server ....i have searched and tried but didn't found the way yet.

[@rahulk143]

I do like to know your approach. If you are having a dedicated authentication api server and use it in react/next like old fashion. How can we able to do with next auth.

[@pratiksavaliya3890]

@@rahulk143 i am also trying to find the same solution but seems like next auth only works for full stack nextjs projects.and not with dedicated auth server