JWT token not being updated, but is passing correct data to the session

[benkeeling98]

I am using Auth.js V5 with the credentials provider. I am sending an authtication request to my Django REST Framework backend, where it authenticates the user, and returns the user information, along with a refresh and access token. The refresh token expiry is 1 day, and the access token is set to expire in 1 minute.

import NextAuth, { Session } from "next-auth";
import Credentials from "next-auth/providers/credentials";
import { login } from "@/actions/login";
import { LoginSchema } from "@/schemas";
import { createUserObject } from "@/functions/utils/createUserObjects";
import { getNewAccessToken } from "@/actions/getNewAccessToken";
import checkIfTokenExpired from "./functions/utils/checkIfTokenExpired";
import { JWT } from "next-auth/jwt";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      async authorize(credentials) {
        const validatedFields = LoginSchema.safeParse(credentials);

        if (!validatedFields.success) {
          return null; 
        }

        const user = await login(validatedFields.data);
        if (user) {
          return createUserObject(user);
        }
        throw new Error("Invalid Credentials");
      },
    }),
  ],

  
  callbacks: {
    async jwt({ token, account, user }) {
      console.log("JWT Callback", token, account, user);

      if (user && account) {
        token = {
          ...user,
          iat: Math.floor(Date.now() / 1000),
          exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24), // 24 hours
        };

        return token;
      }

     
      if (!token.accessToken || checkIfTokenExpired(token.accessToken as string)) {
        const newAccessToken = await getNewAccessToken(token.refreshToken as string);
        console.log("New Access Token", newAccessToken);

        if (!newAccessToken) {
          console.error("Failed to fetch new access token");

        } else {
          return {
            ...token,
            accessToken: newAccessToken,
          }
        }
      }

      return token;
    },

    async session({ session, token }: { session: Session; token: JWT }) {

      console.log("Session Callback", session, token);

      if (token) {
        session.user.id = token.id;
        session.user.email = token.email ?? "";
        session.user.role = token.role;
        session.user.isTwoFactorEnabled = token.isTwoFactorEnabled;
        session.user.isOAuth = token.isOAuth;
        session.accessToken = token.accessToken || "";
      }
      return session;
    },
  },
});

I am trying to decode the accessToken in the JWT section, and check to see if the token has expired or not. If it has, I am sending a request to the backend to refresh the accessToken using the refreshToken.

I am expierencing two errors. One issue is that the auth.ts file seems to be initilising twice, once where the token.accessToken is undefined, which causes a format issue on the backend, which I handle by not updating the accessToken and console.logging the error. Below is the log from my BE server showing this

[04/Sep/2024 22:33:57] "POST /api/users/token/refresh/ HTTP/1.1" 200 290
Bad Request: /api/users/token/refresh/
[04/Sep/2024 22:34:27] "POST /api/users/token/refresh/ HTTP/1.1" 400 39
[04/Sep/2024 22:34:27] code 400, message Bad request syntax ('125')
[04/Sep/2024 22:34:27] "125" 400 -
[04/Sep/2024 22:34:27] "POST /api/users/token/refresh/ HTTP/1.1" 200 290
Bad Request: /api/users/token/refresh/
[04/Sep/2024 22:34:28] "POST /api/users/token/refresh/ HTTP/1.1" 400 39
[04/Sep/2024 22:34:28] code 400, message Bad request syntax ('125')
[04/Sep/2024 22:34:28] "125" 400 -
[04/Sep/2024 22:34:28] "POST /api/users/token/refresh/ HTTP/1.1" 200 290

The other issue is that when the refresh token is correctly used to retrieve the new accessToken, and I handle the updated in the return statement here:

  return {
    ...token,
    accessToken: newAccessToken,
  }

the new access token is successfully passed to the session, and I can see the accessToken had updated (see below), however, when I refresh the page it seems like this new accessToken is never saved to the authjs.session-token saved in the cookies.

Below is the console.log showing that the new accessToken is being passed to the session.

