Fix: Implement complete fix

src/components/auth/AuthDiagnostics.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { authStorage } from '@/lib/authStorage';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+export function AuthDiagnostics() {
+  const [diagnostics, setDiagnostics] = useState<any>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const runDiagnostics = async () => {
+    const storageStatus = authStorage.getStorageStatus();
+    const { data: { session }, error: sessionError } = await supabase.auth.getSession();
+    
+    const results = {
+      timestamp: new Date().toISOString(),
+      storage: storageStatus,
+      session: {
+        exists: !!session,
+        user: session?.user?.email || null,
+        expiresAt: session?.expires_at || null,
+        error: sessionError?.message || null,
+      },
+      network: {
+        online: navigator.onLine,
+      },
+      environment: {
+        url: window.location.href,
+        isIframe: window.self !== window.top,
+        cookiesEnabled: navigator.cookieEnabled,
+      }
+    };
+    
+    setDiagnostics(results);
+    console.log('[Auth Diagnostics]', results);
+  };
+
+  useEffect(() => {
+    // Run diagnostics on mount if there's a session issue
+    const checkSession = async () => {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        await runDiagnostics();
+        setIsOpen(true);
+      }
+    };
+    
+    // Only run if not already authenticated
+    const timer = setTimeout(checkSession, 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isOpen || !diagnostics) return null;
+
+  return (
+    <Card className="fixed bottom-4 right-4 w-96 z-50 shadow-lg">
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span>Authentication Diagnostics</span>
+          <Button variant="ghost" size="sm" onClick={() => setIsOpen(false)}>✕</Button>
+        </CardTitle>
+        <CardDescription>Debug information for session issues</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2 text-sm">
+        <div>
+          <strong>Storage Type:</strong>{' '}
+          <Badge variant={diagnostics.storage.persistent ? 'default' : 'destructive'}>
+            {diagnostics.storage.type}
+          </Badge>
+        </div>
+        <div>
+          <strong>Session Status:</strong>{' '}
+          <Badge variant={diagnostics.session.exists ? 'default' : 'destructive'}>
+            {diagnostics.session.exists ? 'Active' : 'None'}
+          </Badge>
+        </div>
+        {diagnostics.session.user && (
+          <div className="text-xs text-muted-foreground">
+            User: {diagnostics.session.user}
+          </div>
+        )}
+        {diagnostics.session.error && (
+          <div className="text-xs text-destructive">
+            Error: {diagnostics.session.error}
+          </div>
+        )}
+        <div>
+          <strong>Cookies Enabled:</strong>{' '}
+          <Badge variant={diagnostics.environment.cookiesEnabled ? 'default' : 'destructive'}>
+            {diagnostics.environment.cookiesEnabled ? 'Yes' : 'No'}
+          </Badge>
+        </div>
+        {diagnostics.environment.isIframe && (
+          <div className="text-xs text-yellow-600 dark:text-yellow-400">
+            ⚠️ Running in iframe - storage may be restricted
+          </div>
+        )}
+        <Button onClick={runDiagnostics} variant="outline" size="sm" className="w-full mt-2">
+          Refresh Diagnostics
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

src/components/auth/StorageWarning.tsx

@@ -0,0 +1,26 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import { authStorage } from "@/lib/authStorage";
+import { useEffect, useState } from "react";
+
+export function StorageWarning() {
+  const [showWarning, setShowWarning] = useState(false);
+
+  useEffect(() => {
+    const status = authStorage.getStorageStatus();
+    setShowWarning(!status.persistent);
+  }, []);
+
+  if (!showWarning) return null;
+
+  return (
+    <Alert variant="destructive" className="mb-4">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Storage Restricted</AlertTitle>
+      <AlertDescription>
+        Your browser is blocking session storage. You'll need to sign in again if you reload the page.
+        To fix this, please enable cookies and local storage for this site.
+      </AlertDescription>
+    </Alert>
+  );
+}