fix(auth): resolve concurrent session token refresh and state syncing issues to prevent frequent logouts

src/lib/auth.ts

@@ -72,37 +72,62 @@ export async function signIn(email: string, password: string): Promise<AuthSessi
   };
 
   localStorage.setItem(SESSION_KEY, JSON.stringify(session));
+  window.dispatchEvent(new Event('session-refreshed'));
   return session;
 }
 
-export async function refreshSession(refreshToken: string): Promise<AuthSession> {
-  const response = await fetch(`${SUPABASE_URL}/auth/v1/token?grant_type=refresh_token`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'apikey': SUPABASE_ANON_KEY,
-    },
-    body: JSON.stringify({ refresh_token: refreshToken }),
-  });
+let activeRefreshPromise: Promise<AuthSession> | null = null;
 
-  if (!response.ok) {
-    localStorage.removeItem(SESSION_KEY);
-    throw new Error('Session expired. Please sign in again.');
+export async function refreshSession(refreshToken: string): Promise<AuthSession> {
+  if (activeRefreshPromise) {
+    return activeRefreshPromise;
   }
 
-  const data = await response.json();
-  const session: AuthSession = {
-    access_token: data.access_token,
-    refresh_token: data.refresh_token,
-    user: { id: data.user.id, email: data.user.email },
-  };
+  activeRefreshPromise = (async () => {
+    try {
+      const response = await fetch(`${SUPABASE_URL}/auth/v1/token?grant_type=refresh_token`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'apikey': SUPABASE_ANON_KEY,
+        },
+        body: JSON.stringify({ refresh_token: refreshToken }),
+      });
 
-  localStorage.setItem(SESSION_KEY, JSON.stringify(session));
-  return session;
+      if (!response.ok) {
+        if (response.status === 400 || response.status === 401 || response.status === 403) {
+          localStorage.removeItem(SESSION_KEY);
+          window.dispatchEvent(new Event('session-refreshed'));
+          throw new Error('Session expired. Please sign in again.');
+        } else {
+          throw new Error(`Server error (${response.status}). Please try again later.`);
+        }
+      }
+
+      const data = await response.json();
+      const session: AuthSession = {
+        access_token: data.access_token,
+        refresh_token: data.refresh_token,
+        user: { id: data.user.id, email: data.user.email },
+      };
+
+      localStorage.setItem(SESSION_KEY, JSON.stringify(session));
+      window.dispatchEvent(new Event('session-refreshed'));
+      return session;
+    } catch (error) {
+      // If the error was not already thrown as "Session expired", we just propagate it.
+      throw error;
+    } finally {
+      activeRefreshPromise = null;
+    }
+  })();
+
+  return activeRefreshPromise;
 }
 
 export function signOut(): void {
   localStorage.removeItem(SESSION_KEY);
+  window.dispatchEvent(new Event('session-refreshed'));
 }
 
 export function getStoredSession(): AuthSession | null {

src/lib/supabase.ts

@@ -17,17 +17,37 @@ export async function safeFetch(url: string, options: RequestInit = {}): Promise
 
   let response = await fetch(url, { ...options, headers });
 
-  if (response.status === 401 && session?.refresh_token) {
-    try {
-      const newSession = await refreshSession(session.refresh_token);
-      const newHeaders = {
-        ...options.headers,
-        'apikey': SUPABASE_ANON_KEY,
-        'Authorization': `Bearer ${newSession.access_token}`,
-      };
-      response = await fetch(url, { ...options, headers: newHeaders });
-    } catch (refreshError) {
-      console.error('Session refresh failed:', refreshError);
+  if (response.status === 401) {
+    const latestSession = getStoredSession();
+    if (latestSession) {
+      // If the access token in localStorage is already different (newer) than the one we used,
+      // try retrying the request with that new token first without doing a refresh.
+      if (latestSession.access_token !== token) {
+        const retryHeaders = {
+          ...options.headers,
+          'apikey': SUPABASE_ANON_KEY,
+          'Authorization': `Bearer ${latestSession.access_token}`,
+        };
+        response = await fetch(url, { ...options, headers: retryHeaders });
+        if (response.status !== 401) {
+          return response;
+        }
+      }
+      
+      // If we still get a 401, perform the refresh using the latest refresh token
+      if (latestSession.refresh_token) {
+        try {
+          const newSession = await refreshSession(latestSession.refresh_token);
+          const newHeaders = {
+            ...options.headers,
+            'apikey': SUPABASE_ANON_KEY,
+            'Authorization': `Bearer ${newSession.access_token}`,
+          };
+          response = await fetch(url, { ...options, headers: newHeaders });
+        } catch (refreshError) {
+          console.error('Session refresh failed:', refreshError);
+        }
+      }
     }
   }