fix: window scoped state for token refresh

web/globals.d.ts

@@ -0,0 +1,6 @@
+interface Window {
+  guard: {
+    refreshing: boolean;
+    refreshQueue: ((token: string | null) => void)[];
+  };
+}

web/src/api/index.ts

@@ -12,7 +12,6 @@ export const axios = Axios.create({
   },
 });
 
-let isRefreshing = false;
 let refreshQueue: ((token: string | null) => void)[] = [];
 
 const waitForTokenRefresh = () => {
@@ -60,7 +59,7 @@ const refreshToken = async (
   } finally {
     localStorage.removeItem("refreshing");
     loadAccounts?.();
-    isRefreshing = false;
+    window.guard.refreshing = false;
   }
 };
 
@@ -74,8 +73,9 @@ axios.interceptors.request.use(
       return request;
     }
 
-    if (!isRefreshing) {
-      isRefreshing = true;
+    if (!window.guard.refreshing) {
+      console.log(`request to ${request.url} is refreshing token`);
+      window.guard.refreshing = true;
       try {
         const { access } = await refreshToken(
           account!.accountId,
@@ -87,7 +87,9 @@ axios.interceptors.request.use(
         throw err;
       }
     } else {
+      console.log(`request to ${request.url} is waiting for token`);
       token = await waitForTokenRefresh();
+      console.log(`request to ${request.url} waited for token:`, token);
     }
 
     if (!token) {

web/src/main.tsx

@@ -4,6 +4,13 @@ import App from "./App";
 import "./index.css";
 import { OAuthProvider } from "./context/oauth/provider";
 
+if (typeof window.guard !== "object") {
+  window.guard = {
+    refreshing: false,
+    refreshQueue: [],
+  };
+}
+
 const root = document.getElementById("root")!;
 
 createRoot(root).render(

web/tsconfig.app.json

@@ -25,5 +25,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "globals.d.ts"]
 }