Next Auth middleware does not update session

[MoWael11]

Environment

System:
OS: Windows 11 10.0.22621
CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
Memory: 1.23 GB / 7.33 GB

Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD

Browsers:
Edge: Chromium (119.0.2151.72)
Internet Explorer: 11.0.22621.1

npmPackages:
next: ^14.0.3 => 14.0.3
next-auth: ^4.24.5 => 4.24.5
react: ^18 => 18.2.0

Reproduction URL

https://github.com/MoWael11/next-auth-middleware

Describe the issue

I have configured the JWT refresh token rotation in Next Auth API route to update the user token on server side when the access token expires.

It successfully obtains the new tokens and returns them in the JWT and session callbacks (options.ts file). But, it does not update the session in the middleware, keeping the old one with the expired token. Consequently, when I refresh the page, the middleware passes the expired tokens to the JWT callback, which are no longer valid.

How to reproduce

Code </>

page.tsx

import { getServerSession } from "next-auth";
import { authOptions } from "./api/auth/[...nextauth]/options";
export default async function Home() {
  await getServerSession(authOptions);
  return <main></main>;
}

middleware.ts

import { withAuth } from "next-auth/middleware";

export default withAuth({
  callbacks: {
    authorized: ({ token }) => {
      console.log(
        "\n\n\n======================= NEW REQUEST FROM CLIENT ======================="
      );
      console.log(
        "Token from middleware: ",
        token
      ); // the old one will be passed
      return !!token;
    },
  },
});

export const config = {
  matcher: ["/"],
};

options.ts

callbacks: {
  async jwt({ token, user, session }) {
    if (user) return { ...token, ...user } as JWT;

    if (token.backendTokens.expiresIn > new Date().getTime()) {
      console.log("\n\nAccess token still valid");
      return token;
    }

    console.log(
      "\n\nI will get another access token with this refresh token: ",
      token.backendTokens.refreshToken
    );

    const res = await fetch("http://localhost:3000/api/tokens", {
      method: "POST",
      cache: "no-store",
      body: JSON.stringify({
        accessToken: token.backendTokens.accessToken,
        refreshToken: token.backendTokens.refreshToken,
      }),
    });

    const backendTokens: BackendTokenProps = await res.json();  // expects an object with the new tokens if the refresh token does not expired, or null if expired

    return {
      ...token,
      backendTokens: {
        refreshToken: backendTokens.refreshToken,
        accessToken: backendTokens.accessToken,
        expiresIn: backendTokens.expiresIn,
      },
    };
  },

  async session({ session, token }) {
    session = { ...session, ...token };
    console.log(
      "\nToken from session callback:",
      { session }
    );
    return session;
  },
},

Run time

I will log the last 5 letters of tokens to avoid excessive length and just necessary data
Those logs when access token expires

======================= NEW REQUEST FROM CLIENT =======================
Token from middleware:  {
  backendTokens: {
    accessToken: 'F6aDE',
    refreshToken: 'PbHP8',
    expiresIn:  1700342790675
  },
}

then token is passed to callbacks

I will get another access token with this refresh token: PbHP8

Data I obtained { // new tokens from route.ts (api/tokens)
  accessToken: 'WzReE',
  refreshToken: 'XfZqU',
  expiresIn: 1700342822594
}

Token from session callback: {
  session: {
    backendTokens: {
      accessToken: 'WzReE', // **tokens changed**
      refreshToken: 'XfZqU',
      expiresIn: 1700342822594
    },
}

Then when refreshing the page, we will see that the middleware does not update token:

======================= NEW REQUEST FROM CLIENT =======================
Token from middleware:  { // still has old tokens
  backendTokens: {
  accessToken: 'F6aDE',
  refreshToken: 'PbHP8',
  expiresIn: 1700342790675
  },
}

I will get another access token with this refresh token: PbHP8 // that actually expired it should be 'XfZqU' token

=== REFRESH TOKEN EXPIRED === // logged from tokens route.ts

Data i obtained:  {}

Token from session callback: {
  session: {
    backendTokens: {
      accessToken: undefined,
      refreshToken: undefined,
      expiresIn: undefined
    },
}

Because the middleware did not update the session, it preserves the old session and passes it to the callbacks. This results issues when attempting to obtain a new access token, leading to undefined values and causing errors in the app when trying to use those values.

Expected behavior

The middleware should update the session with the values returned from next auth callbacks. So when attempting to acquire a new token, it uses the recent refresh token obtained, rather than using the old one.

[bart-sofomo]

Is there any kind of workaround to this? Maybe something like call session when the token is expired?

[todesignandconquer]

Can confirm that I am seeing the same issue.

[OMikkel]

I am using NextJS 14.1 and "next-auth": "^5.0.0-beta.3".

I experience the same issue, my session tokens are not being updated.

[MoWael11]

I managed to resolve the issue by adding the SessionProvider into the root layout. I created a file named providers.tsx that contains the SessionProviderClient component, then enveloped the entire application within it:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en'>
      <Providers>
        <body className={inter.className}>{children}</body>
      </Providers>
    </html> 
  )
}

I think that without the session provider, the session wasn't able to update itself effectively. However, by including the SessionProvider, the middleware now updates seamlessly. I've updated also the Reproduction Url