auth button fixed

app.py

@@ -7,12 +7,18 @@ import subprocess
 # Python port (7861). Stale Node workers from prior restarts can block it.
 os.environ["GRADIO_NUM_PORTS"] = "20"
 
+import time
 from pathlib import Path
+from typing import Any
 
 import gradio as gr
+from fastapi import Request
 from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from gradio import Server
+from gradio.blocks import Blocks
+from gradio.components import LoginButton
+from gradio.events import api as gr_api
 
 from ui import server_api
 
@@ -27,6 +33,29 @@ async def homepage() -> str:
     return (ASSETS_DIR / "index.html").read_text(encoding="utf-8")
 
 
+@app.get("/api/auth/status")
+async def auth_status(request: Request) -> dict[str, Any]:
+    session = getattr(request, "session", None)
+    if session is None:
+        return {"logged_in": False}
+
+    oauth_info = session.get("oauth_info")
+    if not oauth_info:
+        return {"logged_in": False}
+
+    expires_at = oauth_info.get("expires_at")
+    if expires_at is not None and expires_at <= time.time():
+        session.pop("oauth_info", None)
+        return {"logged_in": False}
+
+    userinfo = oauth_info.get("userinfo") or {}
+    return {
+        "logged_in": True,
+        "username": userinfo.get("preferred_username"),
+        "name": userinfo.get("name"),
+    }
+
+
 @app.api(name="get_intake_choices")
 def api_get_intake_choices() -> dict:
     return server_api.get_intake_choices()
@@ -95,6 +124,20 @@ def _cleanup_stale_gradio_nodes() -> None:
             pass
 
 
+def _launch_with_oauth(**kwargs: Any):
+    """Launch with a hidden LoginButton so HF OAuth routes are registered."""
+    with Blocks() as blocks:
+        LoginButton(visible=False)
+        for fn, api_kwargs in app._deferred_apis:
+            gr_api(fn=fn, **api_kwargs)
+
+    os.environ["GRADIO_SERVER_MODE_ENABLED"] = "1"
+    return blocks.launch(_app=app, **kwargs)
+
+
+app.launch = _launch_with_oauth  # type: ignore[method-assign]
+
+
 if __name__ == "__main__":
     _cleanup_stale_gradio_nodes()
     app.launch(show_error=True)

assets/app.js

@@ -40,8 +40,41 @@ const els = {
   intakeForm: document.getElementById("intake-form"),
   createPrompt: document.getElementById("create-prompt"),
   personaList: document.getElementById("persona-list"),
+  authLogin: document.getElementById("auth-login"),
+  authLogout: document.getElementById("auth-logout"),
 };
 
+function authRedirectTarget() {
+  return encodeURIComponent(window.location.pathname + window.location.search);
+}
+
+function updateAuthUI({ logged_in: loggedIn, username }) {
+  const target = authRedirectTarget();
+  if (loggedIn) {
+    els.authLogin.hidden = true;
+    els.authLogout.hidden = false;
+    els.authLogout.textContent = username ? `Log out (${username})` : "Log out";
+    els.authLogout.href = `/logout?_target_url=${target}`;
+  } else {
+    els.authLogin.hidden = false;
+    els.authLogout.hidden = true;
+    els.authLogin.href = `/login/huggingface?_target_url=${target}`;
+  }
+}
+
+async function loadAuthStatus() {
+  try {
+    const response = await fetch("/api/auth/status", { credentials: "include" });
+    if (!response.ok) {
+      updateAuthUI({ logged_in: false });
+      return;
+    }
+    updateAuthUI(await response.json());
+  } catch {
+    updateAuthUI({ logged_in: false });
+  }
+}
+
 function activeStatusBanner() {
   return state.view === "form" ? els.formStatus : els.statusBanner;
 }
@@ -314,5 +347,5 @@ els.chatInput.addEventListener("keydown", (event) => {
   }
 });
 
-await loadChoices();
+await Promise.all([loadChoices(), loadAuthStatus()]);
 renderMessages();

assets/index.html

@@ -21,8 +21,12 @@
           </p>
         </div>
         <div class="auth-actions">
-          <a href="/login/huggingface">Log in with Hugging Face</a>
-          <a href="/logout">Log out</a>
+          <a id="auth-login" class="auth-button" href="/login/huggingface" hidden>
+            Log in with Hugging Face
+          </a>
+          <a id="auth-logout" class="auth-button" href="/logout" hidden>
+            Log out
+          </a>
         </div>
       </header>
 

assets/server.css

@@ -46,6 +46,10 @@ a {
   align-items: center;
 }
 
+.auth-actions [hidden] {
+  display: none !important;
+}
+
 .auth-actions a,
 button {
   border-radius: 8px;