Frontend Authentication Architecture: JWT vs HttpOnly Session Cookies

let inMemoryAccessToken: string | null = null;
let isRefreshing = false;
let failedQueue: Array<{ resolve: (token: string) => void; reject: (err: any) => void }> = [];

const processQueue = (error: any, token: string | null = null) => {
  failedQueue.forEach((prom) => {
    if (error) prom.reject(error);
    else prom.resolve(token!);
  });
  failedQueue = [];
};

export async function authenticatedFetch(url: string, options: RequestInit = {}): Promise<Response> {
  // 1. If we have a token, attach Authorization header
  const headers = new Headers(options.headers);
  if (inMemoryAccessToken) {
    headers.set('Authorization', `Bearer ${inMemoryAccessToken}`);
  }

  let response = await fetch(url, { ...options, headers, credentials: 'include' });

  // 2. If 401 Unauthorized, trigger silent token refresh
  if (response.status === 401) {
    if (!isRefreshing) {
      isRefreshing = true;

      try {
        const refreshRes = await fetch('/api/auth/refresh', {
          method: 'POST',
          credentials: 'include', // Sends HttpOnly cookie
        });

        if (!refreshRes.ok) throw new Error('Session expired');
        const data = await refreshRes.json();
        inMemoryAccessToken = data.accessToken;

        processQueue(null, data.accessToken);
      } catch (err) {
        processQueue(err, null);
        window.location.href = '/login';
        throw err;
      } finally {
        isRefreshing = false;
      }
    }

    // Queue concurrent requests while token is refreshing
    return new Promise((resolve, reject) => {
      failedQueue.push({
        resolve: (newToken) => {
          headers.set('Authorization', `Bearer ${newToken}`);
          resolve(fetch(url, { ...options, headers, credentials: 'include' }));
        },
        reject,
      });
    });
  }

  return response;
}