Pass OAuth clientId directly to oauthLoginUrl, bypass meta tag

The hub library's meta tag lookup was failing on Docker SDK.
Now: fetch clientId from /api/oauth-config, pass it to ReachyMini
constructor, which passes it directly to oauthLoginUrl({ clientId }).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/app.js

@@ -1,56 +1,37 @@
 import { ReachyMini } from "./reachy-mini.js";
 
-// ─── State ───
-const robot = new ReachyMini({ enableMicrophone: false });
 const $ = id => document.getElementById(id);
 
+let robot = null;
 let imageId = null;
 let capturedBlob = null;
 const selected = new Set();
 
-let oauthReady = false;
-
 // ─── Init ───
 document.addEventListener("DOMContentLoaded", async () => {
-  // Ensure OAuth meta tag exists (Docker SDK provides env vars, not meta tags).
-  // Backend injects it in HTML, but as belt-and-suspenders also fetch from API.
-  if (!document.querySelector('meta[name="hf-oauth-client-id"]')?.content) {
-    try {
-      const res = await fetch("/api/oauth-config");
-      const cfg = await res.json();
-      console.log("OAuth config:", cfg);
-      if (cfg.clientId) {
-        const m1 = document.createElement("meta");
-        m1.name = "hf-oauth-client-id";
-        m1.content = cfg.clientId;
-        document.head.appendChild(m1);
-        const m2 = document.createElement("meta");
-        m2.name = "hf-oauth-scopes";
-        m2.content = cfg.scopes || "openid profile";
-        document.head.appendChild(m2);
-      } else {
-        console.error("OAUTH_CLIENT_ID env var is not set on this Space.",
-          "spaceHost:", cfg.spaceHost, "hasOAuth:", cfg.hasOAuth);
-      }
-    } catch (e) {
-      console.warn("Could not fetch OAuth config:", e);
-    }
+  // Fetch OAuth client ID from backend (Docker SDK puts it in env vars, not meta tags)
+  let clientId = null;
+  try {
+    const res = await fetch("/api/oauth-config");
+    const cfg = await res.json();
+    console.log("OAuth config:", cfg);
+    clientId = cfg.clientId || null;
+  } catch (e) {
+    console.warn("Could not fetch OAuth config:", e);
   }
 
-  oauthReady = !!document.querySelector('meta[name="hf-oauth-client-id"]')?.content;
+  // Create robot with explicit clientId (bypasses meta tag entirely)
+  robot = new ReachyMini({ enableMicrophone: false, clientId });
 
-  if (oauthReady && await robot.authenticate()) {
+  attachRobotEvents();
+
+  if (clientId && await robot.authenticate()) {
     showApp();
-  } else if (!oauthReady) {
-    // No OAuth — skip login, go straight to app with upload-only mode
-    $("loginScreen").hidden = true;
-    $("appScreen").hidden = false;
-    console.warn("OAuth not available — upload-only mode");
   }
   initEvents();
 });
 
-// ─── Auth (same as hand tracker) ───
+// ─── Auth ───
 function showApp() {
   $("loginScreen").hidden = true;
   $("robotScreen").hidden = false;
@@ -59,13 +40,7 @@ function showApp() {
 }
 
 function initEvents() {
-  $("loginBtn").addEventListener("click", async () => {
-    if (!oauthReady) {
-      alert("OAuth not configured on this Space. Check OAUTH_CLIENT_ID env var.\nOpen /api/oauth-config to debug.");
-      return;
-    }
-    await robot.login();
-  });
+  $("loginBtn").addEventListener("click", () => robot.login());
   $("logoutBtn").addEventListener("click", () => {
     robot.logout();
     $("robotScreen").hidden = true;
@@ -98,17 +73,15 @@ function initEvents() {
     if ($("fileInput").files.length) uploadFile($("fileInput").files[0]);
   });
 
-  // Param sliders
   for (const id of ["paramStrength", "paramLow", "paramHigh", "paramLevel", "paramBlock"]) {
-    const sl = $(id);
-    const val = $(id + "Val");
+    const sl = $(id), val = $(id + "Val");
     sl.addEventListener("input", () => { val.textContent = sl.value; });
   }
 
   buildFilterGrid();
 }
 
-// ─── Robot connection (same as hand tracker) ───
+// ─── Robot connection ───
 async function connectSignaling() {
   try {
     await robot.connect();
@@ -117,22 +90,24 @@ async function connectSignaling() {
   }
 }
 
-robot.addEventListener("robotsChanged", (e) => {
-  const list = e.detail.robots;
-  const container = $("robotList");
-  if (list.length === 0) {
-    container.innerHTML = '<p class="muted">No robots online</p>';
-    return;
-  }
-  container.innerHTML = "";
-  for (const r of list) {
-    const btn = document.createElement("button");
-    btn.className = "robot-btn";
-    btn.textContent = r.meta?.name || r.id;
-    btn.addEventListener("click", () => selectRobot(r));
-    container.appendChild(btn);
-  }
-});
+function attachRobotEvents() {
+  robot.addEventListener("robotsChanged", (e) => {
+    const list = e.detail.robots;
+    const container = $("robotList");
+    if (list.length === 0) {
+      container.innerHTML = '<p class="muted">No robots online</p>';
+      return;
+    }
+    container.innerHTML = "";
+    for (const r of list) {
+      const btn = document.createElement("button");
+      btn.className = "robot-btn";
+      btn.textContent = r.meta?.name || r.id;
+      btn.addEventListener("click", () => selectRobot(r));
+      container.appendChild(btn);
+    }
+  });
+}
 
 async function selectRobot(r) {
   $("robotScreen").hidden = true;
@@ -154,12 +129,10 @@ async function selectRobot(r) {
 async function captureFrame() {
   const video = $("videoEl");
   if (!video.videoWidth) return;
-
   const canvas = $("captureCanvas");
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
   canvas.getContext("2d").drawImage(video, 0, 0);
-
   capturedBlob = await new Promise(r => canvas.toBlob(r, "image/jpeg", 0.92));
   showCapturedImage(capturedBlob);
 }
@@ -174,7 +147,6 @@ async function showCapturedImage(blob) {
   $("capturedImg").src = url;
   $("processedImg").src = url;
   $("downloadLink").hidden = true;
-
   const fd = new FormData();
   fd.append("file", blob, "capture.jpg");
   try {
@@ -185,7 +157,6 @@ async function showCapturedImage(blob) {
     alert("Upload failed: " + e.message);
     return;
   }
-
   $("workSection").hidden = false;
   selected.clear();
   updateFilterUI();
@@ -215,9 +186,8 @@ function buildFilterGrid() {
 }
 
 function updateFilterUI() {
-  for (const btn of document.querySelectorAll(".filter-btn")) {
+  for (const btn of document.querySelectorAll(".filter-btn"))
     btn.classList.toggle("active", selected.has(btn.dataset.id));
-  }
   $("processBtn").disabled = selected.size === 0;
 }
 
@@ -237,19 +207,14 @@ async function processImage() {
   const btn = $("processBtn");
   btn.disabled = true;
   btn.textContent = "Processing...";
-
   const params = {
-    strength: +$("paramStrength").value,
-    low: +$("paramLow").value,
-    high: +$("paramHigh").value,
-    level: +$("paramLevel").value,
+    strength: +$("paramStrength").value, low: +$("paramLow").value,
+    high: +$("paramHigh").value, level: +$("paramLevel").value,
     block: +$("paramBlock").value,
   };
-
   const fd = new FormData();
   fd.append("filters", [...selected].join(","));
   fd.append("params", JSON.stringify(params));
-
   try {
     const res = await fetch("/process/" + imageId, { method: "POST", body: fd });
     if (!res.ok) throw new Error(await res.text());

static/reachy-mini.js

@@ -154,11 +154,12 @@ function sdpHasAudioSendRecv(sdp) {
 
 export class ReachyMini extends EventTarget {
 
-    /** @param {{ signalingUrl?: string, enableMicrophone?: boolean }} [options] */
+    /** @param {{ signalingUrl?: string, enableMicrophone?: boolean, clientId?: string }} [options] */
     constructor(options = {}) {
         super();
         this._signalingUrl = options.signalingUrl || 'https://cduss-reachy-mini-central.hf.space';
         this._enableMicrophone = options.enableMicrophone !== false;
+        this._clientId = options.clientId || null;
 
         this._state = 'disconnected';                 // 'disconnected' | 'connected' | 'streaming'
         this._robots = [];                             // latest robot list from signaling
@@ -268,7 +269,9 @@ export class ReachyMini extends EventTarget {
 
     /** Redirect the browser to the HuggingFace OAuth login page. */
     async login() {
-        window.location.href = await oauthLoginUrl();
+        const opts = {};
+        if (this._clientId) opts.clientId = this._clientId;
+        window.location.href = await oauthLoginUrl(opts);
     }
 
     /** Clear stored HF credentials and disconnect everything. */