Tokens rotation does not persist the new token

[mrbodich]

Environment

When rotating tokens, new token is not stored and thus not reused, so token is lost. The old token still persists instead and used for all further iterations of current session.
Only initial token generated on login works and reused constantly.

I use Keycloak as the external IDP
Keycloak — 21.1.1
Nextjs — 13.4.2
Next-auth — 4.22.1
Node — 16.2.0, 19.9.0

Reproduction URL

https://github.com/mrbodich/next-auth-example-fork.git

Describe the issue

When I use async jwt() function in callbacks section, I get the new token from external IDP successfully, create the new token object and return in async jwt() just like documentation says.

Here is my piece of code in the last else block (if access token is expired)

} else {
  // If the access token has expired, try to refresh it
  console.log(`Old token expired: ${token.expires_at}`)
  const newToken = await refreshAccessToken(token)
  console.log(`New token acquired: ${newToken.expires_at}`)
  return newToken
}

Once token expired, and else block is executed, I have constantly updating at each request. Here is what I get in the console logged:

Old token expired: 1684147058
Token was refreshed. New token expires in 60 sec at 1684147125, refresh token expires in 2592000 sec
New token acquired: 1684147125

Old token expired: 1684147058
Token was refreshed. New token expires in 60 sec at 1684147128, refresh token expires in 2592000 sec
New token acquired: 1684147128

Old token expired: 1684147058
Token was refreshed. New token expires in 60 sec at 1684147132, refresh token expires in 2592000 sec
New token acquired: 1684147132

As you see, 1684147058 is not changed between requests, so new JWT is just lost somewhere and not used for later requests. Though at the first login, returned jwt is used correctly.

How to reproduce

1. Clone this repo https://github.com/mrbodich/next-auth-example-fork.git
2. Transfer .env.local.example file to .env.local file
3. When signing in, use credentials from .env.local.example file, row 13
4. After sign-in, token will start refreshing after 1 minute (token lifespan set in Keycloak)
5. Look in the console for next-auth logs

⚠️ Try to comment lines 18 ... 25 in the index.tsx file (getServerSideProps function), and tokens will start rotating fine.

Expected behavior

Token returned in the async jwt() function in callbacks section must be used on the next request and not being lost.

[osmandvc]

similiar problem is stated in #6642 . Sadly it seems like noone cares about this issue atm, altough its a system breaking problem.

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the incomplete label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template), but you can also use a tool like CodeSandbox or StackBlitz.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

Please test your reproduction against the latest version of NextAuth.js (next-auth@latest) to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the incomplete label that receives no meaningful activity (e.g. new comments with a reproduction link) are closed after 7 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction. (It's less likely that we check back on already closed issues.)

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without repro steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every NextAuth.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to create a Minimal, Complete, and Verifiable example
• Reporting a NextAuth.js bug
• How to Contribute to Open Source (Next.js)

[mrbodich]

Hello @balazsorban44. I've deployed Keycloak, made necessary setup and pushed my example based on the latest example repo fork to github.
https://github.com/mrbodich/next-auth-example-fork.git

Alternatively, I've updated the main question, section Reproduction URL and How to reproduce

You can find the credentials to login in the .env.local.example file, along with other necessary env variables, so just transfer this file to the .env.local file.
I've set token lifespan to 1 minute, so it's the time you should wait before token will want to refresh

Updated issue description

I've found more details.
Token rotation worked fine when using client-side session request.
Once I've configured server-side session passing to props, refreshed tokens stopped persisting.

Look at this file in my repo. Tokens are rotating fine if you will comment lines 18 ... 25
index.tsx

//Token is not persisting when using server side session
export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context)
  return {
      props: {
          session
      }
  }
}

[marysmech]

similiar problem is stated in #6642 . Sadly it seems like noone cares about this issue atm, altough its a system breaking problem.

Yet not quite similar, since this issue refers to the older next-auth package, not the new @auth. Furthermore, that discussion relates to the database strategy, not JWT.

