Implement dynamic runtime configuration to fetch Supabase secrets from backend

Dockerfile

@@ -2,16 +2,6 @@
 FROM node:20-alpine AS frontend-builder
 WORKDIR /app/frontend
 
-# Declare build arguments (Hugging Face passes secrets as build args)
-ARG VITE_SUPABASE_URL
-ARG VITE_SUPABASE_ANON_KEY
-ARG SUPABASE_URL
-ARG SUPABASE_KEY
-
-# Expose them to Vite compilation environment, with fallback to Streamlit secret names
-ENV VITE_SUPABASE_URL=${VITE_SUPABASE_URL:-$SUPABASE_URL}
-ENV VITE_SUPABASE_ANON_KEY=${VITE_SUPABASE_ANON_KEY:-$SUPABASE_KEY}
-
 
 # Copy package files and install dependencies
 COPY algospaced-ui/package*.json ./

algospaced-ui/src/main.tsx

@@ -3,8 +3,27 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import { initializeSupabase } from './supabaseClient'
+
+async function init() {
+  try {
+    const apiBase = import.meta.env.VITE_API_BASE_URL || '';
+    const res = await fetch(`${apiBase}/api/config`);
+    if (!res.ok) throw new Error("Failed to load runtime configuration");
+    const config = await res.json();
+    initializeSupabase(config.supabaseUrl, config.supabaseAnonKey);
+  } catch (err) {
+    console.error("Failed to load config from API, falling back to build environment:", err);
+    const url = import.meta.env.VITE_SUPABASE_URL || '';
+    const key = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+    initializeSupabase(url, key);
+  }
+
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  )
+}
+
+init();

algospaced-ui/src/supabaseClient.ts

@@ -1,7 +1,27 @@
 import { createClient } from '@supabase/supabase-js';
 
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || '';
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+let supabaseInstance: any = null;
 
-export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+export function initializeSupabase(url: string, key: string) {
+  if (url && key) {
+    supabaseInstance = createClient(url, key);
+  }
+}
+
+// Proxy wrapper that delegates all calls to the dynamically initialized instance
+export const supabase = new Proxy({} as any, {
+  get(target, prop) {
+    if (!supabaseInstance) {
+      // Fallback: try loading from build-time environment if not initialized yet
+      const url = import.meta.env.VITE_SUPABASE_URL || '';
+      const key = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+      if (url && key) {
+        supabaseInstance = createClient(url, key);
+      } else {
+        throw new Error("Supabase client is not initialized. Please call initializeSupabase(url, key) first.");
+      }
+    }
+    return supabaseInstance[prop];
+  }
+});
 

main.py

@@ -119,6 +119,13 @@ def get_supabase_client(authorization: str = Header(None)) -> Client:
     except Exception as e:
         raise HTTPException(status_code=401, detail=f"Authentication failed: {str(e)}")
 
+@app.get("/api/config")
+def get_public_config():
+    return {
+        "supabaseUrl": SUPABASE_URL,
+        "supabaseAnonKey": SUPABASE_KEY
+    }
+
 @app.get("/api/streak")
 def get_streak(client: Client = Depends(get_supabase_client)):
     streak_data = db.get_active_streak(client)