Next 14, Axios Interceptors for Refresh Token using next-auth - New Problem

Question

I'm currently facing an issue while trying to implement an Axios interceptor for handling refresh tokens in a Next.js 14 application using Next-Auth. The problem seems to have surfaced after the latest update of Next.js.

Issue Description:

The issue arises when I attempt to create an interceptor and utilize useSession from Next-Auth to retrieve access and refresh tokens for the interceptor. As useSession is a hook, I understand it can only be used in client-side components, but I'm at a loss for how to implement this functionality effectively.

I was following a tutorial (link of the video), where the implementation is exactly as I described, yet I'm encountering problems.

Screenshots for Reference:

My codeThe error

Specific Questions:

How can I effectively implement an Axios interceptor with Next-Auth in a Next.js 14 application, especially considering the constraints of using hooks like useSession? Are there any known issues or compatibility problems with Next.js 14 that might be causing this issue? Any guidance, code snippets, or references to similar implementations would be greatly appreciated. Thank you in advance for your help!

Following the Video Tutorial: I've closely followed the instructions in the referenced video, expecting it to work with Next.js 14 and Next-Auth. This involved setting up the Axios interceptor and using useSession to retrieve the tokens.

Creating the Interceptor: I set up an Axios interceptor within my application, intending to use it for refreshing tokens.

Using useSession: I tried to use the useSession hook to access the current session and retrieve the tokens needed for the interceptor.

Expected Outcome:

I expected that by following these steps, the Axios interceptor would seamlessly integrate with Next-Auth to handle token refresh scenarios. Specifically, I anticipated that the interceptor would:

Detect when an access token is expired. Use the refresh token to obtain a new access token. Retry the original request with the new access token. Actual Outcome:

However, I'm encountering issues likely due to the nature of hooks and their usage outside of React components, or possibly due to some recent changes in Next.js 14. The specific problems I'm facing are:

Difficulty in correctly implementing the useSession hook within the Axios interceptor setup. Uncertainties about the proper way to access and refresh tokens in this context.

Answer 1

I would pass the session data as a prop to the useAxiosAuth.

Answer 2

I had same error.

The problem was that the useAxiosAuth() method was called in neither React Components nor Custom Hook (which cause Invalid Hook Error).

In addition, if you see the tutorial video(14:37~), the tutor calls useAxiosAuth() method in HomePage component.

Thus, the error does not relate to lates version up of next js and there is no problems in your useAxiosAuth.ts.