Refresh Token with next-auth and Axios Interceptors in Next.js 13 Authentication

Hi, great tuto ! Just one question, How do you define the expiration date/duration of the access token and of the refresh token ?

very useful thank you

Great one! I wonder if this is safe to get accessToken to client components, is it possible for someone to hijack / steal it ? I was initially using import { getServerSession } from "next-auth/next" and calling backend only from server components / server actions to make sure that accessToken is only processes on the server.

superp next auth series videos!!!!! thankyou sir

Nice video, thanks. I have a question though, how can I get an access token if I use OAuth?

Really nice video, congrats

Thank you for this tutorial. What if the user has been deactivated or the refresh token has been tampered with, after several attempts, I want to log the user out or clear the current user session. Also, how can this work on server side for instance I want to use it with nextauth. Thank you.

thank you, this video very helpful. I have a question: what if I want to send request to the backend from the nextjs server side (server components). Your hooks only works on the client side now, do you have any idea?

hi i set my refresh token to 300s for test back to sign in automatically, but it never trigger that even if my refresh token 401, can you help me?

great tutorial! thank you!!

Wouldn't there be a conflict between next-auth's default expires value and your specified expires value in your backend? Also, how do we manage to provide access to the backend APIs if the user is logged in using Google or any other 3rd party provider? How can we create access and refresh tokens for those?

Did axios also works same as fetch in caching of api request and deduped

hello sir, how about handling the refresh token inside middleware? is it convenient?

Thank you so much. I find solution for my site. But I have a problem when I refresh a page(already login), I got an request 401 before I got request 200. I want to check request 401 or request not include authorization token before send request. I also use axios and react-query.

but is this refresh client side? how do you make it server side?
nice video bro

This is best video. Thank you.

Excellent video. Thank you so much. Very detailed.
One think though - I'm not able to find your video about backend implementation of Refresh Token api endpoint. Could you please share a link?

Can you do a video implementing the same token process using a differnet auth api backend. Like Fastapi / Rest

Bro, when I am trying to use the same useAxiosAuth for fetching the data onload of the page. It is not appending the bearer token to the request headers.

so amazing

Hello again .. as you know, I tried your solution and fixed some issues with it as we discussed before. It is working fine. BUT .. when I try to use the axiosAuth inside useEffect, it works fine when the page loads for the first time and I can see my profile data. But if I clicked on Refresh in the browser to reload the page, I get 401 from the API. After investigating, it turns out that the Next-Auth session is returning "undefined" for the hooks therefore the accessToken and the refreshToken are being passed as "undefined" to the API. why is that? I am stuck for days now

Hi, how can apply this with SWR? Thanks!

wow! amazing video man. NextJS has been complicated to work with especially working with hooks. Keep it up. anything MSAL and Next JS related coming up ?

hi! how could i make the session expire and return to the login page whenever my token coming from the server is no longer valid?

Thanks for this. But is there a way to update the session of server side? In the axios interceptor, in your code, we can fall-back to refresh token to get the accesToken but it's not updating the session with the new tokens?

Amazing! video.
Is there no way to logout user on the server side? I've read the documentation and made a lot of research still no where to find that solution, please any solution or work around? I will really appreciate.

Hi Vahid thanks for the video, how can we deal with the server side requests ?

I will buy your course if you make a udemy course on next 13.4. Covering: (Next-auth with access token, refresh token, email verification, reset password and a simple crud blog, and SEO) That would cover everything in one course. Please consider it.

I love your videos. Can you please make a video on "How to reset password?"

What if you have a multi requests? Will the refresh token run many times?

But instead of nodejs to generate refreshToken can you make video to generate refresh token using next api and use it in frontend to access data without accesstoken expiry??

but i thought nextauth handles all of this or did i just misunderstood

but what you are doing is create a custom hook and using it in page and for that it requires "use client" do you have solution without adding use client ? and axios does not support next revalidate how to work around that any idea ?

I have watched all your next-auth videos and they are great.
I have encountered one problem on reloading the app from the browser I am not getting the session immediately (on routing I am getting correct session value) which result in app crash.
Can you please help?

I never understand next-auth but with this series is amazing, now I am in another lever, thanks!

Thank you.
But i have question, why i hard reload page accessToken and refreshToken lost?

I do not think this is a good solution. Interesting concept though.
Besides making redundant API calls and intentionally resolving error 401, I faced three problems:
- We update tokens only for current session client side so this will not work on refresh when we get new session and it uses the tokens from cookie (which are unchanged)
- The solution does not support refreshing tokens for multiple sessions when user is using multiple tabs
- The solution does not work with SSR since we only update the tokens client side

I like the idea of using interceptors here though. I might experiment the solution where I am checking if access_token is expired when request is made, and if needed then refetch and update the token.

Its a great tutorial but i found a problem when i refresh my page. my hearders Authorization accessToken return an Undefined. i am following your useAxiosAuth custom hooks. is there any way to fix it?

Can we get the backend server code for the refresh token generation?

Can we use next-auth in nextjs with laravel as backend for API provider.

Hello, thanks for such a great tutorial. I am trying to use useAxiosAuth as baseQuery in rtk-query createApi. And obviously, I got an error: Invalid hook call. Hooks can only be called inside of the body of a function component. Could you advise how it is better to modify your hooks?

Can u explain to me how to use this axios instance if I use redux saga to make requests, when u configured axios instance in the react hook because u need to get session data from their getSession hook, and use it in the component.

your discord channel link has expired. can i have a new one ?

I have a issue with refresh token rotation:
1. When user call a api from ssr but access_token_1 is now expired and calls have triggered refreshAccessToken(). Now exchange the refresh_token_1 (disabled by backend) with a new access_token_2 and refresh_token_2
2. User call api from client that used old access_token_1 and refresh_token_1

Thanks

I think it would be also nice to make a guide about how to use something similar like in useAxiosAuth but in getServerSide props or maybe it's not possible? What I mean is to fetch data in SSR but also with included authorization like accessToken, refreshToken and needed data like userId maybe

Hi. I have question. Is it secure save tokens like this (in next auth) than in cookies for example?

Nice video, helps me a lot, nice content, I guess I watched more then 10 videos in only one day, and I know I am learning well about the new features in next 13. But got a problem with using axios and not fetch, because when I use axios interceptors to refresh, i need use axios in all my application, and actually next features like cache, ou next revalidate are only available using fetch, so i guess its necessary use fetch interceptors, you know use something like that?