@Mikk36 I disagree. As the author of referred discussion the problem is described with JWT tokens and not database strategy and problem seems to remain also we newer versions (its true that i haven't tested with latest version).

[Mikk36]

similiar problem is stated in #6642 . Sadly it seems like noone cares about this issue atm, altough its a system breaking problem.

Yet not quite similar, since this issue refers to the older next-auth package, not the new @auth. Furthermore, that discussion relates to the database strategy, not JWT.

@Mikk36 I disagree. As the author of referred discussion the problem is described with JWT tokens and not database strategy and problem seems to remain also we newer versions (its true that i haven't tested with latest version).

My bad, I mixed up discussion numbers and thought it was something else.

[anampartho]

@mrbodich Instead of using getSession inside getServerSideProps, please use getServerSession as stated here. This persists the refresh token.

// index.tsx
import { authOptions } from '@/pages/api/auth/[...nextauth]'

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getServerSession(context.req, context.res, authOptions)
  return {
      props: {
          session
      }
  }
}

[mrbodich]

@mrbodich Instead of using getSession inside getServerSideProps, please use getServerSession as stated here. This persists the refresh token.

// index.tsx
import { authOptions } from '@/pages/api/auth/[...nextauth]'

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getServerSession(context.req, context.res, authOptions)
  return {
      props: {
          session
      }
  }
}

I have tried this and getting such error on backend
Error: Error serializing .session.user.image returned from getServerSideProps in "/".
Can you try my attached example project and make your changes in the index.tsx file please? It's already configured for the remote IDP so just rename .env.local.example file to .env.local, username and password just mentioned in this env file too.

[anampartho]

@mrbodich That is not related to getServerSession. You need to properly set the user object inside jwt callback to make sure that no key inside the user object is undefined. It either has to have a value or has to be null.

Please check PR - mrbodich/next-auth-example-fork#1 for detailed code.

[mrbodich]

@mrbodich That is not related to getServerSession. You need to properly set the user object inside jwt callback to make sure that no key inside the user object is undefined. It either has to have a value or has to be null.

Please check PR - mrbodich/next-auth-example-fork#1 for detailed code.

Thank you @anampartho, I got the idea now. Just was confused why it worked without server session handling.

Can I ask you to give me a very important tip that I can't understand please? How can I use getServerSession not only in the root '/' route (or on each route separately), but on the very top level so all routes will inherit that? And how is it possible to add extra properties on the lower levels or sub-routes?

Adding getServerSession to _app.tsx does not work.

[mrbodich]

@mrbodich That is not related to getServerSession. You need to properly set the user object inside jwt callback to make sure that no key inside the user object is undefined. It either has to have a value or has to be null.

Please check PR - mrbodich/next-auth-example-fork#1 for detailed code.

By the way, I came up with this solution. Updated provider's profile method a bit with image: profile.picture ?? null, just added the optional chaining for the image property:

const keycloak = KeycloakProvider({
    clientId: process.env.KEYCLOAK_ID,
    clientSecret: process.env.KEYCLOAK_SECRET,
    issuer: process.env.KEYCLOAK_ISSUER,
    authorization: { params: { scope: "openid email profile offline_access" } },
    tokenUrl: 'protocol/openid-connect/token',
    profile(profile, tokens) {
        return {
            id: profile.sub,
            name: profile.name ?? profile.preferred_username,
            email: profile.email,
            image: profile.picture ?? null,
        }
    },
});

PS: Thank you so much for your help.

[anampartho]

@mrbodich That is not related to getServerSession. You need to properly set the user object inside jwt callback to make sure that no key inside the user object is undefined. It either has to have a value or has to be null.
Please check PR - mrbodich/next-auth-example-fork#1 for detailed code.

Thank you @anampartho, I got the idea now. Just was confused why it worked without server session handling.

Can I ask you to give me a very important tip that I can't understand please? How can I use getServerSession not only in the root '/' route (or on each route separately), but on the very top level so all routes will inherit that? And how is it possible to add extra properties on the lower levels or sub-routes?

Adding getServerSession to _app.tsx does not work.

@mrbodich Unfortunately, you have to use getServerSession on each routes getServerSideProps. There is no way to use it on / and make the session available on all routes.

[osmandvc]

I am using getServerSession in the app directory, but the problem stil occurs. But I guess the problem is because of the following issue stated by this user: #6642 (comment)