Refresh token method were called more than once

[aufasyaihan]

I was trying to implement a refresh token function. Why does it sometimes work, but not other times? Sometimes the expiry date was updated, while at other times it wasn't. When I tried to leave the page for a while, then go back to the page, the refresh token automatically refreshed, and it worked, but when I tried to refresh the page manually, sometimes it didn't work

is token not expired : true 
 Current time :  5/19/2025, 5:54:45 PM
 Token expires at :  1747652189000  or  5/19/2025, 5:56:29 PM
 GET /api/auth/session 200 in 167ms
is token not expired : false 
 Current time :  5/19/2025, 5:57:21 PM
 Token expires at :  1747652189000  or  5/19/2025, 5:56:29 PM
Response {
  status: 200,
  statusText: 'OK',
  headers: Headers {
    date: 'Mon, 19 May 2025 10:57:21 GMT',
    server: 'uvicorn',
    'content-length': '314',
    'content-type': 'application/json'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: true,
  redirected: false,
  type: 'default',
  url: 'http://.../auth/refresh'
}
New token {
  sub: 'c7e0dc68-6f06-4b35-8054-9870cbffbe53',
  accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhbHZpYW5hLmluaEBnbWFpbC5jb20iLCJuYW1lIjpudWxsLCJpc19hZG1pbiI6ZmFsc2UsInVzZXJfcm9sZSI6InNhbGVzIiwiZXhwIjoxNzQ3NjU0MDQyfQ.KWQMe4NWP2Ce_CVoRfWTRRemLiOqa6Ln51AMpPmzw8U',
  refreshToken: 'efE3kGHqLFYrDR0qb7mxq12j13YMHHEoyXKv_kV0v3k',
  user: {
    sub: '...@gmail.com',
    name: null,
    is_admin: false,
    user_role: 'sales',
    exp: 1747650316
  },
  iat: 1747652085,
  exp: 1747738485,
  jti: '8b30ed8e-888c-42fa-9baf-0c9d7c9c981b',
  accessTokenExpires: 1747654042000
}
 GET /chat 200 in 2036ms
 GET /.well-known/appspecific/com.chrome.devtools.json 404 in 144ms
is token not expired : false 
 Current time :  5/19/2025, 5:57:24 PM
 Token expires at :  1747652189000  or  5/19/2025, 5:56:29 PM
Response {
  status: 401,
  statusText: 'Unauthorized',
  headers: Headers {
    date: 'Mon, 19 May 2025 10:57:23 GMT',
    server: 'uvicorn',
    'content-length': '45',
    'content-type': 'application/json'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: false,
  redirected: false,
  type: 'basic',
  url: 'http://.../auth/refresh'
}
Error: Unauthorized
    at refreshAccessToken (file://C%3A/01%20Data/Magang/Purple%20Box/Projects/purple-box-rag/src/lib/auth.ts:28:18)
  26 |
  27 |         if (!response.ok) {
> 28 |             throw new Error(response.statusText);
     |                  ^
  29 |         }
  30 |
  31 |         const tokens: LoginResponse = await response.json();
 GET /api/auth/session 200 in 840ms
is token not expired : false 
 Current time :  5/19/2025, 5:57:25 PM
 Token expires at :  1747652189000  or  5/19/2025, 5:56:29 PM
 GET /api/auth/csrf 200 in 102ms
 POST /api/auth/signout 200 in 77ms
 GET /favicon.ico?favicon.decfff5c.ico 200 in 293ms
 ✓ Compiled /login in 46ms
Response {
  status: 401,
  statusText: 'Unauthorized',
  headers: Headers {
    date: 'Mon, 19 May 2025 10:57:25 GMT',
    server: 'uvicorn',
    'content-length': '45',
    'content-type': 'application/json'
  },
  body: ReadableStream { locked: false, state: 'readable', supportsBYOB: true },
  bodyUsed: false,
  ok: false,
  redirected: false,
  type: 'basic',
  url: 'http://.../auth/refresh'
}
Error: Unauthorized
    at refreshAccessToken (file://C%3A/01%20Data/Magang/Purple%20Box/Projects/purple-box-rag/src/lib/auth.ts:28:18)
  26 |
  27 |         if (!response.ok) {
> 28 |             throw new Error(response.statusText);
     |                  ^
  29 |         }
  30 |
  31 |         const tokens: LoginResponse = await response.json();

As you can see from the log, the API was working and have returned the new token. but the if check for the dates still uses the old expiry date.

Here's the code :

import { DecodedToken, LoginResponse, Session, User } from "@/types/auth";
import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
import { jwtDecode } from "jwt-decode";
import type { JWT } from "next-auth/jwt";
import { authConfig } from "@/auth.config";

async function refreshAccessToken(token: JWT) {
  try {
      const response = await fetch(
          `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/refresh`,
          {
              method: "POST",
              headers: {
                  "Content-Type": "application/json",
                  Authorization: `Bearer ${token.accessToken}`,
              },
              body: JSON.stringify({
                  refresh_token: token.refreshToken,
              }),
          }
      );

      if (!response.ok) {
          throw new Error(response.statusText);
      }

      const tokens: LoginResponse = await response.json();
      const decoded: DecodedToken = jwtDecode(tokens.access_token);

      if (!response.ok) {
          throw tokens;
      }

      const refreshedToken = {
          ...token,
          accessToken: tokens.access_token,
          refreshToken: tokens.refresh_token ?? token.refreshToken,
          accessTokenExpires: decoded.exp * 1000,
      };

      console.log("New token", refreshedToken);

      return refreshedToken;
  } catch (error) {
      console.log(error);

      return {
          ...token,
          error: "RefreshAccessTokenError",
      };
  }
}

export const { signIn, signOut, auth, handlers } = NextAuth({
  ...authConfig,
  providers: [
      Credentials({
          credentials: {
              email: { label: "Email", type: "email" },
              password: { label: "Password", type: "password" },
          },
          async authorize(credentials) {
              if (credentials === null) return null;
              try {
                  const response = await fetch(
                      `${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/login`,
                      {
                          method: "POST",
                          headers: {
                              "Content-Type": "application/json",
                          },
                          body: JSON.stringify({
                              email: credentials?.email,
                              password: credentials?.password,
                          }),
                      }
                  );

                  if (!response.ok) {
                      if (response.status === 400) {
                          return null;
                      }
                      if (response.status === 500) {
                          throw new Error("Internal Server error");
                      }
                  }

                  const data = await response.json();

                  return data;
              } catch (error) {
                  console.error(
                      "Error in authorize:",
                      (error as Error).message
                  );
                  throw new Error((error as Error).message);
              }
          },
      }),
  ],
  callbacks: {
      jwt: async ({ token, account, user }) => {
          if (token.accessToken) {
              const decodedToken: DecodedToken = jwtDecode(
                  token.accessToken as string
              );
              token.accessTokenExpires = decodedToken?.exp * 1000;
          }

          if (user && account) {
              const userWithToken = user as User;
              const userData = jwtDecode(
                  userWithToken.access_token as string
              );
              return {
                  ...token,
                  accessToken: userWithToken.access_token,
                  refreshToken: userWithToken.refresh_token,
                  user: userData,
              };
          }

          console.log(
              "is token not expired :",
              Date.now() < (token.accessTokenExpires as number),
              "\n Current time : ",
              new Date().toLocaleString(),
              "\n Token expires at : ",
              token.accessTokenExpires,
              " or ",
              new Date(token.accessTokenExpires as number).toLocaleString()
          );

          if (Date.now() < (token.accessTokenExpires as number)) {
              return token;
          }
          return refreshAccessToken(token);
      },
      async session({ session, token }) {
          if (token) {
              const newSession = session as Session;
              newSession.accessToken = token.accessToken as string;
              newSession.refreshToken = token.refreshToken as string;
              newSession.tokenType = token.tokenType as string;
              newSession.user = token.user as User;
              newSession.error = token.error as string;
          }
          return session;
      },
  },
});