@djangocfg/api 2.1.454 → 2.1.456

package/src/auth/context/AuthContext.tsx

@@ -1,529 +1,211 @@
-// @ts-nocheck
 'use client';
 
-import { isDev, isBrowser } from "../utils/env";
+/**
+ * AuthProvider — thin React layer over the generated auth store.
+ *
+ * Architecture rule (auth v2): the generated store (`_api/generated/helpers/auth`)
+ * is the ONLY auth engine. It owns tokens, JWT-exp semantics, the reactive
+ * session snapshot, 401→refresh→retry recovery (cross-store Web-Locks), and
+ * the terminal-401 `onSessionExpired` event. React only:
+ *   1. subscribes to the snapshot (`useSyncExternalStore`),
+ *   2. loads the user profile when a session exists,
+ *   3. routes to login when the store says the session died,
+ *   4. exposes login/logout actions.
+ *
+ * Everything that used to live here — authTick, expiry timers, four parallel
+ * 401 handlers, presence-vs-exp token checks — is the store's job now.
+ */
+
 import { usePathname } from 'next/navigation';
 import React, {
-    createContext, memo, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
-import { SWRConfig } from 'swr';
 
-import { useCfgRouter, useLocalStorage, useQueryParams } from '../hooks';
-
-import { api as apiAccounts } from '../../';
-import { applyRoleLogPolicy } from '../../log-control';
+import { auth } from '../../_api/generated/helpers/auth';
+import { DEFAULT_AUTH_PATH, DEFAULT_CALLBACK_PATH } from '../constants';
 import { APIError } from '../../_api/generated/helpers';
-import { clearProfileCache, getCachedProfile } from '../hooks/useProfileCache';
+import { applyRoleLogPolicy } from '../../log-control';
+import { useCfgRouter, useLocalStorage, useQueryParams, useSession } from '../hooks';
+import { clearProfileCache } from '../hooks/useProfileCache';
 import { useAuthRedirectManager } from '../hooks/useAuthRedirect';
-import { useTokenRefresh } from '../hooks/useTokenRefresh';
-import { ensureRefreshHandler } from '../refreshHandler';
 import { Analytics, AnalyticsCategory, AnalyticsEvent } from '../utils/analytics';
+import { isDev, isBrowser } from '../utils/env';
 import { authLogger } from '../utils/logger';
-import { isTokenExpired, getTokenExpiry } from '../utils/jwt';
-import { nextAuthEvaluationDelay } from '../utils/guard';
 import { AccountsProvider, useAccountsContext } from './AccountsContext';
 
-import type { AuthConfig, AuthContextType, AuthProviderProps, UserProfile } from './types';
+import type { AuthContextType, AuthProviderProps, UserProfile } from './types';
 import type { OTPRequestResult } from '../types';
 
-// Default routes
 const defaultRoutes = {
-  auth: '/auth',
-  defaultCallback: '/dashboard',
-  defaultAuthCallback: '/auth',
+  auth: DEFAULT_AUTH_PATH,
+  defaultCallback: DEFAULT_CALLBACK_PATH,
+  defaultAuthCallback: DEFAULT_AUTH_PATH,
 };
 
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-// Constants
 const EMAIL_STORAGE_KEY = 'auth_email';
 
-const hasValidTokens = (): boolean => {
-  if (typeof window === 'undefined') return false;
-  return apiAccounts.isAuthenticated();
-};
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-/**
- * Decide, at bootstrap, whether the persisted tokens are a DEAD session that
- * can never be recovered — so we should clear storage and show the login form
- * instead of firing doomed API calls.
- *
- * Pure + injectable (tokens passed in) so it can be unit-tested without a store.
- *
- * A session is dead when the access token is missing/expired/malformed AND the
- * refresh token cannot save it (missing or itself expired/malformed). If either
- * the access token is still live, OR a usable refresh token exists, the session
- * is NOT dead — normal init proceeds (and refresh will run if needed).
- *
- * This is exactly the state the user used to fix by hand ("cleared localStorage
- * and then the form appeared"): stale/blacklisted-companion tokens left in
- * storage with no path forward.
- */
-export const isSessionDeadOnBootstrap = (
-  accessToken: string | null,
-  refreshToken: string | null,
-  now = Date.now(),
-): boolean => {
-  const accessDead = isTokenExpired(accessToken, 0, now);
-  if (!accessDead) return false; // access still usable → alive
-  const refreshDead = isTokenExpired(refreshToken, 0, now);
-  return refreshDead; // access dead + refresh dead/absent → unrecoverable
+/** Extract a user-facing message from an APIError response body. */
+const apiErrorMessage = (error: APIError): string => {
+  const body = error.response as
+    | { error?: string; detail?: string; message?: string }
+    | undefined;
+  return body?.error || body?.detail || body?.message || error.errorMessage;
 };
 
-/**
- * Live, network-free authentication check — the single source of truth for
- * `isAuthenticated`. Reads the persisted tokens and validates their `exp`
- * LOCALLY, so the answer never depends on a server 401 arriving (which CSP, a
- * hung request, or an offline network can silently swallow).
- *
- * A session is alive while it is not `isSessionDeadOnBootstrap` — i.e. the
- * access token is still valid, OR a usable refresh token exists to renew it.
- * We deliberately do NOT require a live access token: between access expiry and
- * the silent refresh the session is still recoverable, and flipping to
- * "unauthenticated" there would bounce the user to /auth on every protected
- * page. Only access-dead AND refresh-dead means truly logged out.
- *
- * Note: `isAuthenticated()` in the generated store only checks token PRESENCE,
- * not expiry — this wrapper adds the expiry gate the guard needs.
- */
-const isSessionAlive = (now = Date.now()): boolean => {
-  if (typeof window === 'undefined') return false;
-  return !isSessionDeadOnBootstrap(
-    apiAccounts.getToken(),
-    apiAccounts.getRefreshToken(),
-    now,
-  );
-};
-
-// Internal provider that uses AccountsContext
 const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config }) => {
   const accounts = useAccountsContext();
+  const session = useSession();
+  const isAuthenticated = session.status === 'authenticated';
 
-  // Register the canonical refresh strategy exactly once, synchronously on the
-  // first render, BEFORE any request can 401. This lights up the generated
-  // client's built-in 401 recovery (single-flight + retry + rotated-token
-  // persistence). Idempotent — safe across remounts / multiple providers.
-  ensureRefreshHandler();
+  const router = useCfgRouter();
+  const pathname = usePathname();
+  const queryParams = useQueryParams();
+  const [storedEmail, setStoredEmail, clearStoredEmail] = useLocalStorage<string | null>(
+    EMAIL_STORAGE_KEY,
+    null,
+  );
 
-  // Redirect URL manager for saving URL before auth redirect
   const redirectManager = useAuthRedirectManager({
     fallbackUrl: config?.routes?.defaultCallback || defaultRoutes.defaultCallback,
     clearOnUse: true,
   });
 
-  // Smart initial loading state: only true if we don't have tokens yet
-  const [isLoading, setIsLoading] = useState(() => {
-    // If we already have tokens and profile, don't show loading
-    if (typeof window !== 'undefined') {
-      const hasTokens = hasValidTokens();
-      // Only show loading on initial mount if no tokens
-      return !hasTokens;
-    }
-    return true;
-  });
-
-  const [initialized, setInitialized] = useState(false);
-
-  // Reactivity tick for `isAuthenticated`. Token state lives in the auth store
-  // (localStorage), NOT React state — so `apiAccounts.isAuthenticated()` is read
-  // once when the context value is memoised and would go stale after tokens are
-  // cleared (e.g. a blacklisted-refresh 401). Bumping this on every auth-state
-  // transition forces the memo to recompute, so the guard reliably flips to
-  // "unauthenticated" and the login form is shown instead of an endless
-  // "Authenticating…" spinner.
-  const [authTick, setAuthTick] = useState(0);
-  const bumpAuthTick = useCallback(() => setAuthTick((t) => t + 1), []);
-
-  // Time-driven re-evaluation of `isAuthenticated`. Because the flag is derived
-  // from token `exp` (not from a server event), a session can silently expire
-  // while the tab sits open — with nothing to trigger a recompute. So we arm a
-  // timer for the next moment the answer could change: whichever of the access
-  // / refresh tokens expires next. When it fires we bump the tick; the memo
-  // recomputes; the guard flips to unauthenticated and redirects — no 401 (and
-  // thus no CSP/offline dependency) required. Re-armed whenever tokens change
-  // (authTick) so a fresh refresh pushes the deadline out.
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const delay = nextAuthEvaluationDelay(
-      getTokenExpiry(apiAccounts.getToken()),
-      getTokenExpiry(apiAccounts.getRefreshToken()),
-      Date.now(),
-    );
-    if (delay === null) return; // nothing live to expire
-    // setTimeout caps at ~24.8 days; clamp so a far-future refresh doesn't overflow.
-    const timer = setTimeout(bumpAuthTick, Math.min(delay, 2_000_000_000));
-    return () => clearTimeout(timer);
-  }, [authTick, bumpAuthTick]);
-
-  // Latches once a dead session has been handled, so the redirect-to-login only
-  // fires once even if both the interceptor (auth.onUnauthorized) and the
-  // proactive-refresh error path trip for the same expired session.
-  const onUnauthorizedRef = useRef(false);
-
-  const router = useCfgRouter();
-  const pathname = usePathname();
-  const queryParams = useQueryParams();
-
-  // Use localStorage hook for email
-  const [storedEmail, setStoredEmail, clearStoredEmail] = useLocalStorage<string | null>(EMAIL_STORAGE_KEY, null);
-
-  // Automatic token refresh - refreshes token before expiry, on focus, and on network reconnect.
-  // NOTE: onRefreshError is wired below, after clearAuthState is defined
-  // (see handleProactiveRefreshError), so it can collapse a dead session to the
-  // login form. useTokenRefresh only runs when a refresh token exists.
-
-  // Map AccountsContext profile to UserProfile
-  const user = accounts.profile as UserProfile | null;
-
-  // Use refs to avoid dependency issues
-  const userRef = useRef(user);
   const configRef = useRef(config);
