JWT callback gets called twice when using getInitialProps/getServerSideProps

[remcotak]

Describe the bug
When using the getSession function inside getInitialProps/getServerSideProps AND using the useSession hook in a component on the same page, the JWT callback gets called twice, even when using the provider in _app.js. When using Refresh Token Rotation flow this is a big problem since the first time the JWT callback gets called it might go into the refresh token flow and return the updated access token, but in the 2nd JWT callback the access token isn't updated with the newly received access token.

Steps to reproduce
Expand the next-auth tutorial code with the Refresh Token Rotation code provided here https://next-auth.js.org/tutorials/refresh-token-rotation. Use the getSession inside getServerSideProps and on the same page let a component use the useSession hook.

Expected behavior
I expect the useSession hook to use the data from the getSession call

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[typedashutosh]

It happens with me all time.
But I believe it's a NextJS feature, since code is run first at compile time, and again when client requests the page.
So far, it had not cause a worry for me.

[remcotak]

I don't think it is, the first request is made through server side rendering. I await the refresh token call to return the newly received token and then the component call should be called retrieving the updated token since I'm waiting for the response to finish. I don't how else you are supposed to implement a refresh token flow.

One thing to point out is that I need to make a server side call in order for Apollojs to send the access token with the headers. I tried doing that client side only but for some reason it wont' retrieve the session when using the useSession hook.

[balazsorban44]

@remcotak Do you use Provider? https://next-auth.js.org/getting-started/client#provider

#1132

[remcotak]

Yes I use the provider

[willfeerr]

in my case, even with provider I get 2 calls everywhere, then when I use SSR function I get 3, one initial, then 400ms I get 2 at same time

[ken-nah]

Hey @willfeerr I am experiencing a similar issue. How were you able to solve the problem?

[vstrider]

I have a similar issue, but not quite the same, and it only happens at build time. Note that this only happens in dev mode, and may not be an issue in production. Let me try to describe what happens in my case:

1. Log the user in with a provider that gives back jwt and a refresh token that can be used only once
2. While the application is working, token refreshing works as intended
3. Stop the application while the user session is still alive, but leave it open in a browser
4. Wait until the token is expired and start the application back up
5. This will cause the application to execute the refresh request with a stale token that has already been consumed. getSession() is only invoked in _app.getInitialProps, and useSession() is not invoked at all.

I didn't want to open a separate Issue for this because I'm not sure is this a bug or just a side-effect of fast refresh or something else that just occurs during build in dev mode.

[typedashutosh]

Do you receive this

{
  code: 'ERR_JWT_EXPIRED',
  claim: 'exp',
  reason: 'check_failed'
}

[vstrider]

I am using Identity Server 4 to get the tokens, and logs explicitly say that the refresh token is rejected because it has been used already. I am pretty sure this is some issue that is caused by fast refresh.

[HasinaNjaratin]

@vstrider I have exactly the same problem as you. Did you find a solution?

[avetisyan66]

Did you solve this?

[remcotak]

I think point 5 of what @vstrider mentioned could probably be cause of this going wrong. In order to avoid this problem I only used client side authentication and not while ssr.

[willfeerr]

Sharing my solution with you, im Brazilian so my English Isn't that much, but here we go, I've got a Semaphore and a timeout(please, don't judge me), timeout stores a "session" for 3000ms(can be less, but in my case is enough), then while I have a "session" stored I only return it, then semaphore execute only first and stores it, is working on section and in refresh, just one execution and every sub call return the stored(3000ms)

let locSession = null;
const setLocSession = (data, timeout = 3000) => {
  locSession = data;
  setTimeout(() => {
    locSession = null
  }, timeout);
}

then on start of session

semaphore.acquire();
if (locSession) {
  semaphore.release();
  return locSession;
}

// a lot of asyncs and await //

setLocSession(session);
semaphore.release();
return session;

after first semaphore release, all others take 1ms and it working for 1 call, 2 calls at same time, 1 call then 2 calls, and this make refresh token from openiddict works nice

[ChiuMungZitAlexander]

It may be caused by reactStrictMode from next.config.js.

[caiolrm]

I just tested setting reactStrictMode to false, and the request was made only once. Do you have any idea why that happens?

[VGontier-cmd]

@caiolrm. It's because in development, by default, the reactStrictMode is enabled in Next.js; that's why your components will re-render an extra time to find bugs caused by impure rendering. In our case, that's why it's calling our JWT callback two times.

[LeoUpperThrower4]

That was happening for me because I had both useSession and getSession being used in the same component, like so:

export default function Auth() {
  const { data: session } = useSession({
    required: true
  })
// rest of the code...
}
export const getServerSideProps = async (context) => {
  const session = await getSession(context);

  if (session) {
    return {
      redirect: {
        destination: "/dashboard",
        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
}

And since useSession (line 3) and getSession (line ) both trigger the JWT callback, I beleive the second time it was being called was wrong because it was not yet updated, or something like that.

I was able to fix it by using only one of them, it didn't matter which one