Improve Codex OAuth reconnect flow

Author: chrysb

lib/public/js/components/models-tab/provider-auth-card.js

@@ -5,6 +5,10 @@ import { Badge } from "../badge.js";
 import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { exchangeCodexOAuth, disconnectCodex } from "../../lib/api.js";
+import {
+  isCodexAuthCallbackMessage,
+  openCodexAuthWindow,
+} from "../../lib/codex-oauth-window.js";
 import { showToast } from "../toast.js";
 import {
   kProviderAuthFields,
@@ -108,6 +112,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
   const [authWaiting, setAuthWaiting] = useState(false);
   const [manualInput, setManualInput] = useState("");
   const [exchanging, setExchanging] = useState(false);
+  const exchangeInFlightRef = useRef(false);
   const popupPollRef = useRef(null);
 
   useEffect(
@@ -117,13 +122,39 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
     [],
   );
 
+  const submitAuthInput = async (input) => {
+    const normalizedInput = String(input || "").trim();
+    if (!normalizedInput || exchangeInFlightRef.current) return;
+    exchangeInFlightRef.current = true;
+    setManualInput(normalizedInput);
+    setExchanging(true);
+    try {
+      const result = await exchangeCodexOAuth(normalizedInput);
+      if (!result.ok)
+        throw new Error(result.error || "Codex OAuth exchange failed");
+      setManualInput("");
+      showToast("Codex connected", "success");
+      setAuthStarted(false);
+      setAuthWaiting(false);
+      await onRefreshCodex();
+    } catch (err) {
+      setAuthWaiting(false);
+      showToast(err.message || "Codex OAuth exchange failed", "error");
+    } finally {
+      exchangeInFlightRef.current = false;
+      setExchanging(false);
+    }
+  };
+
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
         showToast("Codex connected", "success");
         setAuthStarted(false);
         setAuthWaiting(false);
         await onRefreshCodex();
+      } else if (isCodexAuthCallbackMessage(e.data)) {
+        await submitAuthInput(e.data.input);
       } else if (e.data?.codex === "error") {
         showToast(
           `Codex auth failed: ${e.data.message || "unknown error"}`,
@@ -133,19 +164,14 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, [onRefreshCodex]);
+  }, [onRefreshCodex, submitAuthInput]);
 
   const startAuth = () => {
     setAuthStarted(true);
     setAuthWaiting(true);
-    const popup = window.open(
-      "/auth/codex/start",
-      "codex-auth",
-      "popup=yes,width=640,height=780",
-    );
+    const popup = openCodexAuthWindow();
     if (!popup || popup.closed) {
       setAuthWaiting(false);
-      window.location.href = "/auth/codex/start";
       return;
     }
     if (popupPollRef.current) clearInterval(popupPollRef.current);
@@ -159,22 +185,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
   };
 
   const completeAuth = async () => {
-    if (!manualInput.trim() || exchanging) return;
-    setExchanging(true);
-    try {
-      const result = await exchangeCodexOAuth(manualInput.trim());
-      if (!result.ok)
-        throw new Error(result.error || "Codex OAuth exchange failed");
-      setManualInput("");
-      showToast("Codex connected", "success");
-      setAuthStarted(false);
-      setAuthWaiting(false);
-      await onRefreshCodex();
-    } catch (err) {
-      showToast(err.message || "Codex OAuth exchange failed", "error");
-    } finally {
-      setExchanging(false);
-    }
+    await submitAuthInput(manualInput);
   };
 
   const handleDisconnect = async () => {
@@ -198,7 +209,23 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
           ? html`<${Badge} tone="success">Connected</${Badge}>`
           : html`<${Badge} tone="warning">Not connected</${Badge}>`}
       </div>
