fix: add cancel button to ChatGPT login when OAuth in progress (#172)

## Summary

When user starts ChatGPT OAuth login and then closes the browser without
completing authorization, the loading state would stay stuck **for up to
5 minutes** because the `waitForCode` promise would not resolve/reject
until timeout. During this time, the UI was disabled and user couldn't
do anything.

Fix this by two improvements:

1. **Add a manual Cancel button** when in loading state - user can
immediately reset the UI and try login again without waiting for timeout
2. **Shorten callback timeout** from 5 minutes → 2 minutes for better UX
even if user forgets to cancel

## Screenshot

Before (stuck forever / 5min):
![image](https://user-images.githubusercontent.com/.../image.png)
*(provided by user)*

After (user can cancel):
The loading state now shows a "Cancel" button next to the in-progress
button.

## Testing

- Click "Login with ChatGPT Plus"
- Browser opens → close browser immediately
- Back to app → click "Cancel"
- UI resets, you can click login again

## Checklist

- [x] Code is typed with TypeScript (`strict: true`)
- [x] Pre-push typecheck + lint passes
- [x] Fix follows project conventions (no new dependencies, minimal
changes)
- [x] Fix addresses the root cause (user closes browser → no code
arrives → stuck)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Signed-off-by: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
Co-authored-by: Sun-sunshine06 <Sun-sunshine06@users.noreply.github.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: Sun-sunshine06

apps/desktop/src/main/codex-oauth-ipc.test.ts

@@ -303,7 +303,7 @@ describe('codex-oauth:v1:login', () => {
     });
 
     await register();
-    await expect(handlers.get('codex-oauth:v1:login')?.()).rejects.toThrow(/无法读取.*账户/);
+    await expect(handlers.get('codex-oauth:v1:login')?.()).rejects.toThrow(/ChatGPT.*ID/);
     expect(closeMock).toHaveBeenCalledTimes(1);
     expect(writeConfigMock).not.toHaveBeenCalled();
 
@@ -312,6 +312,30 @@ describe('codex-oauth:v1:login', () => {
     expect(stored).toBeNull();
     expect(fakeCachedConfig).toBeNull();
   });
+
+  it('aborts an in-flight login when cancel-login is invoked', async () => {
+    waitForCodeMock.mockImplementation(
+      async (_expectedState: string, signal?: AbortSignal) =>
+        await new Promise<never>((_resolve, reject) => {
+          if (signal?.aborted) {
+            reject(new Error('Codex OAuth callback aborted'));
+            return;
+          }
+          signal?.addEventListener(
+            'abort',
+            () => reject(new Error('Codex OAuth callback aborted')),
+            { once: true },
+          );
+        }),
+    );
+
+    await register();
+    const loginPromise = handlers.get('codex-oauth:v1:login')?.() as Promise<unknown>;
+    await expect(handlers.get('codex-oauth:v1:cancel-login')?.()).resolves.toBe(true);
+    await expect(loginPromise).rejects.toThrow(/Codex login cancelled/);
+    expect(closeMock).toHaveBeenCalled();
+    expect(writeConfigMock).not.toHaveBeenCalled();
+  });
 });
 
 describe('codex-oauth:v1:logout', () => {

apps/desktop/src/main/codex-oauth-ipc.ts

@@ -40,11 +40,11 @@ export { CHATGPT_CODEX_PROVIDER_ID };
 
 const CHATGPT_CODEX_PROVIDER: ProviderEntry = {
   id: CHATGPT_CODEX_PROVIDER_ID,
-  name: 'ChatGPT 订阅',
+  name: 'ChatGPT 璁㈤槄',
   builtin: false,
   wire: 'openai-codex-responses',
   // pi-ai's openai-codex-responses wire appends `/codex/responses` itself, so
-  // we store the bare base. Do not add `/codex` here — it'd produce
+  // we store the bare base. Do not add `/codex` here 鈥?it'd produce
   // `/codex/codex/responses`.
   baseUrl: 'https://chatgpt.com/backend-api',
   defaultModel: 'gpt-5.3-codex',
@@ -67,6 +67,8 @@ const CHATGPT_CODEX_PROVIDER: ProviderEntry = {
 };
 
 let tokenStoreSingleton: CodexTokenStore | null = null;
+let activeLoginAbortController: AbortController | null = null;
+let activeLoginPromise: Promise<CodexOAuthStatus> | null = null;
 
 /**
  * Lazily instantiated module-scoped store. Shared with Task 7's generate flow
@@ -81,9 +83,11 @@ export function getCodexTokenStore(): CodexTokenStore {
   return tokenStoreSingleton;
 }
 
-/** Test-only reset hook — vitest resets module state between test cases. */
+/** Test-only reset hook 鈥?vitest resets module state between test cases. */
 export function __resetCodexTokenStoreForTests(): void {
   tokenStoreSingleton = null;
+  activeLoginAbortController = null;
+  activeLoginPromise = null;
 }
 
 function extractEmail(jwt: string): string | null {
@@ -150,7 +154,7 @@ async function claimActiveProviderIfUnset(): Promise<void> {
   setCachedConfig(next);
 }
 
-async function runLogin(): Promise<CodexOAuthStatus> {
+async function runLoginFlow(abortController: AbortController): Promise<CodexOAuthStatus> {
   const pkce = generatePkce();
   const state = randomBytes(16).toString('hex');
   let server: CallbackServer | null = null;
@@ -163,11 +167,11 @@ async function runLogin(): Promise<CodexOAuthStatus> {
     });
     await shell.openExternal(authorizeUrl);
     logger.info('codex.oauth.login.started', { redirectUri: server.redirectUri });
-    const { code } = await server.waitForCode(state);
+    const { code } = await server.waitForCode(state, abortController.signal);
     const tokenSet: TokenSet = await exchangeCode(code, pkce.verifier, server.redirectUri);
     if (tokenSet.accountId === null) {
       throw new CodesignError(
-        'Codex 登录成功但无法读取 ChatGPT 账户 ID，请重试登录。',
+        'Codex 鐧诲綍鎴愬姛浣嗘棤娉曡鍙?ChatGPT 璐︽埛 ID锛岃閲嶈瘯鐧诲綍銆?',
         ERROR_CODES.PROVIDER_ERROR,
         { cause: null },
       );
@@ -192,6 +196,12 @@ async function runLogin(): Promise<CodexOAuthStatus> {
     logger.info('codex.oauth.login.ok', { accountId: stored.accountId, hasEmail: email !== null });
     return toStatus(stored);
   } catch (err) {
+    if (abortController.signal.aborted) {
+      logger.info('codex.oauth.login.cancelled');
+      throw new CodesignError('Codex login cancelled', ERROR_CODES.PROVIDER_ABORTED, {
+        cause: err,
+      });
+    }
     logger.error('codex.oauth.login.fail', {
       message: err instanceof Error ? err.message : String(err),
     });
@@ -206,6 +216,34 @@ async function runLogin(): Promise<CodexOAuthStatus> {
   }
 }
 
+async function runLogin(): Promise<CodexOAuthStatus> {
+  if (activeLoginPromise !== null) return activeLoginPromise;
+
+  const abortController = new AbortController();
+  activeLoginAbortController = abortController;
+
+  const promise = runLoginFlow(abortController);
+  const trackedPromise = promise.finally(() => {
+    if (activeLoginAbortController === abortController) {
+      activeLoginAbortController = null;
+    }
+    if (activeLoginPromise === trackedPromise) {
+      activeLoginPromise = null;
+    }
+  });
+
+  activeLoginPromise = trackedPromise;
+  return trackedPromise;
+}
+
+async function runCancelLogin(): Promise<boolean> {
+  if (activeLoginAbortController === null || activeLoginAbortController.signal.aborted) {
+    return false;
+  }
+  activeLoginAbortController.abort();
+  return true;
+}
+
 async function runLogout(): Promise<CodexOAuthStatus> {
   await getCodexTokenStore().clear();
   const cfg = getCachedConfig();
@@ -230,7 +268,7 @@ async function runLogout(): Promise<CodexOAuthStatus> {
  * `chatgpt-codex` with Phase 1's stale `wire`/`baseUrl`, overwrite with the
  * Phase 2 canonical values so the first generate after upgrade works without
  * requiring a manual re-login. No-op when the entry is absent or already
- * canonical. Safe to call on every boot — writes only when state diverges.
+ * canonical. Safe to call on every boot 鈥?writes only when state diverges.
  *
  * Phase 1 released the card in "coming soon" disabled mode, so this migration
  * only fires for users who ran this feat branch directly; zero writes on
@@ -256,5 +294,6 @@ export async function migrateStaleCodexEntryIfNeeded(): Promise<void> {
 export function registerCodexOAuthIpc(): void {
   ipcMain.handle('codex-oauth:v1:status', async (): Promise<CodexOAuthStatus> => runStatus());
   ipcMain.handle('codex-oauth:v1:login', async (): Promise<CodexOAuthStatus> => runLogin());
+  ipcMain.handle('codex-oauth:v1:cancel-login', async (): Promise<boolean> => runCancelLogin());
   ipcMain.handle('codex-oauth:v1:logout', async (): Promise<CodexOAuthStatus> => runLogout());
 }

apps/desktop/src/preload/index.ts

@@ -341,6 +341,7 @@ const api = {
   codexOAuth: {
     status: () => ipcRenderer.invoke('codex-oauth:v1:status') as Promise<CodexOAuthStatus>,
     login: () => ipcRenderer.invoke('codex-oauth:v1:login') as Promise<CodexOAuthStatus>,
+    cancelLogin: () => ipcRenderer.invoke('codex-oauth:v1:cancel-login') as Promise<boolean>,
     logout: () => ipcRenderer.invoke('codex-oauth:v1:logout') as Promise<CodexOAuthStatus>,
   },
   connection: {

apps/desktop/src/renderer/src/components/ChatgptLoginCard.test.tsx

@@ -57,6 +57,7 @@ describe('performLogin', () => {
     const api = {
       status: vi.fn(),
       login: vi.fn().mockResolvedValue(next),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const setStatus = vi.fn();
@@ -85,6 +86,7 @@ describe('performLogin', () => {
     const api = {
       status: vi.fn(),
       login: vi.fn().mockRejectedValue(new Error('network down')),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const setStatus = vi.fn();
@@ -99,13 +101,32 @@ describe('performLogin', () => {
       expect.objectContaining({ variant: 'error', description: 'network down' }),
     );
   });
+
+  it('silently resets loading when login is cancelled by the user', async () => {
+    const api = {
+      status: vi.fn(),
+      login: vi.fn().mockRejectedValue(new Error('Codex login cancelled')),
+      cancelLogin: vi.fn(),
+      logout: vi.fn(),
+    };
+    const setStatus = vi.fn();
+    const setLoading = vi.fn();
+    const pushToast = vi.fn();
+
+    await performLogin({ api, setStatus, setLoading, pushToast, strings: LOGIN_STRINGS });
+
+    expect(setStatus).not.toHaveBeenCalled();
+    expect(pushToast).not.toHaveBeenCalled();
+    expect(setLoading).toHaveBeenNthCalledWith(2, false);
+  });
 });
 
 describe('performLogout', () => {
   it('bails without calling the IPC when the confirm dialog is dismissed', async () => {
     const api = {
       status: vi.fn(),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn().mockResolvedValue(statusLoggedOut()),
     };
     const setStatus = vi.fn();
@@ -130,6 +151,7 @@ describe('performLogout', () => {
     const api = {
       status: vi.fn(),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn().mockResolvedValue(next),
     };
     const setStatus = vi.fn();
@@ -157,6 +179,7 @@ describe('performLogout', () => {
     const api = {
       status: vi.fn(),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn().mockRejectedValue(new Error('revoke failed')),
     };
     const setStatus = vi.fn();
@@ -184,6 +207,7 @@ describe('performFetchStatus', () => {
     const api = {
       status: vi.fn().mockResolvedValue(next),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const setStatus = vi.fn();
@@ -209,6 +233,7 @@ describe('performFetchStatus', () => {
     const api = {
       status: vi.fn().mockRejectedValue(new Error('IPC backend crashed')),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const setStatus = vi.fn();
@@ -236,6 +261,7 @@ describe('performFetchStatus', () => {
     const api = {
       status: vi.fn().mockResolvedValue(statusLoggedIn()),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const setStatus = vi.fn();
@@ -259,6 +285,7 @@ describe('performFetchStatus', () => {
     const api = {
       status: vi.fn().mockRejectedValue(new Error('boom')),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const setStatus = vi.fn();
@@ -280,6 +307,7 @@ describe('performFetchStatus', () => {
     const api = {
       status: vi.fn().mockRejectedValue('broken string'),
       login: vi.fn(),
+      cancelLogin: vi.fn(),
       logout: vi.fn(),
     };
     const pushToast = vi.fn();

apps/desktop/src/renderer/src/components/ChatgptLoginCard.tsx

@@ -24,6 +24,7 @@ export function resolveViewState(
 interface CodexOAuthApi {
   status(): Promise<CodexOAuthStatus>;
   login(): Promise<CodexOAuthStatus>;
+  cancelLogin(): Promise<boolean>;
   logout(): Promise<CodexOAuthStatus>;
 }
 
@@ -38,13 +39,19 @@ export interface PerformLoginDeps {
   strings: { failedTitle: string; unknownError: string };
 }
 
+function isCodexLoginCancelledError(err: unknown): boolean {
+  if (!(err instanceof Error)) return false;
+  return /Codex login cancelled|Codex OAuth callback aborted/.test(err.message);
+}
+
 export async function performLogin(deps: PerformLoginDeps): Promise<void> {
   deps.setLoading(true);
   try {
     const next = await deps.api.login();
     deps.setStatus(next);
     await deps.onStatusChange?.();
   } catch (err) {
+    if (isCodexLoginCancelledError(err)) return;
     deps.pushToast({
       variant: 'error',
       title: deps.strings.failedTitle,
@@ -157,6 +164,14 @@ export function ChatgptLoginCard({ onStatusChange }: ChatgptLoginCardProps) {
     });
   }, [onStatusChange, pushToast, t]);
 
+  const handleCancel = useCallback(async () => {
+    if (!window.codesign) return;
+    const cancelled = await window.codesign.codexOAuth.cancelLogin();
+    // When cancellation succeeds, the in-flight login promise will settle
+    // immediately and clear loading via performLogin's finally block.
+    if (!cancelled && mountedRef.current) setLoading(false);
+  }, []);
+
   const handleLogout = useCallback(async () => {
     if (!window.codesign) return;
     await performLogout({
@@ -211,12 +226,17 @@ export function ChatgptLoginCard({ onStatusChange }: ChatgptLoginCardProps) {
           {t('settings.providers.chatgptLogin.description')}
         </p>
       </div>
-      <div className="shrink-0">
+      <div className="shrink-0 flex items-center gap-[var(--space-2)]">
         {viewState === 'loading' ? (
-          <Button variant="primary" size="sm" disabled>
-            <Loader2 className="w-[var(--size-icon-sm)] h-[var(--size-icon-sm)] animate-spin" />
-            {t('settings.providers.chatgptLogin.inProgress')}
-          </Button>
+          <>
+            <Button variant="primary" size="sm" disabled>
+              <Loader2 className="w-[var(--size-icon-sm)] h-[var(--size-icon-sm)] animate-spin" />
+              {t('settings.providers.chatgptLogin.inProgress')}
+            </Button>
+            <Button variant="secondary" size="sm" onClick={() => void handleCancel()}>
+              {t('common.cancel')}
+            </Button>
+          </>
         ) : (
           <Button variant="primary" size="sm" onClick={() => void handleLogin()}>
             <Sparkles className="w-[var(--size-icon-sm)] h-[var(--size-icon-sm)]" />

packages/providers/src/codex/oauth-server.test.ts

@@ -85,12 +85,12 @@ describe('startCallbackServer', () => {
     await assertion;
   });
 
-  it('rejects after the 5-minute timeout', async () => {
+  it('rejects after the 2-minute timeout', async () => {
     vi.useFakeTimers();
     const server = await track(await startCallbackServer(0));
     const waiter = server.waitForCode('foo');
     const assertion = expect(waiter).rejects.toThrow(/timeout/);
-    await vi.advanceTimersByTimeAsync(5 * 60 * 1000 + 1000);
+    await vi.advanceTimersByTimeAsync(2 * 60 * 1000 + 1000);
     await assertion;
   });
 

packages/providers/src/codex/oauth-server.ts

@@ -19,7 +19,7 @@ interface PendingWait {
 }
 
 const DEFAULT_PORT = 1455;
-const CALLBACK_TIMEOUT_MS = 5 * 60 * 1000;
+const CALLBACK_TIMEOUT_MS = 2 * 60 * 1000;
 
 function escapeHtml(s: string): string {
   return s
@@ -132,7 +132,7 @@ export async function startCallbackServer(preferredPort?: number): Promise<Callb
       const timeout = setTimeout(() => {
         settle();
         pending = null;
-        reject(new Error('Codex OAuth callback timeout (5 minutes)'));
+        reject(new Error('Codex OAuth callback timeout (2 minutes)'));
       }, CALLBACK_TIMEOUT_MS);
 
       const onAbort = () => {