Fix: Resolve authentication state recognition issues

src/components/auth/AuthButtons.tsx

@@ -12,6 +12,7 @@ export function AuthButtons() {
   const {
     user,
     profile,
+    loading,
     signOut
   } = useAuth();
   const navigate = useNavigate();
@@ -40,10 +41,21 @@ export function AuthButtons() {
       setLoggingOut(false);
     }
   };
+  
+  // Show loading skeleton during auth check
+  if (loading) {
+    return (
+      <div className="flex gap-2 items-center">
+        <div className="h-8 w-16 bg-muted animate-pulse rounded" />
+        <div className="h-8 w-8 bg-muted animate-pulse rounded-full" />
+      </div>
+    );
+  }
+  
   if (!user) {
     return (
       <>
-      <Button 
+      <Button
         variant="ghost" 
         size="sm" 
         onClick={() => {

src/components/auth/AuthModal.tsx

@@ -78,6 +78,10 @@ export function AuthModal({ open, onOpenChange, defaultTab = 'signin' }: AuthMod
         title: "Welcome back!",
         description: "You've been signed in successfully."
       });
+      
+      // Wait for auth state to propagate before closing
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
       onOpenChange(false);
     } catch (error: any) {
       setSignInCaptchaKey(prev => prev + 1);

src/hooks/useAuth.tsx

@@ -93,6 +93,8 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
     const {
       data: { subscription },
     } = supabase.auth.onAuthStateChange((event, session) => {
+      console.log('[Auth] State change:', event, 'User:', session?.user?.email || 'none');
+      
       if (!isMountedRef.current) return;
       
       const currentEmail = session?.user?.email;
@@ -100,6 +102,7 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
       
       // Explicitly handle SIGNED_IN event for iframe compatibility
       if (event === 'SIGNED_IN' && session) {
+        console.log('[Auth] SIGNED_IN detected, setting session and user');
         setSession(session);
         setUser(session.user);
         setLoading(false);

src/lib/authStorage.ts

@@ -14,7 +14,7 @@ class AuthStorage {
       localStorage.removeItem('__supabase_test__');
       this.storage = localStorage;
       this.storageType = 'localStorage';
-      console.log('[AuthStorage] Using localStorage');
+      console.log('[AuthStorage] Using localStorage ✓');
     } catch {
       // Try sessionStorage as fallback
       try {
@@ -22,11 +22,12 @@ class AuthStorage {
         sessionStorage.removeItem('__supabase_test__');
         this.storage = sessionStorage;
         this.storageType = 'sessionStorage';
-        console.log('[AuthStorage] localStorage blocked, using sessionStorage');
+        console.warn('[AuthStorage] localStorage blocked, using sessionStorage ⚠️');
       } catch {
         // Use in-memory storage as last resort
         this.storageType = 'memory';
-        console.log('[AuthStorage] Both localStorage and sessionStorage blocked, using in-memory storage');
+        console.error('[AuthStorage] Both localStorage and sessionStorage blocked, using in-memory storage ⛔');
+        console.error('[AuthStorage] Sessions will NOT persist across page reloads!');
       }
     }
   }