How do I update the JWT token in the clients browser

[benkeeling98]

I am using Auth.js V5 with the credentials provider. I am authenticating the user with my custom backend, before returning the User data and a Refresh Token and Access Token. I then save the User information (Name, email, ect) along with the token in the JWT callback, before passing it to the Session.

I can not, however, update the JWT token when I try and refresh the access token after it expires after one minute. When I refresh the token, it successfuly retrieves a new access token and passes it to the session, but the new token is never updated in the JWT cookie.

I believe this is due to this action happening in a server component, and thus not having access to modify or update the JWT in the clients browser.

How would I go around updating the JWT, so that I can save the new access token when it is refreshed?

My auth.ts file is below

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;
    },
  },
});