feat(codex-auth): add manual redirect-URL/code paste for headless account add (#183)

lidge-jun · lidge-jun · commit 0d7fd9853a95 · 2026-07-22T01:42:03.000+09:00
diff --git a/devlog/_plan/260722_issue_bug_sweep/022_patch_o2_codex_auth_manual_code.md b/devlog/_plan/260722_issue_bug_sweep/022_patch_o2_codex_auth_manual_code.md
@@ -3,6 +3,7 @@
 - 소스 RCA: `004_rca_o_oauth_persistence_manual_code.md` O-2 절 (리뷰어 검증 완료)
 - 위험도: 높음/C4 (인증 코드를 받는 신규 API 표면) — 020(Anthropic 지속성)과 별도 위협 모델이라 분리된 단위.
 - 선행 조건: 없음.
+- **구현 완료 (2026-07-22)**: auth-api.ts:766 `POST /api/codex-auth/login/code`(pending flowId 결속 + 4096자 제한 + `submitManualLoginCode("chatgpt")` 위임, 자체 교환 없음); AddCodexAccountModal.tsx 수동 붙여넣기 입력(autoComplete off, 제출/취소/만료/unmount 시 클리어, Enter 제출); 붙여넣은 값 무로깅, chatgpt는 isPublicOAuthProvider 제외 유지, raw-import 403 게이트(:141) 불변; 기존 prov.paste* i18n 재사용. 검증: codex-auth-api+oauth-manual-code 72 pass, `bun x tsc --noEmit` exit 0. 커밋: WP-impl-5.
 
 ## 목표와 비목표
 
diff --git a/gui/src/components/AddCodexAccountModal.tsx b/gui/src/components/AddCodexAccountModal.tsx
@@ -16,6 +16,8 @@ export default function AddCodexAccountModal({
   const [error, setError] = useState("");
   const [authUrl, setAuthUrl] = useState("");
   const [copied, setCopied] = useState(false);
+  const [manualCode, setManualCode] = useState("");
+  const [manualCodeBusy, setManualCodeBusy] = useState(false);
 
   const aliveRef = useRef(true);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -41,7 +43,13 @@ export default function AddCodexAccountModal({
     if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; }
   }, []);
 
+  const clearManualCode = useCallback(() => {
+    setManualCode("");
+    setManualCodeBusy(false);
+  }, []);
+
   const cancelLogin = useCallback(async () => {
+    clearManualCode();
     const flowId = flowRef.current;
     flowRef.current = null;
     setAuthUrl("");
@@ -54,9 +62,10 @@ export default function AddCodexAccountModal({
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ flowId }),
     }).catch(() => {});
-  }, [apiBase, stopPolling]);
+  }, [apiBase, clearManualCode, stopPolling]);
 
   useEffect(() => () => {
+    clearManualCode();
     aliveRef.current = false;
     loginAbortRef.current?.abort();
     loginAbortRef.current = null;
@@ -72,14 +81,16 @@ export default function AddCodexAccountModal({
         body: JSON.stringify({ flowId }),
       }).catch(() => {});
     }
-  }, [apiBase]);
+  }, [apiBase, clearManualCode]);
 
   const closeModal = useCallback(() => {
     if (step === "oauth-waiting") void cancelLogin();
     onCloseRef.current();
   }, [step, cancelLogin]);
 
   const startOAuth = useCallback(async (requestedId?: string) => {
+    clearManualCode();
+    flowRef.current = null;
     const controller = new AbortController();
     loginAbortRef.current?.abort();
     loginAbortRef.current = controller;
@@ -117,12 +128,14 @@ export default function AddCodexAccountModal({
             const st = await fetch(statusUrl).then(r => r.json()) as { status: string; error?: string };
             if (st.status === "done") {
               stopPolling();
+              clearManualCode();
               flowRef.current = null;
               if (!aliveRef.current) return;
               onAddedRef.current();
               onCloseRef.current();
             } else if (st.status === "error" || st.status === "expired") {
               stopPolling();
+              clearManualCode();
               flowRef.current = null;
               if (aliveRef.current) {
                 if (!reauthAccountId) setStep("pick");
@@ -133,6 +146,7 @@ export default function AddCodexAccountModal({
         }, 2000);
         timeoutRef.current = setTimeout(() => {
           if (pollRef.current) {
+            clearManualCode();
             void cancelLogin();
             if (aliveRef.current) {
               if (!reauthAccountId) setStep("pick");
@@ -145,7 +159,7 @@ export default function AddCodexAccountModal({
     } catch (e) {
       if (aliveRef.current && !(e instanceof Error && e.name === "AbortError")) setError(String(e));
     }
-  }, [apiBase, cancelLogin, reauthAccountId, stopPolling, t]);
+  }, [apiBase, cancelLogin, clearManualCode, reauthAccountId, stopPolling, t]);
 
   useEffect(() => {
     if (!reauthAccountId) {
@@ -179,6 +193,32 @@ export default function AddCodexAccountModal({
     }
   };
 
+  const submitManualCode = useCallback(async () => {
+    const flowId = flowRef.current;
+    const input = manualCode.trim();
+    if (!flowId || !input || manualCodeBusy) return;
+    setManualCodeBusy(true);
+    setManualCode("");
+    try {
+      const resp = await fetch(`${apiBase}/api/codex-auth/login/code`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ flowId, input }),
+      });
+      const data = await resp.json().catch(() => ({})) as { error?: string };
+      if (!aliveRef.current) return;
+      if (!resp.ok) {
+        setError(t("prov.pasteFail", { error: data.error ?? resp.statusText }));
+        return;
+      }
+      setError("");
+    } catch {
+      if (aliveRef.current) setError(t("modal.networkError"));
+    } finally {
+      if (aliveRef.current) setManualCodeBusy(false);
+    }
+  }, [apiBase, manualCode, manualCodeBusy, t]);
+
   // Focus-trap: focus first interactive element on mount, restore on unmount.
   useEffect(() => {
     previousFocusRef.current = document.activeElement as HTMLElement | null;
@@ -244,6 +284,37 @@ export default function AddCodexAccountModal({
             <button className="btn btn-ghost" onClick={copyLoginLink} disabled={!authUrl} style={{ width: "100%", justifyContent: "center", marginTop: 12 }}>
               <IconLink width={14} /> {copied ? t("codexAuth.loginLinkCopied") : t("codexAuth.copyLoginLink")}
             </button>
+            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 12 }}>
+              <div className="muted text-label">{t("prov.pasteRedirectHint")}</div>
+              <div style={{ display: "flex", gap: 8 }}>
+                <input
+                  type="text"
+                  autoComplete="off"
+                  spellCheck={false}
+                  value={manualCode}
+                  onChange={e => setManualCode(e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      void submitManualCode();
+                    }
+                  }}
+                  placeholder={t("prov.pasteRedirect")}
+                  aria-label={t("prov.pasteRedirect")}
+                  disabled={manualCodeBusy}
+                  className="input text-label"
+                  style={{ flex: 1 }}
+                />
+                <button
+                  className="btn btn-ghost"
+                  type="button"
+                  disabled={manualCodeBusy || !manualCode.trim() || !flowRef.current}
+                  onClick={() => void submitManualCode()}
+                >
+                  {manualCodeBusy ? t("prov.pasteSubmitting") : t("prov.pasteSubmit")}
+                </button>
+              </div>
+            </div>
             {error && <div className="notice notice-err" style={{ marginTop: 12 }}>{error}</div>}
             <div style={{ textAlign: "center", padding: "24px 0" }}>
               <span className="spin" style={{ width: 24, height: 24 }} />
diff --git a/src/codex/auth-api.ts b/src/codex/auth-api.ts
@@ -763,6 +763,24 @@ export async function handleCodexAuthAPI(
     }
   }
 
+  if (url.pathname === "/api/codex-auth/login/code" && req.method === "POST") {
+    const body = (await req.json().catch(() => ({}))) as { flowId?: unknown; input?: unknown };
+    const flowId = typeof body.flowId === "string" ? body.flowId.trim() : "";
+    const input = typeof body.input === "string" ? body.input : "";
+    if (!flowId) return jsonResponse({ error: "flowId required" }, 400);
+    if (input.length > 4096) return jsonResponse({ error: "input too long" }, 400);
+
+    // Import may yield; validate afterwards so cancel/replace cannot race a stale flow through.
+    const { submitManualLoginCode } = await import("../oauth");
+    const flow = codexAuthLoginState.get(flowId);
+    if (!flow) return jsonResponse({ error: "login flow expired or unknown" }, 400);
+    if (flow.status !== "pending") return jsonResponse({ error: "login flow is not pending" }, 400);
+
+    const result = submitManualLoginCode("chatgpt", input);
+    if (!result.ok) return jsonResponse({ error: result.error }, 400);
+    return jsonResponse({ ok: true }, 202);
+  }
+
   if (url.pathname === "/api/codex-auth/login/cancel" && req.method === "POST") {
     const body = (await req.json().catch(() => ({}))) as { flowId?: string };
     const { cancelLoginFlow } = await import("../oauth");
diff --git a/tests/codex-auth-api.test.ts b/tests/codex-auth-api.test.ts
@@ -806,6 +806,131 @@ describe("codex-auth API", () => {
     expect(data).toMatchObject({ status: "error", error: "Login cancelled" });
   });
 
+  describe("POST /api/codex-auth/login/code", () => {
+    async function startPendingFlow() {
+      const oauth = await import("../src/oauth");
+      const openUrlMod = await import("../src/lib/open-url");
+      const startSpy = spyOn(oauth, "startLoginFlow").mockResolvedValue({ url: "https://example.test/oauth" });
+      const statusSpy = spyOn(oauth, "getLoginStatus").mockReturnValue({
+        done: false,
+        loggedIn: false,
+      } as ReturnType<typeof oauth.getLoginStatus>);
+      const openSpy = spyOn(openUrlMod, "openUrl").mockImplementation(() => {});
+      const req = new Request("http://localhost/api/codex-auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: "{}",
+      });
+      const resp = await handleCodexAuthAPI(req, new URL(req.url), makeConfig());
+      const data = await resp!.json() as { flowId: string };
+      return {
+        flowId: data.flowId,
+        oauth,
+        async cleanup() {
+          const cancelReq = new Request("http://localhost/api/codex-auth/login/cancel", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ flowId: data.flowId }),
+          });
+          await handleCodexAuthAPI(cancelReq, new URL(cancelReq.url), makeConfig());
+          startSpy.mockRestore();
+          statusSpy.mockRestore();
+          openSpy.mockRestore();
+        },
+      };
+    }
+
+    function codeRequest(body: Record<string, unknown>): Request {
+      return new Request("http://localhost/api/codex-auth/login/code", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+    }
+
+    test("accepts a manual code only for the pending flow without reflecting it", async () => {
+      const flow = await startPendingFlow();
+      const pasted = "http://localhost:1455/auth/callback?code=secret-code&state=expected";
+      const submitSpy = spyOn(flow.oauth, "submitManualLoginCode").mockReturnValue({ ok: true });
+      try {
+        const req = codeRequest({ flowId: flow.flowId, input: pasted });
+        const resp = await handleCodexAuthAPI(req, new URL(req.url), makeConfig());
+        expect(resp!.status).toBe(202);
+        const responseText = await resp!.text();
+        expect(JSON.parse(responseText)).toEqual({ ok: true });
+        expect(submitSpy).toHaveBeenCalledTimes(1);
+        expect(submitSpy).toHaveBeenCalledWith("chatgpt", pasted);
+        expect(responseText).not.toContain(pasted);
+      } finally {
+        submitSpy.mockRestore();
+        await flow.cleanup();
+      }
+    });
+
+    test("rejects missing and unknown flow ids before submitting", async () => {
+      const oauth = await import("../src/oauth");
+      const submitSpy = spyOn(oauth, "submitManualLoginCode");
+      try {
+        for (const body of [{ input: "code" }, { flowId: "", input: "code" }, { flowId: "unknown", input: "code" }]) {
+          const req = codeRequest(body);
+          const resp = await handleCodexAuthAPI(req, new URL(req.url), makeConfig());
+          expect(resp!.status).toBe(400);
+        }
+        expect(submitSpy).not.toHaveBeenCalled();
+      } finally {
+        submitSpy.mockRestore();
+      }
+    });
+
+    test("rejects expired or mismatched non-pending flow ids", async () => {
+      const flow = await startPendingFlow();
+      const submitSpy = spyOn(flow.oauth, "submitManualLoginCode");
+      await flow.cleanup();
+      try {
+        for (const flowId of [flow.flowId, `${flow.flowId}-mismatch`]) {
+          const req = codeRequest({ flowId, input: "code" });
+          const resp = await handleCodexAuthAPI(req, new URL(req.url), makeConfig());
+          expect(resp!.status).toBe(400);
+        }
+        expect(submitSpy).not.toHaveBeenCalled();
+      } finally {
+        submitSpy.mockRestore();
+      }
+    });
+
+    test("rejects empty input and no shared login in progress", async () => {
+      const flow = await startPendingFlow();
+      try {
+        for (const input of ["", "   ", "raw-code"]) {
+          const req = codeRequest({ flowId: flow.flowId, input });
+          const resp = await handleCodexAuthAPI(req, new URL(req.url), makeConfig());
+          expect(resp!.status).toBe(400);
+        }
+      } finally {
+        await flow.cleanup();
+      }
+    });
+
+    test("rejects input over 4096 characters and allows the 4096 boundary to reach shared validation", async () => {
+      const flow = await startPendingFlow();
+      const submitSpy = spyOn(flow.oauth, "submitManualLoginCode").mockReturnValue({ ok: true });
+      try {
+        const oversizedReq = codeRequest({ flowId: flow.flowId, input: "x".repeat(4097) });
+        const oversizedResp = await handleCodexAuthAPI(oversizedReq, new URL(oversizedReq.url), makeConfig());
+        expect(oversizedResp!.status).toBe(400);
+        expect(submitSpy).not.toHaveBeenCalled();
+
+        const boundaryReq = codeRequest({ flowId: flow.flowId, input: "x".repeat(4096) });
+        const boundaryResp = await handleCodexAuthAPI(boundaryReq, new URL(boundaryReq.url), makeConfig());
+        expect(boundaryResp!.status).toBe(202);
+        expect(submitSpy).toHaveBeenCalledTimes(1);
+      } finally {
+        submitSpy.mockRestore();
+        await flow.cleanup();
+      }
+    });
+  });
+
   test("GET /api/codex-auth/login-status recovers done when a persisted account exists", async () => {
     saveCodexAccountCredential("pool-login-recovery", {
       accessToken: "tok",