-  const isLoadingProfileRef = useRef(false);
-
-  // Update refs when values change
-  useEffect(() => {
-    userRef.current = user;
-  }, [user]);
-
   useEffect(() => {
     configRef.current = config;
   }, [config]);
 
-  // Note: API URL is configured in BaseClient, not at runtime
-
-  // Common function to clear auth state
-  const clearAuthState = useCallback((caller: string) => {
-    authLogger.info('clearAuthState >> caller', caller);
-    apiAccounts.clearToken();
-    clearProfileCache(); // Clear profile cache from localStorage
-    // Note: user is now managed by AccountsContext, will auto-update
-    setInitialized(true);
-    setIsLoading(false);
-    // Tokens just went away — recompute `isAuthenticated` so the guard shows
-    // the login form instead of hanging on the preloader.
-    bumpAuthTick();
-  }, [bumpAuthTick]);
-
-  // Proactive-refresh failure handler. useTokenRefresh (expiry timer / focus /
-  // reconnect) runs OUTSIDE the response interceptor, so its failures do NOT go
-  // through auth.onUnauthorized. A failed proactive refresh means the refresh
-  // token is dead (expired, or blacklisted after rotation) → the session is
-  // unrecoverable → clear it and show the login form. This is what was missing:
-  // the old handler just logged a warning and left stale tokens, so the app hung
-  // on "Authenticating…" forever.
-  const handleProactiveRefreshError = useCallback((error: Error) => {
-    authLogger.warn('Proactive token refresh failed — session is dead, redirecting to login:', error.message);
-    // Guard against the redirect firing twice if the interceptor path already tripped.
-    if (onUnauthorizedRef.current) return;
-    onUnauthorizedRef.current = true;
-    clearAuthState('proactiveRefresh:failed');
-    const authCallbackUrl = configRef.current?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
-    router.hardReplace(authCallbackUrl);
-  }, [clearAuthState, router]);
-
-  // Automatic token refresh — refreshes before expiry, on focus, and on reconnect.
-  useTokenRefresh({
-    enabled: true,
-    onRefresh: () => {
-      authLogger.info('Token auto-refreshed successfully');
-    },
-    onRefreshError: handleProactiveRefreshError,
-  });
-
-  // Global error handler for auth-related errors
-  // Only clears auth on actual authentication errors (401), not on any API error
-  const handleGlobalAuthError = useCallback((error: any, context: string = 'API Request') => {
-    // Only clear auth on actual authentication errors (401)
-    // Don't logout on validation errors, server errors, network issues, etc.
-    const isAuthError = error?.status === 401 ||
-                        error?.statusCode === 401 ||
-                        error?.code === 'token_not_valid' ||
-                        error?.code === 'authentication_failed';
-
-    if (isAuthError) {
-      authLogger.warn(`Authentication error in ${context}, clearing tokens`);
-      clearAuthState(`globalAuthError:${context}`);
-      return true;
-    }
-
-    // Log but don't logout for other errors
-    if (error?.success === false) {
-      authLogger.warn(`Non-auth error in ${context} (not clearing session):`, error?.message || error);
-    }
-
-    return false;
-  }, [clearAuthState]);
-
-  // Unrecoverable-401 handler from the generated client. Fires ONLY when a 401
-  // could not be recovered by the refresh path — no refresh token, no handler,
-  // the refresh call failed (e.g. "Token is blacklisted" after rotation), or
-  // the retried request still 401'd. Transparently-recovered 401s never reach
-  // here. This is the single place that guarantees a dead session collapses to
-  // the login form: clear tokens + hard-redirect to /auth.
-  //
-  // Without this, a proactive refresh (useTokenRefresh) hitting a blacklisted
-  // token would just log a warning and leave stale tokens in storage, so the
-  // guard stayed on "Authenticating…" forever and never rendered the form.
+  const accountsRef = useRef(accounts);
   useEffect(() => {
-    const handler = () => {
-      if (onUnauthorizedRef.current) return; // de-dupe concurrent 401s
-      onUnauthorizedRef.current = true;
-      authLogger.warn('Unrecoverable 401 (refresh failed) — clearing session and redirecting to login');
-      clearAuthState('onUnauthorized:401');
-      const authCallbackUrl = configRef.current?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
-      router.hardReplace(authCallbackUrl);
-    };
-    apiAccounts.onUnauthorized(handler);
-    return () => {
-      // Only clear if we're still the registered handler (StrictMode double-mount
-      // can register a newer one before this cleanup runs).
-      apiAccounts.onUnauthorized(null);
-    };
-    // clearAuthState/router are stable (useCallback); configRef is a ref.
-  }, [clearAuthState, router]);
-
-  // SWR onError: auto-logout on 401 from any SWR hook
-  const isAutoLoggingOutRef = useRef(false);
-  const swrOnError = useCallback((error: any) => {
-    const isAuthError = error?.status === 401 ||
-                        error?.statusCode === 401 ||
-                        error?.code === 'token_not_valid' ||
-                        error?.code === 'authentication_failed';
-
-    if (isAuthError && !isAutoLoggingOutRef.current) {
-      isAutoLoggingOutRef.current = true;
-      authLogger.warn('SWR 401 error detected, auto-logout');
-      clearAuthState('swrOnError:401');
-
-      const authCallbackUrl = configRef.current?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
-      router.hardReplace(authCallbackUrl);
-    }
-  }, [clearAuthState, router]);
-  const swrConfig = useMemo(() => ({ onError: swrOnError }), [swrOnError]);
-
-  // Simple profile loading without retry - now uses AccountsContext with memoization
-  const loadCurrentProfile = useCallback(async (callerId?: string): Promise<void> => {
-    const finalCallerId = callerId || 'AuthContext.loadCurrentProfile';
+    accountsRef.current = accounts;
+  }, [accounts]);
+
+  // ── Bootstrap: settle the profile for the current session ─────────────────
+  // The session itself needs no async bootstrap — the store answers
+  // synchronously from token `exp`. The only async part is the profile fetch,
+  // and it re-runs automatically when a session appears later (e.g. iframe
+  // token delivery via postMessage → setSession → snapshot flips).
+  const [profileSettled, setProfileSettled] = useState(false);
+  const hasProfile = Boolean(accounts.profile);
+  const profileAttemptedRef = useRef(false);
 
