fix axidental logouts

Author: Voxel07

src/context/AuthProvider.jsx

@@ -1,6 +1,6 @@
 import { createContext, useState, useEffect, useCallback, useMemo } from "react";
 import { openobserveRum } from "@openobserve/browser-rum";
-import api, { apiUrl, refreshSession, rememberSession } from "../helper/api";
+import api, { apiUrl, isTransientAuthError, refreshSession, rememberSession } from "../helper/api";
 import SessionExpiredDialog from "../components/utils/SessionExpiredDialog";
 
 const AuthContext = createContext(null);
@@ -31,6 +31,10 @@ function fromSession(session) {
 
 // Re-read the session (role, block status) this often and whenever the tab becomes visible.
 const SESSION_CHECK_MS = 5 * 60 * 1000;
+// On page load an unreachable backend is retried a few times before showing the visitor view.
+const INITIAL_LOAD_RETRIES_MS = [1000, 3000];
+
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const AuthProvider = ({ children }) => {
     // Tokens live in HttpOnly cookies; this state only holds who is logged in.
@@ -45,30 +49,42 @@ export const AuthProvider = ({ children }) => {
         setAuthState((prev) => (Object.keys(next).every((k) => prev[k] === next[k]) ? prev : next));
     }, []);
 
+    /** Login and logout: also tells the other open tabs. */
     const setSession = useCallback((session) => {
-        rememberSession(session);
+        rememberSession(session, { broadcast: true });
         applySession(session);
     }, [applySession]);
 
+    const fetchSession = useCallback(async () => {
+        let data = null;
+        try {
+            ({ data } = await api.get('/auth/session'));
+        } catch (err) {
+            // 401: the access cookie is stale or was rejected. The refresh cookie may still be valid.
+            if (err.response?.status !== 401) throw err;
+        }
+        if (data?.authenticated) {
+            rememberSession(data);
+            applySession(data);
+            return;
+        }
+        // No valid access cookie: a refresh cookie may still exist (it is HttpOnly, so ask).
+        const refreshed = await refreshSession();
+        applySession(refreshed);
+    }, [applySession]);
+
     const loadSession = useCallback(async () => {
         try {
-            const { data } = await api.get('/auth/session');
-            if (data?.authenticated) {
-                setSession(data);
-                return;
-            }
-            // No valid access cookie: a refresh cookie may still exist (it is HttpOnly, so ask).
-            setSession(await refreshSession());
-        } catch {
-            setSession(null);
-        } finally {
-            setReady(true);
+            await fetchSession();
+        } catch (err) {
+            // Offline or backend unavailable: keep the session, the next check retries.
+            if (!isTransientAuthError(err)) setSession(null);
         }
-    }, [setSession]);
+    }, [fetchSession, setSession]);
 
     const logout = useCallback(async ({ everywhere = false } = {}) => {
         try {
-            await api.post('/auth/logout', null, { params: everywhere ? { all: true } : undefined });
+            await api.post('/auth/logout', null, { params: everywhere ? { all: true } : undefined, _skipAuthRetry: true });
         } catch (e) {
             console.error('Logout error:', e);
         } finally {
@@ -79,8 +95,25 @@ export const AuthProvider = ({ children }) => {
     useEffect(() => {
         // Sessions before the HttpOnly cookies kept tokens in a script-readable cookie; remove it.
         document.cookie = 'auth:v1=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Strict; Secure';
-        loadSession();
-    }, [loadSession]);
+        let cancelled = false;
+        (async () => {
+            for (let attempt = 0; ; attempt++) {
+                try {
+                    await fetchSession();
+                    break;
+                } catch (err) {
+                    if (!isTransientAuthError(err) || attempt >= INITIAL_LOAD_RETRIES_MS.length) {
+                        if (!cancelled && !isTransientAuthError(err)) setSession(null);
+                        break;
+                    }
+                    await wait(INITIAL_LOAD_RETRIES_MS[attempt]);
+                    if (cancelled) return;
+                }
+            }
+            if (!cancelled) setReady(true);
+        })();
+        return () => { cancelled = true; };
+    }, [fetchSession, setSession]);
 
     // Refreshes triggered by the API layer (expiry, 401) update the state here.
     useEffect(() => {
@@ -101,9 +134,12 @@ export const AuthProvider = ({ children }) => {
             if (document.visibilityState === 'visible') loadSession();
         };
         document.addEventListener('visibilitychange', onVisible);
+        // A check that failed while offline is repeated as soon as the connection is back.
+        window.addEventListener('online', loadSession);
         return () => {
             clearInterval(interval);
             document.removeEventListener('visibilitychange', onVisible);
+            window.removeEventListener('online', loadSession);
         };
     }, [auth.isAuthenticated, loadSession]);
 

src/helper/api.js

@@ -20,13 +20,52 @@ const api = axios.create({
   headers: { 'X-Requested-With': 'XMLHttpRequest' },
 });
 
-// When the current access cookie expires (ms); null while no session is known.
+// Refresh this long (at most half the token lifetime) before the access cookie expires.
+const REFRESH_MARGIN_MS = 60 * 1000;
+// After a refresh failed for a transient reason (offline, 5xx, 429), wait this long before retrying.
+const TRANSIENT_RETRY_MS = 10 * 1000;
+
+// When the current access cookie expires, in this browser's clock (ms); null while no session is known.
 let accessExpiresAt = null;
+// When to refresh, in this browser's clock (ms).
+let refreshAt = null;
+let lastSession = null;
 let refreshPromise = null;
+let retryRefreshAfter = 0;
+
+// Tabs share the cookies, so they also share refreshes, logins and logouts.
+const channel = typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel('wr-auth') : null;
+
+/**
+ * The refresh request failed without ending the session: the browser is offline, the
+ * backend is restarting or rate-limiting. The cookies are still valid; keep the session.
+ */
+export function isTransientAuthError(err) {
+  const status = err?.response?.status;
+  return !status || status === 429 || status >= 500;
+}
 
-/** Remembers the session returned by /auth/login, /auth/oidc, /auth/refresh or /auth/session. */
-export function rememberSession(session) {
-  accessExpiresAt = session?.authenticated ? (session.accessExpiresAt ?? Date.now() + 10 * 60 * 1000) : null;
+/**
+ * Remembers the session returned by /auth/login, /auth/oidc, /auth/refresh or /auth/session.
+ * The expiry is taken from the remaining lifetime, so a wrong client clock does not matter.
+ */
+export function rememberSession(session, { broadcast = false, expired = false } = {}) {
+  if (session?.authenticated) {
+    const remaining = typeof session.accessExpiresIn === 'number'
+      ? session.accessExpiresIn
+      : (session.accessExpiresAt ?? Date.now() + 10 * 60 * 1000) - Date.now();
+    accessExpiresAt = Date.now() + remaining;
+    refreshAt = accessExpiresAt - Math.min(REFRESH_MARGIN_MS, remaining / 2);
+    lastSession = session;
+    retryRefreshAfter = 0;
+  } else {
+    accessExpiresAt = null;
+    refreshAt = null;
+    lastSession = null;
+  }
+  if (broadcast) {
+    channel?.postMessage({ session: session?.authenticated ? session : { authenticated: false }, accessExpiresAt, refreshAt, expired });
+  }
 }
 
 function announce(session, expired) {
@@ -36,35 +75,72 @@ function announce(session, expired) {
   }
 }
 
+if (channel) {
+  channel.onmessage = ({ data }) => {
+    if (!data?.session) return;
+    if (data.session.authenticated) {
+      accessExpiresAt = data.accessExpiresAt;
+      refreshAt = data.refreshAt;
+      lastSession = data.session;
+      retryRefreshAfter = 0;
+    } else {
+      accessExpiresAt = null;
+      refreshAt = null;
+      lastSession = null;
+    }
+    announce(data.session, !!data.expired);
+  };
+}
+
+/** Runs fn while holding a lock shared by all tabs (where the browser supports it). */
+function withTabLock(fn) {
+  return navigator.locks?.request ? navigator.locks.request('wr-auth-refresh', fn) : fn();
+}
+
 /**
  * Exchanges the refresh cookie for a new access cookie. Concurrent callers share one
- * request; the backend rotates the refresh token and tolerates parallel tabs.
+ * request, and tabs take turns: the backend rotates the refresh token on every use, so
+ * two tabs presenting the same token in a row could otherwise end the session.
+ * Rejects with the request error; check isTransientAuthError() before treating it as a logout.
  */
 export function refreshSession() {
   if (!refreshPromise) {
-    const hadSession = accessExpiresAt !== null;
-    refreshPromise = api.post('/auth/refresh', null, { _skipAuthRetry: true })
-      .then((res) => {
-        rememberSession(res.data);
-        announce(res.data, hadSession && !res.data?.authenticated);
+    const knownExpiry = accessExpiresAt;
+    refreshPromise = withTabLock(async () => {
+      // Another tab refreshed while this one waited for the lock: its cookies are ours too.
+      if (lastSession && accessExpiresAt !== knownExpiry && Date.now() < refreshAt) {
+        return lastSession;
+      }
+      const hadSession = accessExpiresAt !== null;
+      try {
+        const res = await api.post('/auth/refresh', null, { _skipAuthRetry: true, timeout: 15000 });
+        const expired = hadSession && !res.data?.authenticated;
+        rememberSession(res.data, { broadcast: true, expired });
+        announce(res.data, expired);
         return res.data;
-      })
-      .catch((err) => {
-        rememberSession(null);
+      } catch (err) {
+        if (isTransientAuthError(err)) {
+          retryRefreshAfter = Date.now() + TRANSIENT_RETRY_MS;
+          throw err;
+        }
+        // 401: the backend ended the session and cleared the cookies. 403: blocked or rejected.
+        const expired = hadSession && err.response?.status !== 403;
+        rememberSession(null, { broadcast: true, expired });
         if (err.response?.status !== 403) {
-          announce({ authenticated: false }, hadSession);
+          announce({ authenticated: false }, expired);
         }
         throw err;
-      })
-      .finally(() => { refreshPromise = null; });
+      }
+    }).finally(() => { refreshPromise = null; });
   }
   return refreshPromise;
 }
 
 // Refresh shortly before the access cookie expires, so requests never go out
 // without it (public endpoints would otherwise silently answer as for a visitor).
 api.interceptors.request.use(async (config) => {
-  if (!config._skipAuthRetry && accessExpiresAt !== null && Date.now() > accessExpiresAt - 30 * 1000) {
+  if (!config._skipAuthRetry && refreshAt !== null
+      && Date.now() >= refreshAt && Date.now() >= retryRefreshAfter) {
     try {
       await refreshSession();
     } catch {
@@ -103,8 +179,10 @@ api.interceptors.response.use(
       let session = null;
       try {
         session = await refreshSession();
-      } catch {
-        // Session ended; the backend cleared the cookies.
+      } catch (refreshError) {
+        // Offline or backend unavailable: the session may well be fine, report the original error.
+        if (isTransientAuthError(refreshError)) return Promise.reject(error);
+        // Otherwise the session ended; the backend cleared the cookies.
       }
       // With a new session every request is retried. Without one only reads are:
       // they succeed as a visitor now that the stale cookie is gone.