help: how to update the refreshToken on page refresh with current refreshToken

[skwowet]

Question 💬

Summary

Referencing issue: #6449

As I have mentioned the use case in above issue, fast forwarding today:

I have implemented next-auth to get the accessToken from the provider and pass the same as argument to my mutation, then use the token generated from our backend on consecutive API calls.

The token rotation has been implemented based on the next-auth doc refresh token rotation

Problem

After 1 min (my token expiry time) if the session is untouched/running in background then probably it calls the api and updates with the new refreshToken and accessToken (works as intended) but when we refresh/reload the page after one minute it signs out of the session.

When I check the terminal, it looks like when I reload the page, the old refreshToken is not getting updated with new refreshToken. It still has the same refreshToken (the one session had before reload) in client but no the issue when we leave the app untouched 😕

Is there any work around for this? Or what am I doing wrong here?

Thanks in advance!

How to reproduce ☕️

here's the pages/api/[..nextauth].tsx

import NextAuth, { NextAuthOptions } from "next-auth"
import { JWT } from "next-auth/jwt"
import GithubProvider from "next-auth/providers/github"
import { Provider, RefreshToken } from "../../../generated/graphql"

const loginQuery = `mutation login($AccessToken: String!, $Provider: Provider!) {
  login(accessToken: $AccessToken, provider: $Provider) {
    refreshToken
    token
    tokenExpiry
  }
}`

const refreshTokenQuery = `mutation refreshToken($RefreshToken: String!) {
  refreshToken(refreshToken: $RefreshToken) {
    refreshToken
    token
    tokenExpiry
  }
}`
const authMutation = (query, variables) : Promise<RefreshToken | null> => {
  return fetch(process.env.NEXT_PUBLIC_API_URL, {
    method: 'POST',
    body: JSON.stringify({
      query: query,
      variables: variables
    })
  })
    .then(res => res.json())
    .then(data => {
      if (data.errors) {
        return null;
      } else {
        let response = data.data.refreshToken || data.data.login;
        if (response.refreshToken === undefined || 
        response.tokenExpiry === undefined || 
        response.token === undefined) return null
        return <RefreshToken> response;
      }
    })
    .catch(error => {
      console.log(error);
      return null;
    });
};

async function login(account, user: any) {
  let provider: Provider;
  if (account?.provider === 'github') provider = Provider.GitHub  
  if(provider === undefined) return
  const variables = {
    AccessToken: account.access_token,
    Provider: provider
  };
  const response = await authMutation(loginQuery, variables)
  if (response === null) return 
  console.log("new refresh token..", response.refreshToken)
  return {
    accessToken: response.token,
    accessTokenExpires: response.tokenExpiry * 1000,
    refreshToken: response.refreshToken,
    user,
  }
}

async function refreshAccessToken(token: any) {
  const variables = {
    RefreshToken: token.refreshToken,
  };
  console.log("variables", variables)
  const response = await authMutation(refreshTokenQuery, variables)
  if (response === null) return 
  console.log("new refresh token..", response.refreshToken)
  return {
    ...token,
    accessToken: response.token,
    accessTokenExpires: response.tokenExpiry * 1000,
    refreshToken: response.refreshToken,
  }
}

export const authOptions: NextAuthOptions = {
  providers: [
    GithubProvider({
      clientId: process.env.NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_ID,
      clientSecret: process.env.NEXT_PUBLIC_GITHUB_OAUTH_CLIENT_SECRET,
    }),
  ],
  theme: {
    colorScheme: "light",
  },
  callbacks: {
    jwt: async ({ account, token, user }: any): Promise<JWT> => {
      console.log("current refreshToken", token.refreshToken, token.accessTokenExpires)
       // Initial Sign In
      if (account && user) {
        console.log("initial login", account)
        return login(account, user) 
      }
      
       // Return previous token if the access token has not expired yet
      if (Date.now() < token.accessTokenExpires){
        console.log("token not expired")
        return token
      }

      // Rotate refresh_token and fetch new access_token if current one is expired
      if (token){
        console.log("token expired")
        return refreshAccessToken(token) 
      }
    },
    session: async ({ session, token }: any) => {
      if (!session?.user || !token?.accessToken) return
      session.accessToken = token.accessToken as string
      session.error = token.error as string | undefined
      session.user = token.user
      return session
    },
  },
}

export default NextAuth(authOptions)

and this how _app.tsx looks like,

import "../styles/globals.css"
import { SessionProvider as NextSessionProvider } from "next-auth/react"
import UrqlProvider from "../lib/provider"
import { AppProps } from "next/app"

function App({ Component, pageProps }: AppProps) {

  const { session } = pageProps

  return (
    <>
      <NextSessionProvider session={session}>
        <UrqlProvider>
            <Component {...pageProps} />
        </UrqlProvider>
      </NextSessionProvider>
    </>
  )
}

export default App

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[Max0u]

I have exactly the same problem as you, which version of Next are you running ?

The refresh token is not refreshed using unstable_getServerSession(authOptions) in Next 13. Just tried on Next 12 with useSession() and now refreshToken is refreshed

[skwowet]

@Max0u how exactly did you fix the issue (things I should add or change in my setup)? I tried downgrading the Next 12, but still nothing happens.

[Max0u]

For my case I downgraded to Next 12 and used useSession() instead of unstable_getServerSession() and it works fine. But I also would like to use Next 13.

[skwowet]

Where exactly do you use this?

[balazsorban44]

Please note that Next.js 13 is not in beta, the app directory is!

You can use pages just as before in Next.js 13, so I don't recommend downgrading, there is no reason.

unstable_getServerSession is currently unable to update cookies as described here: https://next-auth.js.org/configuration/nextjs#in-app-directory

[skwowet]

I don't use app directory in my project though, pretty much that's the code I use.

[skwowet]

Based on my findings,

If we reload the page, the access token is still valid, so refreshAccessToken is not called, and the refreshToken remains the same.

But when we leave the session, the access token expires and refreshAccessToken is called, which will update the refreshToken.

@balazsorban44 could you please point out if there is anything wrong in the code? Or should I have to add anything on top?

And also the token expiry time in our back end is set to 5mins, should we have to reduce that even more?

If this was an issue with the Next 13 then other usages of the next-auth works as intended (check other usages using source graph)

[ayalon]

I have exactly the same issue. In the jwt callback I'm refreshing the accessToken (which also generates a new refreshToken) and I'm giving back the data. If I then display the token on a seperate route using
const token = await getToken({ event })
I can see, that the refreshToken and the accessToken have not been updated. What could be the reason for this?

[skwowet]

Not sure though, maybe can someone from the next-auth confirm this issue?

[skwowet]

next-auth doc says,

getServerSession will correctly update the cookie expiry time and update the session content if callbacks.jwt or callbacks.session changed something.

@balazsorban44 @Max0u will this be fixed, if I use getServerSession?

[VelHRH]

I came across this same problem with 15s. token. Both 15 seconds and a minute are considered a very short expiration time for a token. Real projects usually use 15-minute tokens.

[SkaterPunisher]

Hi! Have you solved the problem with the token update? I have the same problem, I use next.js v.14

[Borisstoy]

Having the exact same issue here.

[SkaterPunisher]

https://www.youtube.com/watch?v=PY4gsmndQkE