-    // Check if profile loading is already in progress
-    if (isLoadingProfileRef.current) {
-      authLogger.debug(`Profile loading already in progress, skipping duplicate call from: ${finalCallerId}`);
+  useEffect(() => {
+    if (!isAuthenticated) {
+      profileAttemptedRef.current = false;
+      // Dead tokens may still sit in storage (access AND refresh both
+      // expired). Purge so the login form shows instantly instead of the app
+      // firing doomed API calls — the automated "clear localStorage and the
+      // form appears".
+      if (auth.getToken() || auth.getRefreshToken()) {
+        authLogger.warn('Dead session in storage — clearing');
+        auth.clearSession();
+        clearProfileCache();
+      }
+      setProfileSettled(true);
       return;
     }
-
-    authLogger.debug(`loadCurrentProfile called by: ${finalCallerId}`);
-
-    try {
-      isLoadingProfileRef.current = true;
-
-      // Ensure API clients are properly initialized with current token
-      const isAuth = apiAccounts.isAuthenticated();
-      const token = apiAccounts.getToken();
-      // authLogger.debug('isAuthenticated:', isAuth, 'token:', token ? token.substring(0, 20) + '...' : 'null');
-
-      if (!isAuth) {
-        authLogger.warn('No valid authentication token, throwing error');
-        throw new Error('No valid authentication token');
-      }
-
-      // Check if profile is already loaded in AccountsContext to prevent duplicate API calls
-      if (accounts.profile && !accounts.isLoadingProfile) {
-        authLogger.debug('Profile already loaded in AccountsContext, skipping API call');
-        setInitialized(true);
-        return;
-      }
-
-      // Refresh profile from AccountsContext
-      const refreshedProfile = await accounts.refreshProfile({ callerId: finalCallerId });
-
-      if (refreshedProfile) {
-        authLogger.info('Profile loaded successfully:', refreshedProfile.id);
-      } else {
-        authLogger.warn('Profile refresh returned undefined - but keeping tokens');
-      }
-
-      // Always mark as initialized if we have valid tokens
-      // Don't clear tokens just because profile fetch failed
-      setInitialized(true);
-    } catch (error: any) {
-      authLogger.error('Failed to load profile:', error);
-      // Only clear auth state on actual authentication errors (401)
-      // Don't logout on network errors, server errors, etc.
-      const isAuthError = error?.status === 401 ||
-                          error?.statusCode === 401 ||
-                          error?.code === 'token_not_valid' ||
-                          error?.code === 'authentication_failed';
-
-      if (isAuthError) {
-        authLogger.warn('Authentication error, clearing session');
-        clearAuthState('loadCurrentProfile:authError');
-      } else {
-        // Keep tokens, mark as initialized - user can retry
-        authLogger.warn('Profile load failed but keeping session (non-auth error)');
-        setInitialized(true);
-      }
-    } finally {
-      isLoadingProfileRef.current = false;
+    if (hasProfile || profileAttemptedRef.current) {
+      setProfileSettled(true);
+      return;
     }
-  }, [clearAuthState, handleGlobalAuthError, accounts]);
-
-  // Initialize auth state once
-  useEffect(() => {
-    if (initialized) return;
-
-    const initializeAuth = async () => {
-      authLogger.info('Initializing auth...');
-
-      // Check if running in iframe (AdminLayout will handle auth via postMessage)
-      const isInIframe = typeof window !== 'undefined' && window.self !== window.top;
-      authLogger.info('Is in iframe:', isInIframe);
-
-      // Debug token state
-      const token = apiAccounts.getToken();
-      const refreshToken = apiAccounts.getRefreshToken();
-      authLogger.info('Token from API:', token ? `${token.substring(0, 20)}...` : 'null');
-      authLogger.info('Refresh token from API:', refreshToken ? `${refreshToken.substring(0, 20)}...` : 'null');
-      authLogger.info('localStorage keys:', Object.keys(localStorage).filter(k => k.includes('token') || k.includes('auth')));
-
-      // Fail-fast: if storage holds a DEAD session (access expired/malformed AND
-      // refresh unusable), clear it and show the login form immediately — never
-      // fire doomed profile/refresh calls that just 401 and hang the UI. This is
-      // the automated version of "clear localStorage, then the form appears".
-      // Skipped in iframe mode: the parent frame owns token delivery there.
-      if (!isInIframe && isSessionDeadOnBootstrap(token, refreshToken)) {
-        authLogger.warn('Bootstrap: dead session in storage (access + refresh both unusable) — clearing and showing login');
-        clearAuthState('initializeAuth:deadSession');
-        return;
-      }
-
-      const hasTokens = hasValidTokens();
-      authLogger.info('Has tokens:', hasTokens);
-
-      // Check if profile is already loaded from cache (AccountsContext initialization)
-      if (userRef.current) {
-        authLogger.info('Profile already loaded from AccountsContext cache, skipping API request');
-        setInitialized(true);
-        setIsLoading(false);
-        return;
-      }
-
-      // Check if cache exists in localStorage (before userRef updates)
-      const cachedProfile = getCachedProfile();
-      if (cachedProfile) {
-        authLogger.info('Profile found in localStorage cache, skipping API request');
-        setInitialized(true);
-        setIsLoading(false);
-        return;
-      }
-
-      // In iframe mode WITHOUT tokens yet - wait for AdminLayout to receive them via postMessage
-      // Don't initialize yet - AdminLayout.handleAuthToken will call loadCurrentProfile
-      if (isInIframe && !hasTokens) {
-        authLogger.info('Running in iframe without tokens - waiting for parent to send via postMessage');
-        authLogger.info('AdminLayout will handle auth initialization, skipping AuthContext init');
-        setInitialized(true); // Mark as initialized to prevent re-initialization
-        setIsLoading(false);
-        return;
-      }
-
-      if (hasTokens) {
-        setIsLoading(true);
-        try {
-          authLogger.info('No cached profile found, loading from API...');
-          await loadCurrentProfile('AuthContext.initializeAuth');
-        } catch (error: any) {
-          authLogger.error('Failed to load profile during initialization:', error);
-          // Only clear on 401 auth error, otherwise keep session
-          const isAuthError = error?.status === 401 ||
-                              error?.statusCode === 401 ||
-                              error?.code === 'token_not_valid' ||
-                              error?.code === 'authentication_failed';
-
-          if (isAuthError) {
-            clearAuthState('initializeAuth:authError');
-          } else {
-            authLogger.warn('Init profile load failed but keeping session');
-            setInitialized(true);
-          }
-        }
-        setIsLoading(false);
-      } else {
-        setInitialized(true);
-        setIsLoading(false);
-      }
+    profileAttemptedRef.current = true;
+    let cancelled = false;
+    accountsRef.current
+      .refreshProfile({ callerId: 'AuthProvider:bootstrap' })
+      .catch((error: unknown) => {
+        // A terminal 401 collapses the session via the store's
+        // onSessionExpired funnel below. Anything else (network, 5xx) keeps
+        // the session — the user can retry.
+        authLogger.warn('Profile load failed (session kept):', error);
+      })
+      .finally(() => {
+        if (!cancelled) setProfileSettled(true);
+      });
+    return () => {
+      cancelled = true;
     };
+  }, [isAuthenticated, hasProfile]);
 
-    initializeAuth();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialized]);
+  const isLoading = !profileSettled;
 
-  // Redirect logic - only for unauthenticated users on protected pages
+  // ── The ONE exit: terminal 401 → login ─────────────────────────────────────
+  // The store has already cleared the session before this fires (subscribers
+  // flipped to 'anonymous'), so the handler only routes. Registration returns
+  // its own unsubscribe — StrictMode double-mounts compose instead of racing.
+  const expiredHandledRef = useRef(false);
   useEffect(() => {
-    if (!initialized) return;
+    const unsubscribe = auth.onSessionExpired(() => {
+      if (expiredHandledRef.current) return;
+      expiredHandledRef.current = true;
+      authLogger.warn('Session expired (terminal 401) — redirecting to login');
+      clearProfileCache();
+      Analytics.event(AnalyticsEvent.AUTH_SESSION_EXPIRED, {
+        category: AnalyticsCategory.AUTH,
+      });
+      const authCallbackUrl =
+        configRef.current?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
+      router.hardReplace(authCallbackUrl);
+    });
+    return unsubscribe;
+  }, [router]);
 
-    // Consider authenticated if we have valid tokens, even without profile
-    const isAuthenticated = apiAccounts.isAuthenticated();
+  // ── Redirect authenticated users away from the auth page ──────────────────
+  // Skipped while a `?flow` param is present (OTP / 2FA flows in progress).
+  useEffect(() => {
+    if (!isAuthenticated) return;
     const authRoute = config?.routes?.auth || defaultRoutes.auth;
-    const isAuthPage = pathname === authRoute;
-    const flowParam = queryParams.get('flow');
-
-    // Only redirect authenticated users away from auth page if they're not in a flow
-    // This prevents interference with OTP verification flow
-    if (isAuthenticated && isAuthPage && !flowParam) {
-      const callbackUrl = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
-      router.push(callbackUrl);
+    if (pathname === authRoute && !queryParams.get('flow')) {
+      router.push(config?.routes?.defaultCallback || defaultRoutes.defaultCallback);
     }
-  }, [initialized, pathname, queryParams, config?.routes]);
-
-  const pushToDefaultCallbackUrl = useCallback(() => {
-    const callbackUrl = config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
-    router.push(callbackUrl);
-  }, [config?.routes, router]);
-
-  const pushToDefaultAuthCallbackUrl = useCallback(() => {
-    const authCallbackUrl = config?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
-    router.push(authCallbackUrl);
-  }, [config?.routes, router]);
-
-  // Memoized checkAuthAndRedirect function
-  const checkAuthAndRedirect = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      const isAuthenticated = apiAccounts.isAuthenticated();
-
-      if (isAuthenticated) {
-        await loadCurrentProfile();
-        if (userRef.current) {
-          pushToDefaultCallbackUrl();
-        }
-      } else {
-        pushToDefaultAuthCallbackUrl();
-      }
-    } catch (error) {
-      authLogger.error('Failed to check authentication:', error);
-      // Use global error handler first
-      if (!handleGlobalAuthError(error, 'checkAuthAndRedirect')) {
-        clearAuthState('checkAuthAndRedirect');
+  }, [isAuthenticated, pathname, queryParams, config?.routes, router]);
+
+  // ── Profile actions (delegated to AccountsContext) ─────────────────────────
+
+  const loadCurrentProfile = useCallback(async (callerId?: string): Promise<void> => {
+    if (!auth.isAuthenticated()) {
+      throw new Error('No valid authentication token');
+    }
+    await accountsRef.current.refreshProfile({
+      callerId: callerId || 'AuthContext.loadCurrentProfile',
+    });
+  }, []);
+
+  const checkAuthAndRedirect = useCallback(async (): Promise<void> => {
+    const routes = configRef.current?.routes;
+    if (auth.isAuthenticated()) {
+      try {
+        await loadCurrentProfile('checkAuthAndRedirect');
+      } catch (error) {
+        authLogger.warn('checkAuthAndRedirect: profile load failed', error);
       }
-      pushToDefaultAuthCallbackUrl();
-    } finally {
-      setIsLoading(false);
+      router.push(routes?.defaultCallback || defaultRoutes.defaultCallback);
+    } else {
+      router.push(routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback);
     }
-  }, [loadCurrentProfile, clearAuthState, pushToDefaultCallbackUrl, pushToDefaultAuthCallbackUrl, handleGlobalAuthError]);
+  }, [loadCurrentProfile, router]);
+
+  // ── OTP login flow ─────────────────────────────────────────────────────────
 