-      ${codexStatus.connected
+      ${authStarted
+        ? html`
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-xs text-fg-muted">
+                ${authWaiting
+                  ? "Complete login in the popup. AlphaClaw should finish automatically, but you can paste the redirect URL below if it doesn't."
+                  : "Paste the redirect URL from your browser to finish connecting."}
+              </p>
+              <button
+                onclick=${startAuth}
+                class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
+              >
+                Restart
+              </button>
+            </div>
+          `
+        : codexStatus.connected
         ? html`
             <div class="flex gap-2">
               <button
@@ -215,32 +242,16 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
               </button>
             </div>
           `
-        : !authStarted
+        : html`
+            <button
+              onclick=${startAuth}
+              class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
+            >
+              Connect Codex OAuth
+            </button>
+          `}
+      ${authStarted
           ? html`
-              <button
-                onclick=${startAuth}
-                class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
-              >
-                Connect Codex OAuth
-              </button>
-            `
-          : html`
-              <div class="flex items-center justify-between gap-2">
-                <p class="text-xs text-fg-muted">
-                  ${authWaiting
-                    ? "Complete login in the popup, then paste the redirect URL."
-                    : "Paste the redirect URL from your browser to finish connecting."}
-                </p>
-                <button
-                  onclick=${startAuth}
-                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
-                >
-                  Restart
-                </button>
-              </div>
-            `}
-      ${!codexStatus.connected && authStarted
-        ? html`
             <p class="text-xs text-fg-muted">
               After login, copy the full redirect URL (starts with
               <code class="text-xs bg-field px-1 rounded"

lib/public/js/components/models.js

@@ -24,6 +24,10 @@ import {
   kProviderLabels,
   kProviderOrder,
 } from "../lib/model-config.js";
+import {
+  isCodexAuthCallbackMessage,
+  openCodexAuthWindow,
+} from "../lib/codex-oauth-window.js";
 
 const html = htm.bind(h);
 
@@ -51,6 +55,7 @@ export const Models = () => {
   const [savedModel, setSavedModel] = useState(() => kModelsTabCache?.savedModel || "");
   const [modelDirty, setModelDirty] = useState(false);
   const [savedAiValues, setSavedAiValues] = useState(() => kModelsTabCache?.savedAiValues || {});
+  const codexExchangeInFlightRef = useRef(false);
   const codexPopupPollRef = useRef(null);
 
   const refresh = async () => {
@@ -122,18 +127,43 @@ export const Models = () => {
     }
   }, []);
 
+  const submitCodexAuthInput = async (input) => {
+    const normalizedInput = String(input || "").trim();
+    if (!normalizedInput || codexExchangeInFlightRef.current) return;
+    codexExchangeInFlightRef.current = true;
+    setCodexManualInput(normalizedInput);
+    setCodexExchanging(true);
+    try {
+      const result = await exchangeCodexOAuth(normalizedInput);
+      if (!result.ok) throw new Error(result.error || "Codex OAuth exchange failed");
+      setCodexManualInput("");
+      showToast("Codex connected", "success");
+      setCodexAuthStarted(false);
+      setCodexAuthWaiting(false);
+      await refreshCodexConnection();
+    } catch (err) {
+      setCodexAuthWaiting(false);
+      showToast(err.message || "Codex OAuth exchange failed", "error");
+    } finally {
+      codexExchangeInFlightRef.current = false;
+      setCodexExchanging(false);
+    }
+  };
+
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
         showToast("Codex connected", "success");
         await refreshCodexConnection();
+      } else if (isCodexAuthCallbackMessage(e.data)) {
+        await submitCodexAuthInput(e.data.input);
       } else if (e.data?.codex === "error") {
         showToast(`Codex auth failed: ${e.data.message || "unknown error"}`, "error");
       }
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, []);
+  }, [submitCodexAuthInput]);
 
   const setEnvValue = (key, value) => {
     setEnvVars((prev) => {
@@ -194,10 +224,9 @@ export const Models = () => {
     if (codexStatus.connected) return;
     setCodexAuthStarted(true);
     setCodexAuthWaiting(true);
-    const popup = window.open("/auth/codex/start", "codex-auth", "popup=yes,width=640,height=780");
+    const popup = openCodexAuthWindow();
     if (!popup || popup.closed) {
       setCodexAuthWaiting(false);
-      window.location.href = "/auth/codex/start";
       return;
     }
     if (codexPopupPollRef.current) {
@@ -213,21 +242,7 @@ export const Models = () => {
   };
 
   const completeCodexAuth = async () => {
-    if (!codexManualInput.trim() || codexExchanging) return;
-    setCodexExchanging(true);
-    try {
-      const result = await exchangeCodexOAuth(codexManualInput.trim());
-      if (!result.ok) throw new Error(result.error || "Codex OAuth exchange failed");
-      setCodexManualInput("");
-      showToast("Codex connected", "success");
-      setCodexAuthStarted(false);
-      setCodexAuthWaiting(false);
-      await refreshCodexConnection();
-    } catch (err) {
-      showToast(err.message || "Codex OAuth exchange failed", "error");
-    } finally {
-      setCodexExchanging(false);
-    }
+    await submitCodexAuthInput(codexManualInput);
   };
 
   const handleCodexDisconnect = async () => {
@@ -301,7 +316,23 @@ export const Models = () => {
               ? html`<${Badge} tone="success">Connected</${Badge}>`
               : html`<${Badge} tone="warning">Not connected</${Badge}>`}
           </div>
-          ${codexStatus.connected
+          ${codexAuthStarted
+            ? html`
+                <div class="flex items-center justify-between gap-2">
+                  <p class="text-xs text-fg-muted">
+                    ${codexAuthWaiting
+                      ? "Complete login in the popup. AlphaClaw should finish automatically, but you can paste the redirect URL below if it doesn't."
+                      : "Paste the redirect URL from your browser to finish connecting."}
+                  </p>
+                  <button
+                    onclick=${startCodexAuth}
+                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
+                  >
+                    Restart
+                  </button>
+                </div>
+              `
+            : codexStatus.connected
             ? html`
                 <div class="flex gap-2">
                   <button
@@ -318,31 +349,15 @@ export const Models = () => {
                   </button>
                 </div>
               `
-            : !codexAuthStarted
-            ? html`
+            : html`
                 <button
                   onclick=${startCodexAuth}
                   class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
                 >
                   Connect Codex OAuth
                 </button>
-              `
-            : html`
-                <div class="flex items-center justify-between gap-2">
-                  <p class="text-xs text-fg-muted">
-                    ${codexAuthWaiting
-                      ? "Complete login in the popup, then paste the redirect URL."
-                      : "Paste the redirect URL from your browser to finish connecting."}
-                  </p>
-                  <button
-                    onclick=${startCodexAuth}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
-                  >
-                    Restart
-                  </button>
-                </div>
               `}
-          ${!codexStatus.connected && codexAuthStarted
+          ${codexAuthStarted
             ? html`
                 <p class="text-xs text-fg-muted">
                   After login, copy the full redirect URL (starts with