Fix partition-safe native HF login handoff

space-auth.js

@@ -4,11 +4,19 @@ import {
 } from "@huggingface/hub";
 
 const STORAGE_KEY = "hfviewer:space-native-oauth:v1";
+const HF_NONCE_KEY = "huggingface.co:oauth:nonce";
+const HF_VERIFIER_KEY = "huggingface.co:oauth:code_verifier";
+const POPUP_FLOW_KEY = "hfviewer:space-oauth-popup-flow:v1";
+const COMPLETE_URL = "https://hfviewer.com/api/hf_space_oauth/complete";
+const CONSUME_URL = "https://hfviewer.com/api/hf_space_oauth/consume";
+const POLL_INTERVAL_MS = 800;
+const FLOW_TIMEOUT_MS = 5 * 60 * 1000;
 const authHost = document.getElementById("hfnx-auth");
 
 let oauthResult = readStoredResult();
 let loginUrl = "";
 let rendering = false;
+let activeFlow = null;
 
 function readStoredResult() {
   try {
@@ -24,11 +32,16 @@ function writeStoredResult(value) {
     if (value) localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
     else localStorage.removeItem(STORAGE_KEY);
   } catch {
-    // Storage can be unavailable in privacy-focused browsers. The callback
-    // tab still remains signed in for the current render.
+    // Keep the current-tab session even when durable storage is unavailable.
   }
 }
 
+function randomFlowValue() {
+  const bytes = new Uint8Array(32);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (value) => value.toString(16).padStart(2, "0")).join("");
+}
+
 function userFromResult(result) {
   const raw = result?.userInfo || result?.userinfo || result?.user_info || result?.user || {};
   const username = String(
@@ -50,7 +63,6 @@ function trackAuthEvent(eventName, properties = {}) {
     window.hfviewerAnalyticsBridge?.capture?.(eventName, {
       product_surface: "hf_space",
       space_repo: "embedl/hfviewer",
-      space_revision: "hf-space-2e4848474064",
       auth_provider: "hugging_face",
       ...properties,
     });
@@ -106,20 +118,14 @@ function makeLoggedOutControl() {
   const link = document.createElement("a");
   link.dataset.spaceNativeAuth = "login";
   link.className = "space-native-auth-login";
-  link.textContent = "Log in";
+  link.textContent = activeFlow ? "Signing in…" : "Log in";
   link.title = "Sign in with Hugging Face";
-  link.target = "_blank";
-  link.rel = "noopener";
-  link.href = loginUrl || "#";
-  if (!loginUrl) link.setAttribute("aria-disabled", "true");
+  link.href = "#";
+  link.setAttribute("aria-disabled", loginUrl && !activeFlow ? "false" : "true");
   link.addEventListener("click", (event) => {
-    if (!loginUrl) {
-      event.preventDefault();
-      return;
-    }
-    trackAuthEvent("space_hf_login_clicked", {
-      component: "space_nav",
-    });
+    event.preventDefault();
+    if (!loginUrl || activeFlow) return;
+    startLogin();
   });
   return link;
 }
@@ -150,11 +156,7 @@ function makeLoggedInControl(user) {
   profile.rel = "noopener";
   profile.textContent = "Hugging Face profile";
   profile.setAttribute("role", "menuitem");
-  profile.addEventListener("click", () => {
-    trackAuthEvent("space_hf_profile_opened", {
-      component: "space_nav",
-    });
-  });
+  profile.addEventListener("click", () => trackAuthEvent("space_hf_profile_opened"));
 
   const logout = document.createElement("button");
   logout.type = "button";
@@ -162,9 +164,7 @@ function makeLoggedInControl(user) {
   logout.textContent = "Log out";
   logout.setAttribute("role", "menuitem");
   logout.addEventListener("click", () => {
-    trackAuthEvent("space_hf_logout", {
-      component: "space_nav",
-    });
+    trackAuthEvent("space_hf_logout");
     oauthResult = null;
     writeStoredResult(null);
     renderAuth();
@@ -194,60 +194,161 @@ function renderAuth() {
   queueMicrotask(() => { rendering = false; });
 }
 
-function cleanCallbackQuery() {
-  try {
-    const url = new URL(window.location.href);
-    let changed = false;
-    for (const key of ["code", "state", "scope", "error", "error_description"]) {
-      if (url.searchParams.has(key)) {
-        url.searchParams.delete(key);
-        changed = true;
+function applyOauthResult(callbackResult, source) {
+  oauthResult = callbackResult;
+  writeStoredResult(callbackResult);
+  activeFlow = null;
+  renderAuth();
+  const user = userFromResult(callbackResult);
+  identifyAuthenticatedUser(user, source);
+  trackAuthEvent("space_hf_login_completed", {
+    component: "space_nav",
+    username_present: !!user?.username,
+    subject_present: !!user?.subject,
+    email_present: !!user?.email,
+  });
+}
+
+function failLogin(error, failureStage) {
+  console.warn("Hugging Face Space login failed", error);
+  activeFlow = null;
+  renderAuth();
+  trackAuthEvent("space_hf_login_failed", {
+    component: "space_nav",
+    failure_stage: failureStage,
+    error_name: String(error?.name || "Error").slice(0, 80),
+  });
+}
+
+async function postJson(url, body) {
+  const response = await fetch(url, {
+    method: "POST",
+    mode: "cors",
+    credentials: "omit",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok && response.status !== 202) {
+    throw new Error(payload?.error || `Request failed (${response.status})`);
+  }
+  return payload;
+}
+
+async function pollForCompletion(flow) {
+  while (activeFlow === flow && Date.now() - flow.startedAt < FLOW_TIMEOUT_MS) {
+    try {
+      const result = await postJson(CONSUME_URL, {
+        flow_id: flow.id,
+        flow_secret: flow.secret,
+      });
+      if (result?.status === "complete" && userFromResult(result)) {
+        applyOauthResult({ userInfo: result.userInfo }, "hf_space_native_oauth_handoff");
+        return;
       }
+    } catch (error) {
+      failLogin(error, "handoff_consume");
+      return;
     }
-    if (changed) history.replaceState(null, "", url.toString());
-  } catch {
-    // Cosmetic cleanup only.
+    await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
   }
+  if (activeFlow === flow) failLogin(new Error("OAuth flow timed out"), "handoff_timeout");
 }
 
-async function initialize() {
+function startLogin() {
+  const nonce = localStorage.getItem(HF_NONCE_KEY);
+  const codeVerifier = localStorage.getItem(HF_VERIFIER_KEY);
+  if (!nonce || !codeVerifier) {
+    failLogin(new Error("OAuth PKCE state is unavailable"), "pkce_prepare");
+    return;
+  }
+  const flow = {
+    id: randomFlowValue(),
+    secret: randomFlowValue(),
+    startedAt: Date.now(),
+  };
+  const popup = window.open(
+    "about:blank",
+    "_blank",
+    "popup=yes,width=720,height=780,resizable=yes,scrollbars=yes"
+  );
+  if (!popup) {
+    failLogin(new Error("The sign-in popup was blocked"), "popup_blocked");
+    return;
+  }
+  activeFlow = flow;
   renderAuth();
-  identifyAuthenticatedUser(userFromResult(oauthResult), "hf_space_native_oauth_restored");
+  trackAuthEvent("space_hf_login_clicked", { component: "space_nav" });
   try {
-    const callbackResult = await oauthHandleRedirectIfPresent();
-    if (callbackResult) {
-      oauthResult = callbackResult;
-      writeStoredResult(callbackResult);
-      cleanCallbackQuery();
-      renderAuth();
-      const user = userFromResult(callbackResult);
-      identifyAuthenticatedUser(user, "hf_space_native_oauth_callback");
-      trackAuthEvent("space_hf_login_completed", {
-        component: "space_nav",
-        username_present: !!user?.username,
-        subject_present: !!user?.subject,
-        email_present: !!user?.email,
-      });
-    }
+    // The blank popup inherits this Space origin, but owns top-level (rather
+    // than iframe-partitioned) storage. Seed that storage synchronously before
+    // navigating to HF. The callback can then finish even if COOP severs opener.
+    popup.document.title = "Sign in with Hugging Face";
+    popup.document.body.textContent = "Opening Hugging Face sign-in…";
+    popup.localStorage.setItem(HF_NONCE_KEY, nonce);
+    popup.localStorage.setItem(HF_VERIFIER_KEY, codeVerifier);
+    popup.sessionStorage.setItem(POPUP_FLOW_KEY, JSON.stringify({
+      flowId: flow.id,
+      flowSecret: flow.secret,
+    }));
+    popup.location.replace(loginUrl);
   } catch (error) {
-    console.warn("Hugging Face Space login callback failed", error);
-    trackAuthEvent("space_hf_login_failed", {
-      component: "space_nav",
-      failure_stage: "oauth_callback",
-      error_name: String(error?.name || "Error").slice(0, 80),
+    popup.close();
+    failLogin(error, "popup_initialize");
+    return;
+  }
+  void pollForCompletion(flow);
+}
+
+function renderPopupStatus(text) {
+  if (!authHost) return;
+  const status = document.createElement("span");
+  status.className = "space-native-auth-login";
+  status.textContent = text;
+  authHost.replaceChildren(status);
+}
+
+async function initializePopup() {
+  const callbackPresent = new URL(window.location.href).searchParams.has("code") ||
+    new URL(window.location.href).searchParams.has("error");
+  if (!callbackPresent) {
+    renderPopupStatus("Sign-in state expired. Close this window and try again.");
+    return;
+  }
+
+  renderPopupStatus("Completing sign-in…");
+  const flow = JSON.parse(sessionStorage.getItem(POPUP_FLOW_KEY) || "null");
+  if (!flow?.flowId || !flow?.flowSecret) {
+    renderPopupStatus("Sign-in state expired. Close this window and try again.");
+    return;
+  }
+  try {
+    const result = await oauthHandleRedirectIfPresent();
+    if (!result?.accessToken) throw new Error("Hugging Face did not return an access token");
+    await postJson(COMPLETE_URL, {
+      flow_id: flow.flowId,
+      flow_secret: flow.flowSecret,
+      access_token: result.accessToken,
     });
+    sessionStorage.removeItem(POPUP_FLOW_KEY);
+    // The verified identity is relayed through hfviewer; do not retain the token.
+    localStorage.removeItem(STORAGE_KEY);
+    renderPopupStatus("Signed in. You can close this window.");
+    window.close();
+  } catch (error) {
+    console.warn("Hugging Face Space popup callback failed", error);
+    renderPopupStatus("Sign-in failed. Close this window and try again.");
   }
+}
 
+async function initializeApp() {
+  renderAuth();
+  identifyAuthenticatedUser(userFromResult(oauthResult), "hf_space_native_oauth_restored");
   try {
     const scopes = window.huggingface?.variables?.OAUTH_SCOPES;
     loginUrl = await oauthLoginUrl(scopes ? { scopes } : undefined);
   } catch (error) {
-    console.warn("Could not prepare Hugging Face Space login", error);
-    trackAuthEvent("space_hf_login_failed", {
-      component: "space_nav",
-      failure_stage: "login_url",
-      error_name: String(error?.name || "Error").slice(0, 80),
-    });
+    failLogin(error, "login_url");
   }
   renderAuth();
 }
@@ -265,4 +366,9 @@ window.addEventListener("storage", (event) => {
   renderAuth();
 });
 
-initialize();
+if (new URL(window.location.href).searchParams.has("code") ||
+    new URL(window.location.href).searchParams.has("error")) {
+  void initializePopup();
+} else {
+  void initializeApp();
+}