Merge xAI OAuth code completion fix

Author: gitcommit90

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rerouted",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "A macOS menu-bar router for accounts, models, and automatic fallback.",
   "author": "gitcommit90",
   "homepage": "https://rerouted.dev",

package.json

@@ -773,6 +773,55 @@ app.whenReady().then(async () => {
     })()
   `);
 
+  await win.webContents.executeJavaScript(`
+    (async () => {
+      document.querySelector("[data-provider-back]")?.click();
+      document.querySelector('[data-provider-key="xai"]')?.click();
+      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+      document.getElementById("btn-add-provider")?.click();
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      const panel = document.querySelector("#add-panel .action-panel");
+      const input = panel?.querySelector("#paste-code-oauth");
+      const details = panel?.querySelector("details");
+      if (panel?.querySelector("[data-panel-heading]")?.textContent.trim() !== "xAI") {
+        throw new Error("xAI OAuth add panel did not render");
+      }
+      if (!input || details?.contains(input)) {
+        throw new Error("xAI authorization code input was hidden under troubleshooting");
+      }
+      if (!input.previousElementSibling?.textContent.includes("Authorization code")) {
+        throw new Error("xAI authorization code input was not clearly labeled");
+      }
+      if (!panel.querySelector("#oauth-status-line")?.textContent.includes("authorization code")) {
+        throw new Error("xAI OAuth status did not request the displayed code");
+      }
+      return true;
+    })()
+  `);
+  await capture(
+    "app-providers-xai-oauth-add.png",
+    "#add-panel .action-panel",
+    "#add-panel .action-panel"
+  );
+
+  await win.webContents.executeJavaScript(`
+    (async () => {
+      const input = document.querySelector("#paste-code-oauth");
+      const finish = document.querySelector("#btn-done-oauth");
+      if (!input || !finish) throw new Error("xAI OAuth completion controls disappeared");
+      input.value = "captured-xai-code";
+      finish.click();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      if (document.querySelector("#add-panel .action-panel")) {
+        throw new Error("xAI OAuth panel did not complete cleanly");
+      }
+      document.querySelector("[data-provider-back]")?.click();
+      document.querySelector('[data-provider-key="chatgpt"]')?.click();
+      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+      return true;
+    })()
+  `);
+
   await win.webContents.executeJavaScript(`
     (async () => {
       const opener = document.getElementById("btn-add-provider");

scripts/capture-ui.js

@@ -120,16 +120,18 @@ function normalizeAuthCode(raw) {
   ) {
     s = s.slice(1, -1).trim();
   }
-  // full URL with ?code=
-  try {
-    if (/^https?:\/\//i.test(s) || s.includes("code=")) {
+  // Full callback URL or query string with ?code=.
+  const callbackLike = /^https?:\/\//i.test(s) || s.includes("code=");
+  if (callbackLike) {
+    try {
       const u = new URL(s.includes("://") ? s : `http://local/?${s.replace(/^\?/, "")}`);
       const code = u.searchParams.get("code") || "";
       const state = u.searchParams.get("state") || "";
       if (code) return { code: decodeURIComponent(code), state: state || "" };
+      return { code: "", state };
+    } catch {
+      return { code: "", state: "" };
     }
-  } catch {
-    /* fall through */
   }
   // Claude: code#state
   if (s.includes("#")) {
@@ -139,6 +141,22 @@ function normalizeAuthCode(raw) {
   return { code: s, state: "" };
 }
 
+function isStandaloneAuthCode(raw) {
+  let s = String(raw || "").trim();
+  if (
+    (s.startsWith('"') && s.endsWith('"')) ||
+    (s.startsWith("'") && s.endsWith("'"))
+  ) {
+    s = s.slice(1, -1).trim();
+  }
+  return !!s && !/^https?:\/\//i.test(s) && !s.includes("code=") && !s.includes("#");
+}
+
+function isCallbackLikeInput(raw) {
+  const s = String(raw || "").trim().replace(/^(?:"|')|(?:"|')$/g, "");
+  return /^https?:\/\//i.test(s) || s.includes("code=");
+}
+
 function callbackPage(result) {
   const safeUrl = escapeHtml(result.fullUrl);
   if (result.providerError) {
@@ -482,6 +500,8 @@ async function completeOAuth(type, { pasteCode, fetchImpl = fetch } = {}) {
 
   let code = session?.code;
   let returnedState = session?.callbackState || "";
+  let acceptsActivePkceSession = false;
+  let callbackInputMissingCode = false;
   if (pasteCode) {
     const n = normalizeAuthCode(pasteCode);
     logger.oauth("paste code normalized", {
@@ -491,25 +511,34 @@ async function completeOAuth(type, { pasteCode, fetchImpl = fetch } = {}) {
     });
     code = n.code || code;
     // A manual value must carry its own state; never combine a pasted code
-    // with state captured from an earlier callback.
+    // with state captured from an earlier callback. xAI is the exception: its
+    // browser flow displays a standalone code that remains bound to this PKCE
+    // session through the verifier used during token exchange.
     returnedState = n.state || "";
+    acceptsActivePkceSession =
+      type === "xai" && !!n.code && !n.state && isStandaloneAuthCode(pasteCode);
+    callbackInputMissingCode = !n.code && isCallbackLikeInput(pasteCode);
   }
   if (!code) {
-    const msg = session?.error
-      ? `OAuth error: ${session.error}`
-      : "No authorization code yet. Finish login in the browser (paste the code if shown), then click I'm done.";
+    const msg = callbackInputMissingCode
+      ? type === "xai"
+        ? "That URL does not contain an authorization code. Paste the code xAI shows you, or the full callback URL after authorization."
+        : "That URL does not contain an authorization code. Paste the full callback URL after authorization."
+      : session?.error
+        ? `OAuth error: ${session.error}`
+        : "No authorization code yet. Finish login in the browser, then click Finish connection.";
     logger.error(msg);
     throw new Error(msg);
   }
-  if (!statesMatch(session.state, returnedState)) {
+  if (!statesMatch(session.state, returnedState) && !acceptsActivePkceSession) {
     logger.warn(`OAuth state validation failed for ${type}`);
     throw new Error("OAuth state mismatch. Start the connection again and paste the full callback URL.");
   }
 
   const t = type === "codex" ? "chatgpt" : type;
   logger.oauth(`exchanging tokens type=${t}`, {
     codeLen: code.length,
-    stateValidated: true,
+    authorizationBinding: acceptsActivePkceSession ? "active-pkce-session" : "callback-state",
     redirectUri: session?.redirectUri,
   });
   let tokens;

src/lib/oauth.js

@@ -6,6 +6,7 @@ const { accountDisplayName, accountIdentityLabel, maskAccountEmail } =
 const { compactNumber: fmtNum } = window.ReroutedNumberFormat;
 const { createLatestRequestGate, guardSensitiveRender } = window.ReroutedRendererLockState;
 const { buildProviderCatalog } = window.ReroutedProviderCatalog;
+const { oauthPrompt } = window.ReroutedOAuthPrompt;
 const $ = (sel, el = document) => el.querySelector(sel);
 const view = $("#view");
 const nav = $("#nav");
@@ -291,7 +292,6 @@ function wireSecrets(root = view) {
   });
 }
 
-const PASTE_CODE_PLACEHOLDER = "Paste the full callback URL if prompted";
 const OAUTH_RISK_NOTICE =
   "Notice: This provider's subscription or OAuth session is not officially licensed for proxy or router use. Using it this way may result in account restrictions or bans. Proceed at your own risk.";
 
@@ -450,15 +450,17 @@ function renderOauthProviders() {
   view.querySelectorAll(".tile").forEach((btn) => {
     btn.onclick = async () => {
       const type = btn.dataset.type;
+      const prompt = oauthPrompt(type);
       const panel = $("#oauth-panel");
-      panel.innerHTML = `<div class="card"><div class="card-title">Signing in to ${esc(type)}…</div>
-        <div class="card-sub">Complete login in your browser, then click Finish connection.</div>
+      panel.innerHTML = `<div class="card"><div class="card-title">Signing in to ${esc(providerLabel(type))}…</div>
+        <div class="card-sub">${esc(prompt.instruction)}</div>
         ${oauthRiskNotice()}
         <div class="btn-row" style="margin-top:10px">
-          <button type="button" class="btn btn-secondary btn-sm" id="btn-reopen">Open browser again</button>
+          <button type="button" class="btn btn-secondary btn-sm" id="btn-reopen">Restart sign-in</button>
           <button type="button" class="btn btn-primary btn-sm" id="btn-done">Finish connection</button>
         </div>
-        <input class="input" id="paste-code" placeholder="${PASTE_CODE_PLACEHOLDER}" style="margin-top:10px" />
+        <div class="oauth-paste-entry"><label class="label" for="paste-code">${esc(prompt.fieldLabel)}</label>
+        <input class="input" id="paste-code" placeholder="${esc(prompt.placeholder)}" autocomplete="off" /></div>
       </div>`;
       await api.invoke("app:oauth-start", type);
       $("#btn-reopen").onclick = () => api.invoke("app:oauth-start", type);
@@ -1067,21 +1069,21 @@ function startOauthFlow({ type, providerId, onDone, opener }) {
   box.className = "action-panel";
   box.setAttribute("role", "region");
   box.setAttribute("aria-labelledby", "oauth-panel-title");
-  const claudeHint =
-    type === "claude"
-      ? "After authorizing, paste the full localhost callback URL if the browser cannot return automatically."
-      : "Most providers return automatically. Paste the full callback URL only if automatic return fails.";
-  box.innerHTML = `<div class="action-panel-head"><div class="eyebrow">${providerId ? "Reconnect" : "New account"}</div><div class="action-panel-title" id="oauth-panel-title" data-panel-heading tabindex="-1">${esc(providerLabel(type))}</div><div class="action-panel-sub">Opening a secure browser session. ${esc(claudeHint)}</div></div>
+  const prompt = oauthPrompt(type);
+  const pasteField = `<div class="oauth-paste-entry"><label class="label" for="paste-code-oauth">${esc(prompt.fieldLabel)}</label>
+      <input class="input" id="paste-code-oauth" placeholder="${esc(prompt.placeholder)}" autocomplete="off" /></div>`;
+  box.innerHTML = `<div class="action-panel-head"><div class="eyebrow">${providerId ? "Reconnect" : "New account"}</div><div class="action-panel-title" id="oauth-panel-title" data-panel-heading tabindex="-1">${esc(providerLabel(type))}</div><div class="action-panel-sub">Opening a secure browser session. ${esc(prompt.instruction)}</div></div>
     ${oauthRiskNotice()}
     <div class="gateway-state"><span class="status-node"></span><span id="oauth-status-line">Starting OAuth…</span></div>
+    ${prompt.primaryPaste ? pasteField : ""}
     <details class="disclosure" style="margin:10px 0 0">
       <summary>Having trouble?</summary>
       <div class="disclosure-body"><div class="label">Authorization URL</div><div class="auth-url-box" id="oauth-url-display">Starting…</div>
-      <input class="input" id="paste-code-oauth" placeholder="${type === "claude" ? "Paste full localhost callback URL" : PASTE_CODE_PLACEHOLDER}" autocomplete="off" /></div>
+      ${prompt.primaryPaste ? "" : pasteField}</div>
     </details>
     <div class="btn-row">
       <button type="button" class="btn btn-secondary btn-sm" id="btn-copy-oauth-url">Copy URL</button>
-      <button type="button" class="btn btn-secondary btn-sm" id="btn-reopen-oauth">Open browser</button>
+      <button type="button" class="btn btn-secondary btn-sm" id="btn-reopen-oauth">Restart sign-in</button>
       <button type="button" class="btn btn-secondary btn-sm" id="btn-oauth-logs">Logs</button>
     </div>
     <div class="btn-row">
@@ -1132,9 +1134,11 @@ function startOauthFlow({ type, providerId, onDone, opener }) {
     }
     lastAuthUrl = r.authUrl || "";
     disp.textContent = lastAuthUrl;
-    status.textContent = r.needsPaste
-      ? `Redirect: ${r.redirectUri || "—"} · after Authorize paste the full localhost callback URL`
-      : `Redirect: ${r.redirectUri || "—"} · waiting for browser callback`;
+    status.textContent = prompt.primaryPaste
+      ? prompt.status
+      : r.needsPaste
+        ? `Redirect: ${r.redirectUri || "—"} · ${prompt.status}`
+        : `Redirect: ${r.redirectUri || "—"} · waiting for browser callback`;
   }
   start().catch((e) => {
     if (!panelSession.closed) toast(e.message || "OAuth start failed");

src/renderer/app.js

@@ -62,6 +62,7 @@
     <script src="number-format.js"></script>
     <script src="lock-state.js"></script>
     <script src="provider-catalog.js"></script>
+    <script src="oauth-prompt.js"></script>
     <script src="app.js"></script>
   </body>
 </html>

src/renderer/index.html

@@ -0,0 +1,38 @@
+"use strict";
+
+(function exposeOAuthPrompt(root) {
+  function oauthPrompt(type) {
+    if (type === "xai") {
+      return {
+        instruction:
+          "After authorizing, paste the code xAI shows you. A full callback URL also works.",
+        status: "Paste the authorization code xAI shows you below.",
+        fieldLabel: "Authorization code or callback URL",
+        placeholder: "Paste the code shown by xAI",
+        primaryPaste: true,
+      };
+    }
+    if (type === "claude") {
+      return {
+        instruction:
+          "After authorizing, paste the full localhost callback URL if the browser cannot return automatically.",
+        status: "After authorizing, paste the full localhost callback URL if needed.",
+        fieldLabel: "Callback URL",
+        placeholder: "Paste full localhost callback URL",
+        primaryPaste: false,
+      };
+    }
+    return {
+      instruction:
+        "Most providers return automatically. Paste the full callback URL only if automatic return fails.",
+      status: "Waiting for the browser callback.",
+      fieldLabel: "Callback URL",
+      placeholder: "Paste the full callback URL if prompted",
+      primaryPaste: false,
+    };
+  }
+
+  const api = { oauthPrompt };
+  if (typeof module !== "undefined" && module.exports) module.exports = api;
+  if (root) root.ReroutedOAuthPrompt = api;
+})(typeof window !== "undefined" ? window : null);

src/renderer/oauth-prompt.js

@@ -1044,6 +1044,10 @@ summary:focus-visible,
   color: var(--muted);
 }
 
+.oauth-paste-entry {
+  margin-top: 10px;
+}
+
 .panel-cancel {
   width: 100%;
   margin-top: 7px;

src/renderer/styles.css

@@ -1118,6 +1118,10 @@ describe("oauth code normalize", () => {
     assert.equal(local.code, "abc");
     assert.equal(local.state, "xyz");
     assert.equal(normalizeAuthCode("  plain  ").code, "plain");
+    assert.deepEqual(normalizeAuthCode("https://auth.x.ai/oauth2/authorize?state=st"), {
+      code: "",
+      state: "st",
+    });
   });
 });
 

tests/gateway.test.js

@@ -0,0 +1,22 @@
+"use strict";
+
+const assert = require("node:assert/strict");
+const { describe, it } = require("node:test");
+const { oauthPrompt } = require("../src/renderer/oauth-prompt");
+
+describe("OAuth renderer prompts", () => {
+  it("treats xAI's displayed code as the primary completion input", () => {
+    const prompt = oauthPrompt("xai");
+
+    assert.equal(prompt.primaryPaste, true);
+    assert.match(prompt.instruction, /paste the code xAI shows you/i);
+    assert.match(prompt.fieldLabel, /authorization code/i);
+    assert.match(prompt.placeholder, /code shown by xAI/i);
+  });
+
+  it("keeps callback URL guidance for providers that return through the browser", () => {
+    assert.equal(oauthPrompt("claude").primaryPaste, false);
+    assert.match(oauthPrompt("claude").placeholder, /callback URL/i);
+    assert.equal(oauthPrompt("chatgpt").primaryPaste, false);
+  });
+});