Update Nginx configuration and mock mode initialization for improved backend handling

- Modified Nginx configuration to trust the outer reverse proxy's X-Forwarded-Proto header, enhancing protocol handling.
- Updated initMockMode function in mock.ts to use the backend health endpoint for improved error handling and timeout management, ensuring a more robust fallback to mock data when the backend is unreachable.

nginx.conf

@@ -38,7 +38,9 @@ server {
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
+        # Trust the outer reverse proxy's X-Forwarded-Proto when present,
+        # otherwise fall back to the connection scheme.
+        proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
         proxy_read_timeout 300s;
         proxy_send_timeout 300s;
 

src/utils/mock.ts

@@ -25,30 +25,38 @@ export let USE_MOCK: boolean =
 
 /**
  * Call once at app startup (before mounting).
- * Pings the backend — if unreachable and USE_MOCK is false,
+ * Pings the backend health endpoint — if unreachable and USE_MOCK
- * flips USE_MOCK to true so the whole app falls back to mock data.
+ * is false, flips USE_MOCK to true so the whole app falls back to
+ * mock data.
  */
 export async function initMockMode(): Promise<void> {
   // Nothing to check if mock is already on
   if (USE_MOCK) return
 
-  const apiUrl = import.meta.env.VITE_API_URL || import.meta.env.VITE_INDEEHUB_API_URL || 'http://localhost:4000'
+  // Use the self-hosted API path (proxied by nginx in production)
+  const apiBase = import.meta.env.VITE_API_URL || import.meta.env.VITE_INDEEHUB_API_URL || 'http://localhost:4000'
+  const healthUrl = `${apiBase}/nostr-auth/health`
 
   try {
     const controller = new AbortController()
-    const timeout = setTimeout(() => controller.abort(), 2000)
+    const timeout = setTimeout(() => controller.abort(), 3000)
 
-    await fetch(apiUrl, {
+    const response = await fetch(healthUrl, {
-      method: 'HEAD',
+      method: 'GET',
       signal: controller.signal,
     })
 
     clearTimeout(timeout)
+
+    if (!response.ok) {
+      throw new Error(`Health check returned ${response.status}`)
+    }
+
     // Backend is reachable — keep USE_MOCK = false
     console.log(
       '%c✅ Backend connected at %s — real mode active',
       'color: #22c55e; font-weight: bold',
-      apiUrl,
+      apiBase,
     )
   } catch {
     // Backend is not reachable — flip to mock
@@ -57,7 +65,7 @@ export async function initMockMode(): Promise<void> {
       '%c⚠️ Backend not reachable at %s — auto-switching to mock mode.\n' +
       '   Start the backend (npm run dev:full) for real API/payments.',
       'color: #f59e0b; font-weight: bold',
-      apiUrl,
+      apiBase,
     )
   }
 }