fix(nav): rewrite auth logic — set loaded=true on SIGNED_IN immediately, fetch profile in background

web/components/nav.tsx

@@ -8,7 +8,7 @@ import {
   ScanText, Settings, LogIn, Zap, Sparkles, CreditCard, UserCircle,
   LogOut, Users
 } from "lucide-react";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 
 interface NavLink {
@@ -28,80 +28,103 @@ export function Nav() {
   const isAdmin = userRole === "admin";
   const hasTeam = !!userTeam;
 
-  // FIX v4.3: Extracted into a reusable function so it can be called
-  // both on mount AND when Supabase fires auth state changes.
-  const refreshAuth = useCallback(async () => {
-    try {
-      const supabase = createClient();
-      const { data: { user }, error } = await supabase.auth.getUser();
-
-      if (error || !user) {
-        console.log("[ClauseGuard Nav] No user session:", error?.message || "not logged in");
-        setUserEmail(null);
-        setUserRole(null);
-        setUserTeam(null);
-        setLoaded(true);
-        return;
-      }
+  useEffect(() => {
+    let cancelled = false;
+    const supabase = createClient();
+
+    async function checkAuth() {
+      try {
+        const { data: { session } } = await supabase.auth.getSession();
+
+        if (cancelled) return;
 
-      setUserEmail(user.email || null);
-
-      // FIX v4.3: Properly check Supabase error response (it doesn't throw)
-      const { data: profile, error: profileError } = await supabase
-        .from("profiles")
-        .select("role, team_id")
-        .eq("id", user.id)
-        .single();
-
-      if (profileError) {
-        console.error("[ClauseGuard Nav] Profile fetch error:", profileError.message, profileError.code);
-        setUserRole("user");
-        setUserTeam(null);
-      } else {
-        console.log("[ClauseGuard Nav] Profile loaded:", { role: profile?.role, team_id: profile?.team_id });
-        setUserRole(profile?.role || "user");
-        setUserTeam(profile?.team_id || null);
+        if (!session?.user) {
+          setUserEmail(null);
+          setUserRole(null);
+          setUserTeam(null);
+          if (!loaded) setLoaded(true);
+          return;
+        }
+
+        const user = session.user;
+        setUserEmail(user.email || null);
+
+        // Fetch profile for role/team — use getSession instead of getUser
+        // to avoid extra network call
+        const { data: profile, error: profileError } = await supabase
+          .from("profiles")
+          .select("role, team_id")
+          .eq("id", user.id)
+          .single();
+
+        if (cancelled) return;
+
+        if (profileError) {
+          console.error("[ClauseGuard Nav] Profile error:", profileError.message);
+          // Even if profile fails, still show the user as logged in
+          setUserRole("user");
+          setUserTeam(null);
+        } else {
+          setUserRole(profile?.role || "user");
+          setUserTeam(profile?.team_id || null);
+        }
+      } catch (err) {
+        console.error("[ClauseGuard Nav] Auth check error:", err);
+        if (!cancelled) {
+          setUserEmail(null);
+          setUserRole(null);
+          setUserTeam(null);
+        }
       }
-    } catch {
-      // Supabase client init error (env vars missing)
+      if (!cancelled) setLoaded(true);
     }
-    setLoaded(true);
-  }, []);
 
-  useEffect(() => {
-    // Initial auth check
-    refreshAuth();
-
-    // FIX v4.3: Listen to Supabase onAuthStateChange.
-    // This fires on SIGNED_IN, SIGNED_OUT, TOKEN_REFRESHED, etc.
-    // Without this, Nav never updates after login because the useEffect
-    // only ran once on mount with [] deps.
-    let subscription: { unsubscribe: () => void } | null = null;
-    try {
-      const supabase = createClient();
-      const { data } = supabase.auth.onAuthStateChange((event) => {
-        console.log("[ClauseGuard Nav] Auth state changed:", event);
-        // Re-fetch on any auth event
-        if (event === "SIGNED_IN" || event === "SIGNED_OUT" || event === "TOKEN_REFRESHED" || event === "INITIAL_SESSION") {
-          refreshAuth();
+    // Check auth immediately
+    checkAuth();
+
+    // Listen for auth changes (login, logout, token refresh)
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        console.log("[ClauseGuard Nav] Auth event:", event);
+
+        if (event === "SIGNED_OUT" || !session?.user) {
+          setUserEmail(null);
+          setUserRole(null);
+          setUserTeam(null);
+          setLoaded(true);
+          return;
         }
-      });
-      subscription = data.subscription;
-    } catch {
-      // env vars missing
-    }
+
+        if (event === "SIGNED_IN" || event === "TOKEN_REFRESHED" || event === "INITIAL_SESSION") {
+          // We have a session — update email immediately, then fetch profile
+          setUserEmail(session.user.email || null);
+          setLoaded(true); // Show logged-in state immediately (even before profile loads)
+
+          // Fetch profile in background
+          supabase
+            .from("profiles")
+            .select("role, team_id")
+            .eq("id", session.user.id)
+            .single()
+            .then(({ data: profile, error }) => {
+              if (cancelled) return;
+              if (error) {
+                console.error("[ClauseGuard Nav] Profile error:", error.message);
+                setUserRole("user");
+              } else {
+                setUserRole(profile?.role || "user");
+                setUserTeam(profile?.team_id || null);
+              }
+            });
+        }
+      }
+    );
 
     return () => {
-      subscription?.unsubscribe();
+      cancelled = true;
+      subscription.unsubscribe();
     };
-  }, [refreshAuth]);
-
-  // FIX v4.3: Also re-check when pathname changes (covers router.push after login)
-  useEffect(() => {
-    if (loaded) {
-      refreshAuth();
-    }
-  }, [pathname, loaded, refreshAuth]);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   async function handleSignOut() {
     try {