Fix Supabase auth on HuggingFace with runtime config injection

FRRONTEEEND/App.tsx

@@ -21,8 +21,12 @@ const AppContent: React.FC = () => {
 
   // Handle launch console - redirect to auth if not logged in
   const handleLaunchConsole = () => {
-    // Allow both authenticated and guest users
-    setView('chat');
+    if (isAuthenticated) {
+      setView('chat');
+    } else {
+      // Redirect to auth page first
+      setView('auth');
+    }
   };
 
   // Show loading state only briefly
@@ -109,9 +113,9 @@ const AppContent: React.FC = () => {
           
           <button 
             onClick={handleLaunchConsole}
-            className="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm font-medium transition-all"
+            className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 border border-indigo-500/50 rounded-lg text-sm font-medium transition-all text-white"
           >
-            Launch Console
+            {isAuthenticated ? 'Launch Console' : 'Get Started'}
           </button>
         </div>
       </nav>

FRRONTEEEND/components/AuthPage.tsx

@@ -63,7 +63,7 @@ interface AuthPageProps {
 }
 
 export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
-  const { signIn, signUp, signInWithGoogle, signInWithGithub } = useAuth();
+  const { signIn, signUp, signInWithGoogle, signInWithGithub, isConfigured } = useAuth();
   const [mode, setMode] = useState<'signin' | 'signup'>('signin');
   const [currentStep, setCurrentStep] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -103,6 +103,12 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
 
   const handleSignIn = async (e: React.FormEvent) => {
     e.preventDefault();
+    
+    if (!isConfigured) {
+      setError('Authentication is not configured. Please contact the administrator.');
+      return;
+    }
+    
     setIsSubmitting(true);
     setError(null);
 
@@ -114,13 +120,22 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
         onSuccess?.();
       }
     } catch (err: any) {
-      setError(err.message || 'An error occurred');
+      if (err.message?.includes('Failed to fetch')) {
+        setError('Unable to connect to authentication server. Please try again later.');
+      } else {
+        setError(err.message || 'An error occurred');
+      }
     } finally {
       setIsSubmitting(false);
     }
   };
 
   const handleSignUp = async () => {
+    if (!isConfigured) {
+      setError('Authentication is not configured. Please contact the administrator.');
+      return;
+    }
+    
     setIsSubmitting(true);
     setError(null);
 
@@ -141,13 +156,22 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
         }, 2000);
       }
     } catch (err: any) {
-      setError(err.message || 'An error occurred');
+      if (err.message?.includes('Failed to fetch')) {
+        setError('Unable to connect to authentication server. Please try again later.');
+      } else {
+        setError(err.message || 'An error occurred');
+      }
     } finally {
       setIsSubmitting(false);
     }
   };
 
   const handleOAuthSignIn = async (provider: 'google' | 'github') => {
+    if (!isConfigured) {
+      setError('Authentication is not configured. Please contact the administrator.');
+      return;
+    }
+    
     setIsSubmitting(true);
     setError(null);
 
@@ -157,7 +181,11 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
         setError(error.message);
       }
     } catch (err: any) {
-      setError(err.message || 'An error occurred');
+      if (err.message?.includes('Failed to fetch')) {
+        setError('Unable to connect to authentication server. Please try again later.');
+      } else {
+        setError(err.message || 'An error occurred');
+      }
     } finally {
       setIsSubmitting(false);
     }

FRRONTEEEND/lib/supabase.ts

@@ -1,16 +1,49 @@
 import { createClient } from '@supabase/supabase-js';
 
-// Supabase configuration - these will be loaded from environment variables
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || '';
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+// Supabase configuration
+// For HuggingFace Spaces: secrets are injected at runtime via window.__SUPABASE_CONFIG__
+// For local dev: use import.meta.env (Vite build-time variables)
+declare global {
+  interface Window {
+    __SUPABASE_CONFIG__?: {
+      url: string;
+      anonKey: string;
+    };
+  }
+}
+
+// Try to get config from runtime injection first (HuggingFace), then fall back to Vite env vars
+const getSupabaseConfig = () => {
+  // Check for runtime config (injected by server)
+  if (typeof window !== 'undefined' && window.__SUPABASE_CONFIG__) {
+    return {
+      url: window.__SUPABASE_CONFIG__.url,
+      anonKey: window.__SUPABASE_CONFIG__.anonKey
+    };
+  }
+  
+  // Fall back to Vite build-time env vars
+  const url = (typeof import.meta !== 'undefined' && import.meta.env?.VITE_SUPABASE_URL) || '';
+  const anonKey = (typeof import.meta !== 'undefined' && import.meta.env?.VITE_SUPABASE_ANON_KEY) || '';
+  
+  return { url, anonKey };
+};
+
+const config = getSupabaseConfig();
+const supabaseUrl = config.url;
+const supabaseAnonKey = config.anonKey;
 
 // Check if Supabase is configured
 export const isSupabaseConfigured = () => {
-  return !!(supabaseUrl && supabaseAnonKey && supabaseUrl.includes('supabase'));
+  const cfg = getSupabaseConfig();
+  return !!(cfg.url && cfg.anonKey && cfg.url.includes('supabase') && !cfg.url.includes('placeholder'));
 };
 
-// Create Supabase client
-export const supabase = createClient(supabaseUrl || 'https://placeholder.supabase.co', supabaseAnonKey || 'placeholder');
+// Create Supabase client (use placeholder if not configured to avoid errors)
+export const supabase = createClient(
+  supabaseUrl || 'https://placeholder.supabase.co', 
+  supabaseAnonKey || 'placeholder-key'
+);
 
 // Types for our analytics
 export interface UsageAnalytics {

src/api/app.py

@@ -1132,7 +1132,28 @@ async def serve_frontend(full_path: str):
     # Default to index.html for client-side routing
     index_path = frontend_path / "index.html"
     if index_path.exists():
-        return FileResponse(index_path)
+        # Inject Supabase config at runtime for HuggingFace Spaces
+        supabase_url = os.getenv("VITE_SUPABASE_URL", "")
+        supabase_anon_key = os.getenv("VITE_SUPABASE_ANON_KEY", "")
+        
+        # Read the HTML file
+        html_content = index_path.read_text()
+        
+        # Inject the config script before </head>
+        config_script = f"""
+    <script>
+      window.__SUPABASE_CONFIG__ = {{
+        url: "{supabase_url}",
+        anonKey: "{supabase_anon_key}"
+      }};
+    </script>
+  </head>"""
+        
+        # Replace </head> with our config + </head>
+        html_content = html_content.replace("</head>", config_script)
+        
+        from fastapi.responses import HTMLResponse
+        return HTMLResponse(content=html_content)
     
     # Frontend not built
     raise HTTPException(