Spaces:

holistic-ai
/

AgentGraph

Running

wu981526092 commited on Sep 17, 2025

Commit

ba6eacd

1 Parent(s): 5a2b931

Fix HF Spaces iframe session persistence with localStorage fallback

🔧 Enhanced Authentication for HF Spaces iframe:
- Added localStorage backup for user data in login success page
- Frontend sends localStorage data as header fallback
- Backend checks X-HF-User-Backup header when session fails
- Improved message passing between login window and parent
- Session data restored from localStorage backup

💡 This addresses the critical iframe cookie issues in HF Spaces
where session cookies may not persist properly across windows.

🔄 Flow: Login → localStorage backup → Header fallback → Session restore

Files changed (3) hide show

backend/dependencies.py +15 -1
backend/routers/auth.py +37 -20
frontend/src/context/AuthContext.tsx +27 -2

backend/dependencies.py CHANGED Viewed

@@ -115,7 +115,7 @@ def get_current_user_optional(request: Request) -> Optional[Dict[str, Any]]:
     try:
         user = request.session.get("user")
         if user:
-            logger.info(f"🔓 Found authenticated user: {user.get('username', 'unknown')}")
             return user
         else:
             # Add detailed debugging for session contents
@@ -134,6 +134,20 @@ def get_current_user_optional(request: Request) -> Optional[Dict[str, Any]]:
                 session_data = dict(request.session) if hasattr(request.session, 'keys') else {}
                 logger.warning(f"🔍 HF Session data: {session_data}")
                 # Check request headers that might affect session
                 relevant_headers = {
                     'host': request.headers.get('host'),

     try:
         user = request.session.get("user")
         if user:
+            logger.info(f"🔓 Found authenticated user in session: {user.get('username', 'unknown')}")
             return user
         else:
             # Add detailed debugging for session contents
                 session_data = dict(request.session) if hasattr(request.session, 'keys') else {}
                 logger.warning(f"🔍 HF Session data: {session_data}")
+                # FALLBACK: Check for localStorage backup data via special header
+                # Frontend can send this as a custom header when localStorage is available
+                localStorage_user = request.headers.get("X-HF-User-Backup")
+                if localStorage_user:
+                    try:
+                        import json
+                        backup_user = json.loads(localStorage_user)
+                        logger.info(f"🔄 Using localStorage backup user: {backup_user.get('username', 'unknown')}")
+                        # Store back in session for next requests
+                        request.session["user"] = backup_user
+                        return backup_user
+                    except (json.JSONDecodeError, ValueError) as e:
+                        logger.warning(f"Could not parse localStorage backup user: {e}")
                 # Check request headers that might affect session
                 relevant_headers = {
                     'host': request.headers.get('host'),

backend/routers/auth.py CHANGED Viewed

@@ -7,6 +7,7 @@ These routes are only active when running in HF Spaces environment.
 import os
 import logging
 import secrets
 from typing import Optional
 from pathlib import Path
 from fastapi import APIRouter, Request, Response, HTTPException
@@ -255,13 +256,17 @@ async def oauth_callback(request: Request, code: str, state: str):
     # For HF Spaces, show a success page that notifies parent window and closes
     if is_huggingface_space():
-        success_html = """
         <!DOCTYPE html>
         <html>
         <head>
             <title>Login Successful</title>
             <style>
-                body {
                     font-family: Arial, sans-serif;
                     text-align: center;
                     padding: 50px;
@@ -273,53 +278,65 @@ async def oauth_callback(request: Request, code: str, state: str):
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;
-                }
-                .success-card {
                     background: rgba(255,255,255,0.1);
                     padding: 40px;
                     border-radius: 20px;
                     backdrop-filter: blur(10px);
                     border: 1px solid rgba(255,255,255,0.2);
-                }
-                .checkmark {
                     font-size: 60px;
                     margin-bottom: 20px;
                     color: #4CAF50;
-                }
             </style>
         </head>
         <body>
             <div class="success-card">
                 <div class="checkmark">✅</div>
                 <h1>Login Successful!</h1>
                 <p>You have successfully logged in with your Hugging Face account.</p>
                 <p>This tab will close automatically...</p>
             </div>
             <script>
-                // Try to send message to parent window
-                try {
-                    if (window.opener) {
-                        window.opener.postMessage({
                             type: 'HF_LOGIN_SUCCESS',
                             timestamp: Date.now()
-                        }, window.location.origin);
                         console.log('✅ Sent login success message to parent window');
-                    }
-                } catch (e) {
                     console.log('Could not send message to parent:', e);
-                }
                 // Close this tab after a short delay
-                setTimeout(() => {
-                    try {
                         window.close();
-                    } catch (e) {
                         console.log('Could not close window:', e);
                         // Redirect to main app if we can't close
                         window.location.href = '/';
-                    }
-                }, 2000);
             </script>
         </body>
         </html>

 import os
 import logging
 import secrets
+import json
 from typing import Optional
 from pathlib import Path
 from fastapi import APIRouter, Request, Response, HTTPException
     # For HF Spaces, show a success page that notifies parent window and closes
     if is_huggingface_space():
+        # Get user data to pass to parent window
+        user_data = request.session.get("user", {})
+        user_json = json.dumps(user_data)
+        success_html = f"""
         <!DOCTYPE html>
         <html>
         <head>
             <title>Login Successful</title>
             <style>
+                body {{
                     font-family: Arial, sans-serif;
                     text-align: center;
                     padding: 50px;
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;
+                }}
+                .success-card {{
                     background: rgba(255,255,255,0.1);
                     padding: 40px;
                     border-radius: 20px;
                     backdrop-filter: blur(10px);
                     border: 1px solid rgba(255,255,255,0.2);
+                }}
+                .checkmark {{
                     font-size: 60px;
                     margin-bottom: 20px;
                     color: #4CAF50;
+                }}
             </style>
         </head>
         <body>
             <div class="success-card">
                 <div class="checkmark">✅</div>
                 <h1>Login Successful!</h1>
+                <p>Welcome, {user_data.get('name', 'User')}!</p>
                 <p>You have successfully logged in with your Hugging Face account.</p>
                 <p>This tab will close automatically...</p>
             </div>
             <script>
+                // Store user data in localStorage as backup (for iframe issues)
+                const userData = {user_json};
+                try {{
+                    localStorage.setItem('hf_user', JSON.stringify(userData));
+                    localStorage.setItem('hf_login_timestamp', Date.now().toString());
+                    console.log('✅ Stored user data in localStorage as backup');
+                }} catch (e) {{
+                    console.log('Could not store in localStorage:', e);
+                }}
+                // Try to send message to parent window with user data
+                try {{
+                    if (window.opener) {{
+                        window.opener.postMessage({{
                             type: 'HF_LOGIN_SUCCESS',
+                            userData: userData,
                             timestamp: Date.now()
+                        }}, window.location.origin);
                         console.log('✅ Sent login success message to parent window');
+                    }}
+                }} catch (e) {{
                     console.log('Could not send message to parent:', e);
+                }}
                 // Close this tab after a short delay
+                setTimeout(() => {{
+                    try {{
                         window.close();
+                    }} catch (e) {{
                         console.log('Could not close window:', e);
                         // Redirect to main app if we can't close
                         window.location.href = '/';
+                    }}
+                }}, 2000);
             </script>
         </body>
         </html>

frontend/src/context/AuthContext.tsx CHANGED Viewed

@@ -59,7 +59,20 @@ export function AuthProvider({ children }: AuthProviderProps) {
       setIsLoading(true);
       console.log("🔍 Checking authentication status...");
-      const response = await fetch("/auth/status");
       const data = await response.json();
       console.log("📊 Auth status response:", data);
@@ -160,9 +173,21 @@ export function AuthProvider({ children }: AuthProviderProps) {
       if (event.origin !== window.location.origin) {
         return; // Only accept messages from same origin
       }
       if (event.data.type === "HF_LOGIN_SUCCESS") {
         console.log("✅ Login success message received from popup");
         setShowLoginModal(false);
         // Refresh auth status after successful login
         setTimeout(() => checkAuthStatus(), 1000);

       setIsLoading(true);
       console.log("🔍 Checking authentication status...");
+      // Prepare headers with localStorage backup if available
+      const headers: Record<string, string> = {};
+      try {
+        const localUser = localStorage.getItem('hf_user');
+        if (localUser) {
+          // Send localStorage backup as header for HF Spaces iframe issues
+          headers['X-HF-User-Backup'] = localUser;
+          console.log("📦 Sending localStorage backup with auth check");
+        }
+      } catch (e) {
+        console.warn("Could not access localStorage:", e);
+      }
+      const response = await fetch("/auth/status", { headers });
       const data = await response.json();
       console.log("📊 Auth status response:", data);
       if (event.origin !== window.location.origin) {
         return; // Only accept messages from same origin
       }
       if (event.data.type === "HF_LOGIN_SUCCESS") {
         console.log("✅ Login success message received from popup");
+        // If user data is provided, store it locally as backup
+        if (event.data.userData) {
+          try {
+            localStorage.setItem('hf_user', JSON.stringify(event.data.userData));
+            localStorage.setItem('hf_login_timestamp', Date.now().toString());
+            console.log("📦 Stored user data in localStorage as backup");
+          } catch (e) {
+            console.warn("Could not store user data in localStorage:", e);
+          }
+        }
         setShowLoginModal(false);
         // Refresh auth status after successful login
         setTimeout(() => checkAuthStatus(), 1000);