fix: stabilize auth session persistence and prevent loading deadlocks

Author: aboderinsamuel

components/AuthProvider.tsx

@@ -3,7 +3,6 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { User } from "@/lib/types";
 import {
-  getCurrentUser,
   logoutUser,
   registerUser,
   authenticateUser,
@@ -54,7 +53,6 @@ const AuthContext = createContext<AuthContextValue | undefined>(undefined);
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  // Always start null - this matches the server render and prevents hydration mismatch
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -66,46 +64,40 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   useEffect(() => {
     let mounted = true;
 
-    // Fast path: restore from sessionStorage immediately (no network, no flash)
+    // Fast path: show cached user instantly while auth initializes
     const cached = readUserCache();
     if (cached) {
       setUser(cached);
       setLoading(false);
     }
 
-    // Then validate with Supabase in background (with timeout to prevent stuck loading)
-    const initializeAuth = async () => {
-      try {
-        const timeoutPromise = new Promise<null>((resolve) =>
-          setTimeout(() => resolve(null), 8000)
-        );
-        const currentUser = await Promise.race([getCurrentUser(), timeoutPromise]);
-        if (mounted) setUserAndCache(currentUser);
-      } catch {
-        if (mounted) setUserAndCache(null);
-      } finally {
-        if (mounted) setLoading(false);
-      }
-    };
-
-    initializeAuth();
-
+    // onAuthStateChange is the single source of truth for auth state.
+    // It fires INITIAL_SESSION immediately on registration, so no separate
+    // initializeAuth() call is needed. Having two concurrent getUser() calls
+    // was causing token refresh races that invalidated sessions via Supabase's
+    // refresh token reuse detection.
     const unsubscribe = onAuthStateChange((updatedUser) => {
-      if (mounted) setUserAndCache(updatedUser);
+      if (mounted) {
+        setUserAndCache(updatedUser);
+        setLoading(false);
+      }
     });
 
+    // Safety fallback: resolve loading if INITIAL_SESSION never fires
+    const timeout = setTimeout(() => {
+      if (mounted) setLoading(false);
+    }, 8000);
+
     return () => {
       mounted = false;
+      clearTimeout(timeout);
       unsubscribe();
     };
   }, []);
 
   const login = async (email: string, password: string) => {
     const res = await authenticateUser(email, password);
-    if (res.ok) {
-      const currentUser = await getCurrentUser();
-      setUserAndCache(currentUser);
-    }
+    // onAuthStateChange fires SIGNED_IN and updates user state automatically
     return res;
   };
 
@@ -115,10 +107,6 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
     displayName?: string
   ) => {
     const res = await registerUser(email, password, displayName);
-    if (res.ok && !res.needsEmailConfirmation) {
-      const currentUser = await getCurrentUser();
-      setUserAndCache(currentUser);
-    }
     return res;
   };
 

lib/PromptsContext.tsx

@@ -51,7 +51,7 @@ export function PromptsProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     loadPrompts();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user]);
+  }, [user?.id]);
 
   const addOptimistic = (prompt: Prompt) => {
     setPrompts((prev) => [prompt, ...prev]);

lib/auth.ts

@@ -187,27 +187,9 @@ export async function logoutUser(): Promise<void> {
       console.error("[auth] Logout error:", error);
     }
 
-    // Clear all session storage (including auth tokens)
-    if (typeof window !== 'undefined') {
-      try {
-        window.sessionStorage.clear();
-        console.log("[auth] Session storage cleared");
-      } catch (e) {
-        console.warn("[auth] Could not clear session storage:", e);
-      }
-    }
-    
     console.log("[auth] Logout successful");
   } catch (err) {
     console.error("[auth] Logout error:", err);
-    // Even if logout fails, clear session storage
-    if (typeof window !== 'undefined') {
-      try {
-        window.sessionStorage.clear();
-      } catch (e) {
-        console.warn("[auth] Could not clear session storage:", e);
-      }
-    }
   }
 }
 
@@ -245,27 +227,36 @@ export async function deleteAccount(): Promise<
 
 
  // Listen to auth state changes
- 
+
 export function onAuthStateChange(
   callback: (user: User | null) => void
 ): () => void {
   const {
     data: { subscription },
-  } = supabase.auth.onAuthStateChange(async (event, session) => {
+  } = supabase.auth.onAuthStateChange((event, session) => {
     console.log("[auth] Auth state change event:", event, "Session exists:", !!session);
-    
-    if (event === 'SIGNED_OUT') {
-      console.log("[auth] User signed out");
+
+    if (!session?.user) {
       callback(null);
       return;
     }
-    
-    if (session?.user) {
-      const user = await getCurrentUser();
-      callback(user);
-    } else {
-      callback(null);
-    }
+
+    // Build user directly from the session — no extra network calls.
+    // All needed data (id, email, display_name, timestamps) is already present
+    // in the session object. Doing an async DB fetch here caused timing bugs:
+    // multiple in-flight fetches on rapid page loads led to stale callbacks
+    // calling setLoading(false) out of order and leaving the app stuck.
+    const authUser = session.user;
+    callback({
+      id: authUser.id,
+      email: authUser.email || "",
+      displayName:
+        (authUser.user_metadata?.display_name as string | undefined) ||
+        authUser.email?.split("@")[0] ||
+        "User",
+      createdAt: authUser.created_at,
+      updatedAt: authUser.updated_at || authUser.created_at,
+    });
   });
 
   return () => {

lib/supabase.ts

@@ -35,7 +35,6 @@ export const supabase = createClient<Database>(
       storageKey: 'closednote-auth',
       autoRefreshToken: true,
       detectSessionInUrl: true,
-      flowType: 'pkce',
     },
     global: {
       headers: {