New Access Token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzI1NDg2MzQyLCJpYXQiOjE3MjU0ODUxNDUsImp0aSI6ImIzMTZhZTAxZjYyODRmZGQ5ZjI4ODk1ODc2OWVkMGJiIiwidXNlcl9pZCI6ImZmYmZhMzI3LWM1NWQtNGZhMC05OTk5LTc2NzU5Yjg0YWU3NCJ9.Ma4odwQP5Mia5X0P4Gn82JKHYNqSU-8AzfjVfVsW4ZQ
Session Callback {
  user: { name: undefined, email: 'admin@example.com', image: undefined },
  expires: '2024-10-04T21:44:42.177Z'
} {
  id: 'ffbfa327-c55d-4fa0-9999-76759b84ae74',
  email: 'admin@example.com',
  role: 'admin',
  isTwoFactorEnabled: false,
  isOAuth: false,
  accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzI1NDg2MzQyLCJpYXQiOjE3MjU0ODUxNDUsImp0aSI6ImIzMTZhZTAxZjYyODRmZGQ5ZjI4ODk1ODc2OWVkMGJiIiwidXNlcl9pZCI6ImZmYmZhMzI3LWM1NWQtNGZhMC05OTk5LTc2NzU5Yjg0YWU3NCJ9.Ma4odwQP5Mia5X0P4Gn82JKHYNqSU-8AzfjVfVsW4ZQ',
  refreshToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTcyNTU3MTU0NSwiaWF0IjoxNzI1NDg1MTQ1LCJqdGkiOiI4YzMxN2MyZjkwZWQ0NDAxYjk5ZjNkMTUyOGZiMjI5OSIsInVzZXJfaWQiOiJmZmJmYTMyNy1jNTVkLTRmYTAtOTk5OS03Njc1OWI4NGFlNzQifQ.vSWpXiR47xXpPRMHPDt8F4bYtPUPS__OP3eLPOg96Kw',
  iat: 1725485668,
  exp: 1728077668,
  jti: '1b5d97c9-81ff-4969-b6c3-123ce0bcb201'
}

But, when I refresh the page I would expect to see the new JWT token printed out, but you can see it is still showing the original accessToken that is passed back on SignIn

JWT Callback {
  id: 'ffbfa327-c55d-4fa0-9999-76759b84ae74',
  email: 'admin@example.com',
  role: 'admin',
  isTwoFactorEnabled: false,
  isOAuth: false,
  accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzI1NDg1MjA1LCJpYXQiOjE3MjU0ODUxNDUsImp0aSI6IjRjMTg0ZWNmOWVkZjRmMWQ5ZWUyYzhmMDg5OGViMmNjIiwidXNlcl9pZCI6ImZmYmZhMzI3LWM1NWQtNGZhMC05OTk5LTc2NzU5Yjg0YWU3NCJ9.Da3Fm92_wdOV3w4pukRbi1tGgpR_PhKZmkerBgSk11k',
  refreshToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTcyNTU3MTU0NSwiaWF0IjoxNzI1NDg1MTQ1LCJqdGkiOiI4YzMxN2MyZjkwZWQ0NDAxYjk5ZjNkMTUyOGZiMjI5OSIsInVzZXJfaWQiOiJmZmJmYTMyNy1jNTVkLTRmYTAtOTk5OS03Njc1OWI4NGFlNzQifQ.vSWpXiR47xXpPRMHPDt8F4bYtPUPS__OP3eLPOg96Kw',
  iat: 1725485668,
  exp: 1728077668,
  jti: '1b5d97c9-81ff-4969-b6c3-123ce0bcb201'
} undefined undefined

This means everytime I refresh the page a new accessToken is retrieved, and then put into the session, as it is always checking the expiry of the old accessToken that never gets updated.

Why is the new accessToken not saving to the authjs.session-token in my cookies, and why am I always getting two requests to my BE to refresh the token where, for the first one, the refreshToken is undefined first?

I have added any relevant files below:

// checkIfTokenExpired
import { jwtDecode } from "jwt-decode";

export default function checkIfTokenExpired(token: string): boolean {
  const decodedToken = jwtDecode<{ exp: number }>(token as string);
  const tokenExpiration = decodedToken.exp || 0;
  return tokenExpiration < Date.now() / 1000;
}

// getNewAccessToken
import api from "@/api";

export const getNewAccessToken = async (refreshToken: string) => {
    if (!refreshToken) {
        console.error("No refreshToken provided.");
        return;
    }

    try {
        const refreshTokenString = String(refreshToken);
        const response = await api.post("/users/token/refresh/", { refresh: refreshTokenString });
        return response.data.access;

    } catch (error) {
        
        if ((error as any).response) {
            console.error("Error during token refresh:", (error as any).response.data);
        } else {
            console.error("Error during token refresh:", (error as any).message);
        }
    }
};

[benkeeling98]

I believe this to be because server components cannot modify the token. I have opened another thread for that issue