-  // OTP methods - email only - now uses AccountsContext
   const requestOTP = useCallback(
     async (identifier: string, sourceUrl?: string): Promise<OTPRequestResult> => {
-      // Clear tokens before requesting OTP
-      apiAccounts.clearToken();
+      // A login attempt invalidates whatever session was lying around.
+      auth.clearSession();
 
       try {
-        const result = await accounts.requestOTP({
+        const result = await accountsRef.current.requestOTP({
           identifier,
           source_url: sourceUrl,
         });
 
-        // Track OTP request
         Analytics.event(AnalyticsEvent.AUTH_OTP_REQUEST, {
           category: AnalyticsCategory.AUTH,
           label: 'email',
@@ -531,35 +213,38 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
 
         return {
           success: true,
-          message: result.message || `OTP code sent to your email address`,
+          message: result.message || 'OTP code sent to your email address',
           webmail: result.webmail ?? null,
         };
       } catch (error) {
         authLogger.error('Request OTP error:', error);
 
         if (error instanceof APIError) {
-          const retryAfter = error.response?.retry_after ?? error.response?.retryAfter;
-          // Django returns { error, error_code, retry_after } — errorMessage reads 'detail'/'message' only
-          const message = error.response?.error || error.response?.detail || error.response?.message || error.errorMessage;
+          const body = error.response as
+            | { retry_after?: number; retryAfter?: number }
+            | undefined;
+          const retryAfter = body?.retry_after ?? body?.retryAfter;
           return {
             success: false,
             statusCode: error.statusCode,
-            message,
+            message: apiErrorMessage(error),
             retryAfter: typeof retryAfter === 'number' ? retryAfter : undefined,
           };
         }
-
-        return {
-          success: false,
-          message: 'Failed to send OTP',
-        };
+        return { success: false, message: 'Failed to send OTP' };
       }
     },
-    [accounts],
+    [],
   );
 
   const verifyOTP = useCallback(
-    async (identifier: string, otpCode: string, sourceUrl?: string, redirectUrl?: string, skipRedirect?: boolean): Promise<{
+    async (
+      identifier: string,
+      otpCode: string,
+      sourceUrl?: string,
+      redirectUrl?: string,
+      skipRedirect?: boolean,
+    ): Promise<{
       success: boolean;
       message: string;
       user?: UserProfile;
@@ -568,14 +253,12 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       should_prompt_2fa?: boolean;
     }> => {
       try {
-        // AccountsContext automatically saves tokens and refreshes profile
-        const result = await accounts.verifyOTP({
+        const result = await accountsRef.current.verifyOTP({
           identifier,
           otp: otpCode,
           source_url: sourceUrl,
         });
 
-        // Check if 2FA is required - return early with session info
         if (result.requires_2fa && result.session_id) {
           authLogger.info('2FA required, session:', result.session_id);
           return {
@@ -587,40 +270,32 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
           };
         }
 
-        // Verify that we got valid tokens (only required when 2FA is not needed)
         if (!result.access || !result.refresh) {
           authLogger.error('Verify OTP returned invalid response:', result);
-          return {
-            success: false,
-            message: 'Invalid OTP verification response',
-          };
+          return { success: false, message: 'Invalid OTP verification response' };
         }
 
-        // Save email identifier
         if (identifier.includes('@')) {
           setStoredEmail(identifier);
         }
 
-        // Small delay to ensure profile state is updated
-        await new Promise(resolve => setTimeout(resolve, 200));
-
-        // Track successful login
         Analytics.event(AnalyticsEvent.AUTH_LOGIN_SUCCESS, {
           category: AnalyticsCategory.AUTH,
           label: 'email',
         });
-
-        // Set user ID for future tracking
         if (result.user?.id) {
           Analytics.setUser(String(result.user.id));
         }
 
-        // Handle redirect logic (unless skipRedirect is true)
         if (!skipRedirect) {
-          // Priority: provided redirectUrl > saved redirect > config default
-          // Use hardPush for full page reload - ensures all React contexts reinitialize
+          // Priority: explicit redirectUrl > saved redirect > config default.
+          // hardPush = full page load so every context reinitializes cleanly.
           const savedRedirect = redirectManager.useAndClearRedirect();
-          const finalRedirectUrl = redirectUrl || savedRedirect || config?.routes?.defaultCallback || defaultRoutes.defaultCallback;
+          const finalRedirectUrl =
+            redirectUrl ||
+            savedRedirect ||
+            configRef.current?.routes?.defaultCallback ||
+            defaultRoutes.defaultCallback;
           authLogger.info('Redirecting after auth to:', finalRedirectUrl);
           router.hardPush(finalRedirectUrl);
         }
@@ -633,133 +308,89 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
         };
       } catch (error) {
         authLogger.error('Verify OTP error:', error);
-
-        // Track failed verification
         Analytics.event(AnalyticsEvent.AUTH_OTP_VERIFY_FAIL, {
           category: AnalyticsCategory.AUTH,
           label: 'email',
         });
-
         if (error instanceof APIError) {
-          const message = error.response?.error || error.response?.detail || error.response?.message || error.errorMessage;
-          return { success: false, message };
+          return { success: false, message: apiErrorMessage(error) };
         }
-        return {
-          success: false,
-          message: 'Failed to verify OTP',
-        };
+        return { success: false, message: 'Failed to verify OTP' };
       }
     },
-    [setStoredEmail, config?.routes?.defaultCallback, accounts, router],
+    [setStoredEmail, redirectManager, router],
   );
 
-  const refreshToken = useCallback(async (): Promise<{ success: boolean; message: string }> => {
-    try {
-      const refreshTokenValue = apiAccounts.getRefreshToken();
-      if (!refreshTokenValue) {
-        clearAuthState('refreshToken:noToken');
-
-        // Track session expired
-        Analytics.event(AnalyticsEvent.AUTH_SESSION_EXPIRED, {
-          category: AnalyticsCategory.AUTH,
-        });
-
-        return {
-          success: false,
-          message: 'No refresh token available',
-        };
-      }
-
-      await accounts.refreshToken(refreshTokenValue);
+  // ── Session actions ────────────────────────────────────────────────────────
 
-      // Track successful refresh
+  const refreshToken = useCallback(async (): Promise<{ success: boolean; message: string }> => {
+    // Same single-flight + Web-Locks path as the 401 interceptor — rotation,
+    // dedup and rotated-token persistence come for free.
+    const access = await auth.refreshNow();
+    if (access) {
       Analytics.event(AnalyticsEvent.AUTH_TOKEN_REFRESH, {
         category: AnalyticsCategory.AUTH,
       });
-
-      return {
-        success: true,
-        message: 'Token refreshed',
-      };
-    } catch (error) {
-      authLogger.error('Refresh token error:', error);
-      clearAuthState('refreshToken:error');
-
-      // Track refresh failure
-      Analytics.event(AnalyticsEvent.AUTH_TOKEN_REFRESH_FAIL, {
-        category: AnalyticsCategory.AUTH,
-      });
-
-      return {
-        success: false,
-        message: 'Error refreshing token',
-      };
+      return { success: true, message: 'Token refreshed' };
     }
-  }, [clearAuthState, accounts]);
+    Analytics.event(AnalyticsEvent.AUTH_TOKEN_REFRESH_FAIL, {
+      category: AnalyticsCategory.AUTH,
+    });
+    return { success: false, message: 'Error refreshing token' };
+  }, []);
 
   const logout = useCallback((): void => {
-    // Track logout
     Analytics.event(AnalyticsEvent.AUTH_LOGOUT, {
       category: AnalyticsCategory.AUTH,
     });
-
-    accounts.logout(); // Clear tokens and profile
-    setInitialized(true);
-    setIsLoading(false);
-
-    // Use hardReplace for full page reload + replace history
-    // This ensures contexts reinitialize AND back button won't return to protected page
-    const authCallbackUrl = config?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
+    accountsRef.current.logout(); // clears session + profile + cache
+    // hardReplace = full reload + history replace, so contexts reinitialize
+    // and Back doesn't return to a protected page.
+    const authCallbackUrl =
+      configRef.current?.routes?.defaultAuthCallback || defaultRoutes.defaultAuthCallback;
     router.hardReplace(authCallbackUrl);
-  }, [accounts, config?.routes?.defaultAuthCallback, router]);
+  }, [router]);
+
+  // ── Derived state ──────────────────────────────────────────────────────────
 
-  // Computed: Is admin user (staff or superuser)
-  const isAdminUser = useMemo(() => {
-    return Boolean(user?.is_staff || user?.is_superuser);
-  }, [user]);
+  const user = (accounts.profile as UserProfile | undefined) ?? null;
+  const isAdminUser = Boolean(user?.is_staff || user?.is_superuser);
 
   // Role-aware console verbosity: admins (and dev) get debug logs, regular
-  // users in production get a clean console (errors only). Re-applied whenever
-  // the admin status changes (login / logout / profile load).
+  // users in production get a clean console.
   useEffect(() => {
     applyRoleLogPolicy({ isAdmin: isAdminUser });
   }, [isAdminUser]);
 
-  // Profile management: Update profile data
   const updateProfile = useCallback(
-    async (data: { first_name?: string; last_name?: string; username?: string }): Promise<UserProfile> => {
-      const result = await accounts.partialUpdateProfile(data);
+    async (data: {
+      first_name?: string;
+      last_name?: string;
+      username?: string;
+    }): Promise<UserProfile> => {
+      const result = await accountsRef.current.partialUpdateProfile(data);
       return result as UserProfile;
     },
-    [accounts]
+    [],
   );
 
-  // Profile management: Upload avatar
-  const uploadAvatar = useCallback(
-    async (avatar: File | Blob): Promise<UserProfile> => {
-      const result = await accounts.uploadAvatar(avatar);
-      return result as UserProfile;
-    },
-    [accounts]
-  );
+  const uploadAvatar = useCallback(async (avatar: File | Blob): Promise<UserProfile> => {
+    const result = await accountsRef.current.uploadAvatar(avatar);
+    return result as UserProfile;
+  }, []);
 
-  // Memoized context value
   const value = useMemo<AuthContextType>(
     () => ({
       user,
       isLoading,
-      // Authenticated iff the session is locally alive (access valid OR a usable
-      // refresh token) — validated by `exp`, NOT by mere token presence. This is
-      // what makes the guard self-sufficient: an expired session reads as
-      // unauthenticated WITHOUT waiting for a server 401 (which CSP / a hung
-      // request / offline can swallow). `authTick` (in deps) forces recompute
-      // after tokens are cleared/set, since token state lives in storage.
-      isAuthenticated: isSessionAlive(),
+      // Reactive: flips via the store snapshot (token writes, refreshes,
+      // expiry timer, cross-tab/cross-store sync) — no ticks, no polling.
+      isAuthenticated,
       isAdminUser,
       loadCurrentProfile,
       checkAuthAndRedirect,
-      getToken: () => apiAccounts.getToken(),
-      getRefreshToken: () => apiAccounts.getRefreshToken(),
+      getToken: () => auth.getToken(),
+      getRefreshToken: () => auth.getRefreshToken(),
       getSavedEmail: () => storedEmail,
       saveEmail: setStoredEmail,
       clearSavedEmail: clearStoredEmail,
@@ -767,19 +398,17 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
       verifyOTP,
       refreshToken,
       logout,
-      // Redirect URL methods
       saveRedirectUrl: redirectManager.setRedirect,
       getRedirectUrl: redirectManager.getFinalRedirectUrl,
       clearRedirectUrl: redirectManager.clearRedirect,
       hasRedirectUrl: redirectManager.hasRedirect,
-      // Profile management
       updateProfile,
       uploadAvatar,
     }),
     [
       user,
       isLoading,
-      authTick, // recompute isAuthenticated when tokens are cleared/set
+      isAuthenticated,
       isAdminUser,
       loadCurrentProfile,
       checkAuthAndRedirect,
@@ -796,27 +425,19 @@ const AuthProviderInternal: React.FC<AuthProviderProps> = ({ children, config })
     ],
   );
 
-  return (
-    <AuthContext.Provider value={value}>
-      <SWRConfig value={swrConfig}>{children}</SWRConfig>
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 
-// Wrapper that provides AccountsContext
 /**
  * AuthProvider — wraps AccountsProvider + AuthProviderInternal.
  *
  * Memoised: re-renders only when `config` reference or `children` change.
- * Internal auth state is isolated inside AuthProviderInternal.
  */
 function AuthProviderRaw({ children, config, enabled = true }: AuthProviderProps) {
   if (!enabled) return <>{children}</>;
   return (
     <AccountsProvider>
-      <AuthProviderInternal config={config}>
-        {children}
-      </AuthProviderInternal>
+      <AuthProviderInternal config={config}>{children}</AuthProviderInternal>
     </AccountsProvider>
   );
 }
@@ -824,8 +445,8 @@ function AuthProviderRaw({ children, config, enabled = true }: AuthProviderProps
 export const AuthProvider = memo(AuthProviderRaw);
 
 /**
- * Default auth state for SSR/outside provider
- * Returns safe defaults that indicate "not authenticated, not loading"
+ * Default auth state for SSR/outside provider.
+ * Safe defaults that read as "not authenticated, not loading".
  */
 const defaultAuthState: AuthContextType = {
   user: null,
@@ -857,11 +478,11 @@ const defaultAuthState: AuthContextType = {
     authLogger.warn('useAuth: refreshToken called outside AuthProvider');
     return { success: false, message: 'AuthProvider not available' };
   },
-  logout: async (_options?: { skipConfirm?: boolean }) => {
+  logout: () => {
     authLogger.warn('useAuth: logout called outside AuthProvider');
   },
   saveRedirectUrl: () => {},
-  getRedirectUrl: () => null,
+  getRedirectUrl: () => '',
   clearRedirectUrl: () => {},
   hasRedirectUrl: () => false,
   updateProfile: async () => {
@@ -875,24 +496,20 @@ const defaultAuthState: AuthContextType = {
 };
 
 /**
- * Hook to access auth context
+ * Hook to access auth context.
  *
- * SSR-safe: Returns default unauthenticated state when called outside AuthProvider
- * (e.g., during static page generation or server-side rendering)
+ * SSR-safe: returns default unauthenticated state when called outside
+ * AuthProvider (e.g. during static page generation).
  */
 export const useAuth = (): AuthContextType => {
   const context = useContext(AuthContext);
-
   if (context === undefined) {
-    // SSR or outside provider - return safe defaults
-    // Log only in development to help debugging
     if (isBrowser && isDev) {
       authLogger.debug('useAuth called outside AuthProvider, returning default state');
     }
     return defaultAuthState;
   }
-
   return context;
 };
 
-export default AuthContext; 
+export default AuthContext;