Why Isn't My Session Updating with New Token Values After Refresh?

[sidyr6002]

I'm working on a Remix application that implements token refresh logic in a protected route's loader. The idea is to check the current session for an access token and a refresh token, then call a backend /auth/refresh endpoint when the access token is expired. When the refresh call is successful, I update the session with the new tokens. However, despite receiving new tokens from the backend, the session cookie doesn't seem to be updating with these new values.

Below is an excerpt of the relevant code:

import axios from "axios";
import { LoaderFunction, Outlet, redirect } from "react-router";
import { commitSession, destroySession, getSession } from "~/session.server";

function isTokenExpired(token: string): boolean {
  console.log('Token(Expired):', token);
  try {
    const payload = JSON.parse(
      Buffer.from(token.split(".")[1], "base64").toString()
    );
    return Date.now() >= payload.exp * 1000;
  } catch (error) {
    return true;
  }
}

export const loader: LoaderFunction = async ({ request }) => {
  const session = await getSession(request);
  const accessToken = session.get('accessToken');
  const refreshToken = session.get('refreshToken');

  console.log('Access token:', accessToken);
  console.log('Refresh token:', refreshToken);

  if (!accessToken || !refreshToken) {
    return redirect('/sign-in');
  }

  if (isTokenExpired(accessToken)) {
    try {
      const backendUrl = process.env.BACKEND_URL || '';
      const response = await axios.post(
        `${backendUrl}/auth/refresh`,
        { refreshToken },
        {
          headers: { 'Content-Type': 'application/json' },
          withCredentials: true,
        }
      );
      const {
        accessToken: newAccessToken,
        refreshToken: newRefreshToken,
      } = response.data;

      console.log('New access token:', newAccessToken);
      console.log('New refresh token:', newRefreshToken);
      
      session.set('accessToken', newAccessToken);
      session.set('refreshToken', newRefreshToken);
    } catch (error) {
      console.error('Token refresh failed:', error);
      return redirect('/sign-in', {
        headers: {
          'Set-Cookie': await destroySession(session),
        },
      });
    }
  }

  const sessionCookie = await commitSession(session);

  // Attempting to return the updated session cookie in headers
  return Response.json({
    message: "Session refreshed successfully",
    headers: { 
      'Set-Cookie': sessionCookie
    },
  });
};

const ProtectedLayout = () => {
  return (
    <div>
      <h1>Protected Layout</h1>
      <Outlet />
    </div>
  )
}

export default ProtectedLayout;

What could be the potential reasons for the session not getting updated with the new token values, even though the refresh endpoint is returning the new tokens correctly? Has anyone encountered similar issues, or does anyone see something in the above code that might be causing the session cookie not to reflect the updated values?

Any insights, debugging tips, or pointers to related documentation would be really appreciated!

Thanks in advance!

[GxDesign]

Im seeing that this can happen when multiple nested routes are using the protected loader. Try throwing your error redirect rather than returning it.