Spaces:

holistic-ai
/

AgentGraph

Running

wu981526092 commited on Sep 17, 2025

Commit

5a2b931

1 Parent(s): 3c7f84c

Implement HF Spaces best practice: new tab login flow

🔧 HF Spaces OAuth Best Practice:
- Login button now opens in new tab (target='_blank')
- Added success page that notifies parent window
- Implemented message passing between tabs
- Added periodic auth status checking during login
- Beautiful success page with auto-close functionality

📚 Based on HF documentation:
'You should use target=_blank on the button to open the
sign-in page in a new tab, unless you run the space outside
its iframe. Otherwise, you might encounter issues with cookies.'

This should resolve the session cookie issues in iframe environment.

Files changed (3) hide show

backend/routers/auth.py +75 -2
frontend/src/components/auth/LoginModal.tsx +18 -13
frontend/src/context/AuthContext.tsx +26 -1

backend/routers/auth.py CHANGED Viewed

@@ -253,8 +253,81 @@ async def oauth_callback(request: Request, code: str, state: str):
     logger.info(f"User logged in: {user_info.get('name')} ({user_info.get('login')})")
-    # Redirect to main application
-    return RedirectResponse(url="/", status_code=302)
 @router.get("/logout")

     logger.info(f"User logged in: {user_info.get('name')} ({user_info.get('login')})")
+    # 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;
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    color: white;
+                    margin: 0;
+                    min-height: 100vh;
+                    display: flex;
+                    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>
+        """
+        return HTMLResponse(content=success_html)
+    else:
+        # For local development, redirect normally
+        return RedirectResponse(url="/", status_code=302)
 @router.get("/logout")

frontend/src/components/auth/LoginModal.tsx CHANGED Viewed

@@ -63,19 +63,24 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
             {/* CTA Section */}
             <div className="space-y-4">
-              <button
-                onClick={handleLogin}
-                className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2"
-              >
-                {isHFSpaces ? (
-                  <>
-                    Login with Hugging Face
-                    <ExternalLink className="w-4 h-4" />
-                  </>
-                ) : (
-                  "Continue to Platform"
-                )}
-              </button>
               <div className="bg-muted/30 p-4 rounded-lg">
                 <p className="text-sm text-muted-foreground">

             {/* CTA Section */}
             <div className="space-y-4">
+              {isHFSpaces ? (
+                <a
+                  href="/auth/login"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2"
+                >
+                  Login with Hugging Face
+                  <ExternalLink className="w-4 h-4" />
+                </a>
+              ) : (
+                <button
+                  onClick={handleLogin}
+                  className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2"
+                >
+                  Continue to Platform
+                </button>
+              )}
               <div className="bg-muted/30 p-4 rounded-lg">
                 <p className="text-sm text-muted-foreground">

frontend/src/context/AuthContext.tsx CHANGED Viewed

@@ -155,12 +155,37 @@ export function AuthProvider({ children }: AuthProviderProps) {
       }
     };
     window.addEventListener("auth-required", handleAuthRequired);
     return () => {
       window.removeEventListener("auth-required", handleAuthRequired);
     };
-  }, []);
   const value: AuthContextType = {
     user,

       }
     };
+    // Listen for messages from login popup/tab
+    const handleMessage = (event: MessageEvent) => {
+      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);
+      }
+    };
+    // Periodically check auth status while login modal is open (for new tab flow)
+    const interval = showLoginModal
+      ? setInterval(() => {
+          console.log("🔄 Periodic auth check while login modal is open");
+          checkAuthStatus();
+        }, 2000)
+      : null;
     window.addEventListener("auth-required", handleAuthRequired);
+    window.addEventListener("message", handleMessage);
     return () => {
       window.removeEventListener("auth-required", handleAuthRequired);
+      window.removeEventListener("message", handleMessage);
+      if (interval) clearInterval(interval);
     };
+  }, [showLoginModal]);
   const value: AuthContextType = {
     user,