Reserve the OAuth sign-in window on the click, not after discovery (#1703)

The transparent DCR/CIMD connects and OAuth reconnect opened the popup only after their setup round trips answered. window.open needs transient user activation, which expires a few seconds after the click, so a slow API meant the browser refused the window and the connect ended silently. Claim the window on the click and navigate it when the authorization URL arrives; close it on the paths that end without signing in, and on cancel and unmount. Report a refused window instead of swallowing it, and render the sign-in error above the footer where the automatic flows can show it.

Rhys Sullivan committed 2 months ago

Commit 2bdbedf1 parent 9a38ab46 files · +593 −51Browse files

Unified · Split

6 files

.changeset/oauth-popup-reserve-on-click.md +9 −0
e2e/selfhost/mcp-oauth-slow-connect.test.ts +132 −0
packages/react/src/components/accounts-section.tsx +8 −0
packages/react/src/components/add-account-modal.test.ts +275 −4
packages/react/src/components/add-account-modal.tsx +79 −27
packages/react/src/plugins/oauth-sign-in.tsx +90 −20

.changeset/oauth-popup-reserve-on-click.md+9−0

@@ -0,0 +1,9 @@
	1	---
	2	"@executor-js/react": patch
	3	---
	4
	5	A slow OAuth discovery no longer kills the connect with no popup and no error
	6
	7	The transparent connect flows opened the sign-in window only after their setup round trips had answered: DCR after probe and dynamic registration, CIMD after minting the client, reconnect after starting the session. `window.open` needs transient user activation, which browsers expire a few seconds after the click, so once the API was slow enough the browser refused the window and the connect ended with nothing on screen but the button returning to "Connect". Every MCP integration takes that path.
	8
	9	The window is now claimed on the click itself and navigated when the authorization URL arrives, however long that takes, and it is closed again on the paths that end without signing in (failed probe, no registration endpoint, rejected registration, failed client mint) as well as on cancel and unmount. A window the browser does refuse is now reported instead of swallowed: the flows stop before their round trips, and the sign-in error renders above the dialog footer, where the automatic flows can actually show it, rather than inside a method tab panel they never render.

e2e/selfhost/mcp-oauth-slow-connect.test.ts+132−0

@@ -0,0 +1,132 @@
	1	// Selfhost browser coverage for the transparent DCR connect when OAuth
	2	// discovery is slow, the shape behind the report: "When I hit connect, it loads
	3	// for a second, but then theres no user feedback and nothing happens."
	4	//
	5	// One click runs probe -> register -> start. The first two are network round
	6	// trips, and `window.open` needs transient user activation, which a real
	7	// browser expires a few seconds after the click. The shipped code opened the
	8	// sign-in window AFTER both round trips, so once the API was slow the browser
	9	// refused it and the connect died silently. The window is now claimed on the
	10	// click and navigated later, so discovery latency no longer decides whether the
	11	// user can connect.
	12	//
	13	// What this scenario guards: the whole slow path still works end to end, with
	14	// the reservation threaded from the click through registration to a window that
	15	// really lands on the discovered authorization server.
	16	//
	17	// What it CANNOT guard, and why: Playwright drives Chromium in automation mode,
	18	// which never enforces the activation rule for `window.open` (verified headed
	19	// and headless, and with `--disable-popup-blocking` removed via
	20	// ignoreDefaultArgs). So a browser here opens the window no matter how stale
	21	// the click is, and this scenario passes against the pre-fix ordering too. The
	22	// ordering itself is pinned by unit tests over `runDcrConnect` in
	23	// packages/react/src/components/add-account-modal.test.ts, which do fail when
	24	// the reservation moves back after the round trips. See LEARNINGS.md.
	25	import { randomBytes } from "node:crypto";
	26
	27	import { expect } from "@effect/vitest";
	28	import { Effect } from "effect";
	29	import { composePluginApi } from "@executor-js/api/server";
	30	import { deriveMcpNamespace } from "@executor-js/plugin-mcp";
	31	import { mcpHttpPlugin } from "@executor-js/plugin-mcp/api";
	32	import { makeGreetingMcpServer, serveMcpServerWithOAuth } from "@executor-js/plugin-mcp/testing";
	33	import { IntegrationSlug } from "@executor-js/sdk/shared";
	34	import { OAuthTestServer } from "@executor-js/sdk/testing";
	35
	36	import { scenario } from "../src/scenario";
	37	import { Api, Browser, Target } from "../src/services";
	38
	39	const api = composePluginApi([mcpHttpPlugin()] as const);
	40
	41	// Comfortably past Chromium's ~5s transient user activation once both land on
	42	// the same click, and well under the step timeouts below.
	43	const STALL_MS = 3_500;
	44
	45	const isDiscoveryCall = (url: string): boolean =>
	46	url.includes("/api/oauth/probe") \|\| url.includes("/api/oauth/clients/register-dynamic");
	47
	48	scenario(
	49	"MCP OAuth · a slow discovery round trip still opens the sign-in window",
	50	{ timeout: 240_000 },
	51	Effect.scoped(
	52	Effect.gen(function* () {
	53	const target = yield* Target;
	54	const browser = yield* Browser;
	55	const { client: makeApiClient } = yield* Api;
	56	const oauth = yield* OAuthTestServer;
	57	const server = yield* serveMcpServerWithOAuth(
	58	() => makeGreetingMcpServer({ name: "slow-connect-mcp" }),
	59	{ path: "/mcp" },
	60	);
	61	const identity = yield* target.newIdentity();
	62	const client = yield* makeApiClient(api, identity);
	63	const displayName = `Slow MCP ${randomBytes(3).toString("hex")}`;
	64	const slug = IntegrationSlug.make(deriveMcpNamespace({ name: displayName }));
	65
	66	yield* Effect.gen(function* () {
	67	yield* browser.session(identity, async ({ page, step }) => {
	68	await step("Add an OAuth-protected MCP integration", async () => {
	69	const addUrl = new URL("/integrations/add/mcp", target.baseUrl);
	70	addUrl.searchParams.set("url", server.endpoint);
	71	await page.goto(addUrl.toString(), { waitUntil: "networkidle" });
	72	await page.getByText("How does this server authenticate?").waitFor({ timeout: 30_000 });
	73	await page.getByPlaceholder("e.g. Linear").fill(displayName);
	74	await page.getByRole("button", { name: "Add integration" }).click();
	75	await page.waitForURL(/\/integrations\/(?!add\b)[^/?]+$/, { timeout: 30_000 });
	76	await page.getByText("Connections").first().waitFor();
	77	});
	78
	79	await step("Make OAuth discovery slow, the way a degraded API is", async () => {
	80	// Delay the responses rather than the requests, so the app sees a
	81	// genuinely slow API and not a stalled network stack.
	82	await page.route(
	83	(url) => isDiscoveryCall(url.href),
	84	async (route) => {
	85	await new Promise((resolve) => setTimeout(resolve, STALL_MS));
	86	await route.continue();
	87	},
	88	);
	89	});
	90
	91	await step("Connect, and wait out the slow discovery", async () => {
	92	await page.getByRole("button", { name: "Add connection" }).first().click();
	93	await page.getByRole("heading", { name: /Add connection/ }).waitFor();
	94	await page.getByRole("tab", { name: "OAuth" }).waitFor();
	95
	96	const popupPromise = page.waitForEvent("popup", { timeout: 60_000 });
	97	await page.getByRole("button", { name: "Connect", exact: true }).click();
	98
	99	// In a real browser the two stalls outlast the click's user
	100	// activation, so this popup only exists because it was reserved on
	101	// the click. Automation-mode Chromium would open it either way;
	102	// the ordering is pinned by the unit tests named above.
	103	const popup = await popupPromise;
	104	await popup.waitForURL((url) => url.origin === new URL(oauth.issuerUrl).origin, {
	105	timeout: 60_000,
	106	});
	107	await popup.waitForLoadState("domcontentloaded", { timeout: 30_000 });
	108	expect(
	109	new URL(popup.url()).origin,
	110	"the reserved window reached the discovered authorization host",
	111	).toBe(new URL(oauth.authorizationEndpoint).origin);
	112	await popup.close();
	113	});
	114	});
	115
	116	const oauthRequests = yield* oauth.requests;
	117	expect(
	118	oauthRequests.some(
	119	(request) => request.method === "POST" && request.path === "/register",
	120	),
	121	"the slow connect still dynamically registered its OAuth client",
	122	).toBe(true);
	123	expect(
	124	oauthRequests.some(
	125	(request) => request.method === "GET" && request.path === "/authorize",
	126	),
	127	"the slow connect still reached the authorize endpoint",
	128	).toBe(true);
	129	}).pipe(Effect.ensuring(client.mcp.removeServer({ params: { slug } }).pipe(Effect.ignore)));
	130	}),
	131	).pipe(Effect.provide(OAuthTestServer.layer())),
	132	);

packages/react/src/components/accounts-section.tsx+8−0

       }
       const payload = oauthReconnectPayload(connection);
       if (payload === null) return;
+      // Claim the sign-in window on the click: `oauth.start` below is a network
+      // round trip, and the browser's user activation can expire before it
+      // answers, which would leave Reconnect silently doing nothing.
+      const reservation = oauthPopup.reserve();
+      if (reservation.kind === "blocked") return;
       // `oauth.start` discriminates the grant: client_credentials mints inline
       // (`status: "connected"`, no authorization URL) while authorization_code
       // returns a redirect the popup must complete. The popup hook only handles
         reactivityKeys: connectionWriteKeys,
       });
       if (Exit.isFailure(startExit)) {
+        oauthPopup.releaseReservation();
         toast.error(messageFromExit(startExit, "Failed to reconnect"));
         trackEvent("connection_reconnected", {
           integration_slug: String(connection.integration),
       }
       const started = startExit.value;
       if (started.status === "connected") {
+        oauthPopup.releaseReservation();
         toast.success("Reconnected");
         trackEvent("connection_reconnected", {
           integration_slug: String(connection.integration),
       }
       void oauthPopup.openAuthorization({
         owner: payload.owner,
+        reservation,
         run: () =>
           Promise.resolve({
             state: started.state,

packages/react/src/components/add-account-modal.test.ts+275−4

@@ -9,6 +9,7 @@ import { · 8 unmodified lines
9	} from "@executor-js/sdk/shared";	9	} from "@executor-js/sdk/shared";
10		10
11	import type { AuthMethod } from "../lib/auth-placements";	11	import type { AuthMethod } from "../lib/auth-placements";
		12	import type { OAuthPopupReservation } from "../plugins/oauth-sign-in";
12	import {	13	import {
13	connectionNameFrom,	14	connectionNameFrom,
14	connectionLabel,	15	connectionLabel,
@@ -57,7 +58,35 @@ type RegisterArgs = { · 42 unmodified lines
57	readonly originIntegration?: IntegrationSlug;	58	readonly originIntegration?: IntegrationSlug;
58	};	59	};
59		60
60	type StartArgs = { readonly client: OAuthClientSlug; readonly owner: Owner };	61	type StartArgs = {
		62	readonly client: OAuthClientSlug;
		63	readonly owner: Owner;
		64	readonly reservation: OAuthPopupReservation;
		65	};
		66
		67	// A reservation the browser honoured. The desktop shape is the one that carries
		68	// no `Window`, so the orchestrators' ordering is testable without a DOM.
		69	const RESERVED: OAuthPopupReservation = {
		70	kind: "desktop",
		71	bridge: { openExternal: (): Promise<void> => Promise.resolve() },
		72	};
		73
		74	/** Records the reserve/release calls alongside the network steps, so a test can
		75	* assert the window is claimed BEFORE the first round trip and closed again
		76	* whenever the flow ends without signing in. */
		77	const popupSpy = (reservation: OAuthPopupReservation = RESERVED) => {
		78	const calls: string[] = [];
		79	return {
		80	calls,
		81	reserve: (): OAuthPopupReservation => {
		82	calls.push("reserve");
		83	return reservation;
		84	},
		85	release: (): void => {
		86	calls.push("release");
		87	},
		88	};
		89	};
61		90
62	type CimdCreateArgs = {	91	type CimdCreateArgs = {
63	readonly owner: Owner;	92	readonly owner: Owner;
@@ -70,7 +99,11 @@ type CimdCreateArgs = { · 6 unmodified lines
70	readonly clientSecret: "";	99	readonly clientSecret: "";
71	};	100	};
72		101
73	type CimdStartArgs = { readonly client: OAuthClientSlug; readonly owner: Owner };	102	type CimdStartArgs = {
		103	readonly client: OAuthClientSlug;
		104	readonly owner: Owner;
		105	readonly reservation: OAuthPopupReservation;
		106	};
74		107
75	const TEST_INTEGRATION = IntegrationSlug.make("linear_mcp");	108	const TEST_INTEGRATION = IntegrationSlug.make("linear_mcp");
76		109
@@ -310,6 +343,8 @@ describe("runCimdConnect", () => { · 233 unmodified lines
310		343
311	const outcome = await runCimdConnect(	344	const outcome = await runCimdConnect(
312	{	345	{
		346	reserve: (): OAuthPopupReservation => RESERVED,
		347	release: (): void => {},
313	createClient: (args: CimdCreateArgs): Promise<OAuthClientSlug \| null> => {	348	createClient: (args: CimdCreateArgs): Promise<OAuthClientSlug \| null> => {
314	createArgs = args;	349	createArgs = args;
315	return Promise.resolve(args.slug);	350	return Promise.resolve(args.slug);
@@ -352,6 +387,8 @@ describe("runCimdConnect", () => { · 36 unmodified lines
352		387
353	const outcome = await runCimdConnect(	388	const outcome = await runCimdConnect(
354	{	389	{
		390	reserve: (): OAuthPopupReservation => RESERVED,
		391	release: (): void => {},
355	createClient: (): Promise<OAuthClientSlug \| null> => {	392	createClient: (): Promise<OAuthClientSlug \| null> => {
356	created = true;	393	created = true;
357	return Promise.resolve(OAuthClientSlug.make("new-client"));	394	return Promise.resolve(OAuthClientSlug.make("new-client"));
@@ -383,7 +420,221 @@ describe("runCimdConnect", () => { · 25 unmodified lines
383		420
384	expect(outcome).toEqual({ kind: "started", client: existingSlug, reused: true });	421	expect(outcome).toEqual({ kind: "started", client: existingSlug, reused: true });
385	expect(created).toBe(false);	422	expect(created).toBe(false);
386	expect(startArgs).toEqual({ client: existingSlug, owner: "user" });	423	expect(startArgs).toEqual({ client: existingSlug, owner: "user", reservation: RESERVED });
		424	});
		425	});
		426
		427	describe("runDcrConnect popup reservation", () => {
		428	const probeOk = (): Promise<ProbeResult> =>
		429	Promise.resolve({
		430	authorizationUrl: "https://auth.example.com/authorize",
		431	tokenUrl: "https://auth.example.com/token",
		432	registrationEndpoint: "https://auth.example.com/register",
		433	});
		434	const dcrInput = {
		435	discoveryUrl: "https://mcp.example.com/mcp",
		436	owner: "user" as Owner,
		437	integration: TEST_INTEGRATION,
		438	};
		439
		440	// The regression: probe and register are two round trips, and a browser stops
		441	// honouring `window.open` about five seconds after the click. Opening the
		442	// window after them is refused, so the connect ends with no popup, no error,
		443	// and the button back on "Connect". The window has to be claimed up front.
		444	it("claims the sign-in window BEFORE the first network call", async () => {
		445	const popup = popupSpy();
		446	const outcome = await runDcrConnect(
		447	{
		448	...popup,
		449	probe: (): Promise<ProbeResult> => {
		450	popup.calls.push("probe");
		451	return probeOk();
		452	},
		453	register: (): Promise<OAuthClientSlug> => {
		454	popup.calls.push("register");
		455	return Promise.resolve(OAuthClientSlug.make("mcp-app"));
		456	},
		457	start: (): void => {
		458	popup.calls.push("start");
		459	},
		460	},
		461	dcrInput,
		462	);
		463
		464	expect(outcome).toEqual({ kind: "started" });
		465	expect(popup.calls).toEqual(["reserve", "probe", "register", "start"]);
		466	});
		467
		468	it("hands the reserved window to start, so the flow navigates it rather than opening a new one", async () => {
		469	let startArgs: StartArgs \| null = null;
		470	const outcome = await runDcrConnect(
		471	{
		472	...popupSpy(),
		473	probe: probeOk,
		474	register: (): Promise<OAuthClientSlug> => Promise.resolve(OAuthClientSlug.make("mcp-app")),
		475	start: (args: StartArgs): void => {
		476	startArgs = args;
		477	},
		478	},
		479	dcrInput,
		480	);
		481
		482	expect(outcome).toEqual({ kind: "started" });
		483	expect(startArgs!.reservation).toBe(RESERVED);
		484	});
		485
		486	it("gives up before any network call when the browser refuses the window", async () => {
		487	const popup = popupSpy({ kind: "blocked" });
		488	let probed = false;
		489	const outcome = await runDcrConnect(
		490	{
		491	...popup,
		492	probe: (): Promise<ProbeResult> => {
		493	probed = true;
		494	return probeOk();
		495	},
		496	register: (): Promise<OAuthClientSlug> => Promise.resolve(OAuthClientSlug.make("mcp-app")),
		497	start: (): void => {},
		498	},
		499	dcrInput,
		500	);
		501
		502	// No BYO fallback: registering an app by hand cannot open a window either.
		503	expect(outcome).toEqual({ kind: "popup-blocked" });
		504	expect(probed).toBe(false);
		505	expect(popup.calls).toEqual(["reserve"]);
		506	});
		507
		508	// Reserving early means a flow that ends without signing in is holding an
		509	// about:blank window the user never asked for.
		510	it("closes the reserved window when the probe fails", async () => {
		511	const popup = popupSpy();
		512	const outcome = await runDcrConnect(
		513	{
		514	...popup,
		515	probe: (): Promise<ProbeResult \| null> => Promise.resolve(null),
		516	register: (): Promise<OAuthClientSlug> => Promise.resolve(OAuthClientSlug.make("mcp-app")),
		517	start: (): void => {},
		518	},
		519	dcrInput,
		520	);
		521
		522	expect(outcome).toEqual({ kind: "fallback", reason: "probe-failed" });
		523	expect(popup.calls).toEqual(["reserve", "release"]);
		524	});
		525
		526	it("closes the reserved window when the server advertises no registration endpoint", async () => {
		527	const popup = popupSpy();
		528	const outcome = await runDcrConnect(
		529	{
		530	...popup,
		531	probe: (): Promise<ProbeResult> =>
		532	Promise.resolve({
		533	authorizationUrl: "https://auth.example.com/authorize",
		534	tokenUrl: "https://auth.example.com/token",
		535	}),
		536	register: (): Promise<OAuthClientSlug> => Promise.resolve(OAuthClientSlug.make("mcp-app")),
		537	start: (): void => {},
		538	},
		539	dcrInput,
		540	);
		541
		542	expect(outcome.kind).toBe("fallback");
		543	expect(popup.calls).toEqual(["reserve", "release"]);
		544	});
		545
		546	it("closes the reserved window when registration is rejected", async () => {
		547	const popup = popupSpy();
		548	const outcome = await runDcrConnect(
		549	{
		550	...popup,
		551	probe: probeOk,
		552	register: (): Promise<{ readonly error: string }> =>
		553	Promise.resolve({ error: "redirect_uri not allowed" }),
		554	start: (): void => {},
		555	},
		556	dcrInput,
		557	);
		558
		559	expect(outcome).toMatchObject({ reason: "registration-failed" });
		560	expect(popup.calls).toEqual(["reserve", "release"]);
		561	});
		562
		563	it("keeps the reserved window open on the path that signs in", async () => {
		564	const popup = popupSpy();
		565	await runDcrConnect(
		566	{
		567	...popup,
		568	probe: probeOk,
		569	register: (): Promise<OAuthClientSlug> => Promise.resolve(OAuthClientSlug.make("mcp-app")),
		570	start: (): void => {},
		571	},
		572	dcrInput,
		573	);
		574
		575	expect(popup.calls).not.toContain("release");
		576	});
		577	});
		578
		579	describe("runCimdConnect popup reservation", () => {
		580	const cimdInput = {
		581	owner: "user" as Owner,
		582	integrationName: "PostHog API",
		583	authorizationUrl: "https://us.posthog.com/oauth/authorize/",
		584	tokenUrl: "https://us.posthog.com/oauth/token/",
		585	resource: null,
		586	clientIdMetadataDocumentUrl: "https://executor.example/api/oauth/client-id-metadata.json",
		587	existingClients: [],
		588	};
		589
		590	it("claims the sign-in window before minting the client", async () => {
		591	const popup = popupSpy();
		592	const outcome = await runCimdConnect(
		593	{
		594	...popup,
		595	createClient: (args: CimdCreateArgs): Promise<OAuthClientSlug> => {
		596	popup.calls.push("createClient");
		597	return Promise.resolve(args.slug);
		598	},
		599	start: (): void => {
		600	popup.calls.push("start");
		601	},
		602	},
		603	cimdInput,
		604	);
		605
		606	expect(outcome.kind).toBe("started");
		607	expect(popup.calls).toEqual(["reserve", "createClient", "start"]);
		608	});
		609
		610	it("closes the reserved window when minting the client fails", async () => {
		611	const popup = popupSpy();
		612	const outcome = await runCimdConnect(
		613	{
		614	...popup,
		615	createClient: (): Promise<OAuthClientSlug \| null> => Promise.resolve(null),
		616	start: (): void => {},
		617	},
		618	cimdInput,
		619	);
		620
		621	expect(outcome).toEqual({ kind: "failed", reason: "create-failed" });
		622	expect(popup.calls).toEqual(["reserve", "release"]);
		623	});
		624
		625	it("never claims a window when the method is missing its endpoints", async () => {
		626	const popup = popupSpy();
		627	const outcome = await runCimdConnect(
		628	{
		629	...popup,
		630	createClient: (): Promise<OAuthClientSlug \| null> => Promise.resolve(null),
		631	start: (): void => {},
		632	},
		633	{ ...cimdInput, tokenUrl: " " },
		634	);
		635
		636	expect(outcome).toEqual({ kind: "failed", reason: "missing-endpoints" });
		637	expect(popup.calls).toEqual([]);
387	});	638	});
388	});	639	});
389		640
@@ -416,7 +667,13 @@ describe("runDcrConnect", () => { · 26 unmodified lines
416	};	667	};
417		668
418	const outcome = await runDcrConnect(	669	const outcome = await runDcrConnect(
419	{ probe, register, start },	670	{
		671	reserve: (): OAuthPopupReservation => RESERVED,
		672	release: (): void => {},
		673	probe,
		674	register,
		675	start,
		676	},
420	{	677	{
421	discoveryUrl: "https://mcp.example.com/mcp",	678	discoveryUrl: "https://mcp.example.com/mcp",
422	owner: "user",	679	owner: "user",
@@ -454,6 +711,8 @@ describe("runDcrConnect", () => { · 31 unmodified lines
454	let registerArgs: RegisterArgs \| null = null;	711	let registerArgs: RegisterArgs \| null = null;
455	const outcome = await runDcrConnect(	712	const outcome = await runDcrConnect(
456	{	713	{
		714	reserve: (): OAuthPopupReservation => RESERVED,
		715	release: (): void => {},
457	probe: (): Promise<ProbeResult \| null> =>	716	probe: (): Promise<ProbeResult \| null> =>
458	Promise.resolve({	717	Promise.resolve({
459	authorizationUrl: "https://auth.example.com/authorize",	718	authorizationUrl: "https://auth.example.com/authorize",
@@ -490,6 +749,8 @@ describe("runDcrConnect", () => { · 30 unmodified lines
490	let registerArgs: RegisterArgs \| null = null;	749	let registerArgs: RegisterArgs \| null = null;
491	const outcome = await runDcrConnect(	750	const outcome = await runDcrConnect(
492	{	751	{
		752	reserve: (): OAuthPopupReservation => RESERVED,
		753	release: (): void => {},
493	probe: (): Promise<ProbeResult \| null> =>	754	probe: (): Promise<ProbeResult \| null> =>
494	Promise.resolve({	755	Promise.resolve({
495	authorizationUrl: "https://auth.example.com/authorize",	756	authorizationUrl: "https://auth.example.com/authorize",
@@ -517,6 +778,8 @@ describe("runDcrConnect", () => { · 21 unmodified lines
517	const calls: string[] = [];	778	const calls: string[] = [];
518	const outcome = await runDcrConnect(	779	const outcome = await runDcrConnect(
519	{	780	{
		781	reserve: (): OAuthPopupReservation => RESERVED,
		782	release: (): void => {},
520	probe: (): Promise<ProbeResult \| null> => {	783	probe: (): Promise<ProbeResult \| null> => {
521	calls.push("probe");	784	calls.push("probe");
522	return Promise.resolve({	785	return Promise.resolve({
@@ -554,6 +817,8 @@ describe("runDcrConnect", () => { · 31 unmodified lines
554	const calls: string[] = [];	817	const calls: string[] = [];
555	const outcome = await runDcrConnect(	818	const outcome = await runDcrConnect(
556	{	819	{
		820	reserve: (): OAuthPopupReservation => RESERVED,
		821	release: (): void => {},
557	probe: (): Promise<ProbeResult \| null> => {	822	probe: (): Promise<ProbeResult \| null> => {
558	calls.push("probe");	823	calls.push("probe");
559	return Promise.resolve(null);	824	return Promise.resolve(null);
@@ -580,6 +845,8 @@ describe("runDcrConnect", () => { · 20 unmodified lines
580	const calls: string[] = [];	845	const calls: string[] = [];
581	const outcome = await runDcrConnect(	846	const outcome = await runDcrConnect(
582	{	847	{
		848	reserve: (): OAuthPopupReservation => RESERVED,
		849	release: (): void => {},
583	probe: (): Promise<ProbeResult \| null> =>	850	probe: (): Promise<ProbeResult \| null> =>
584	Promise.resolve({	851	Promise.resolve({
585	authorizationUrl: "https://auth.example.com/authorize",	852	authorizationUrl: "https://auth.example.com/authorize",
@@ -620,6 +887,8 @@ describe("runDcrConnect", () => { · 34 unmodified lines
620	let started = false;	887	let started = false;
621	const outcome = await runDcrConnect(	888	const outcome = await runDcrConnect(
622	{	889	{
		890	reserve: (): OAuthPopupReservation => RESERVED,
		891	release: (): void => {},
623	probe: (): Promise<ProbeResult \| null> =>	892	probe: (): Promise<ProbeResult \| null> =>
624	Promise.resolve({	893	Promise.resolve({
625	authorizationUrl: "https://auth.example.com/authorize",	894	authorizationUrl: "https://auth.example.com/authorize",
@@ -659,6 +928,8 @@ describe("runDcrConnect", () => { · 33 unmodified lines
659	let registerArgs: RegisterArgs \| null = null;	928	let registerArgs: RegisterArgs \| null = null;
660	const outcome = await runDcrConnect(	929	const outcome = await runDcrConnect(
661	{	930	{
		931	reserve: (): OAuthPopupReservation => RESERVED,
		932	release: (): void => {},
662	probe: (): Promise<ProbeResult \| null> =>	933	probe: (): Promise<ProbeResult \| null> =>
663	Promise.resolve({	934	Promise.resolve({
664	issuer: "https://auth.example.com",	935	issuer: "https://auth.example.com",

packages/react/src/components/add-account-modal.tsx+79−27

   oauthClientIdMetadataDocumentUrl,
   useOAuthPopupFlow,
   type OAuthCompletionPayload,
+  type OAuthPopupReservation,
 } from "../plugins/oauth-sign-in";
 import {
   clientDisplayName,
 type RunCimdConnectDeps = {
   readonly createClient: (args: CimdCreateClientArgs) => Promise<OAuthClientSlug | null>;
-  readonly start: (args: { readonly client: OAuthClientSlug; readonly owner: Owner }) => void;
+  readonly start: (args: CimdStartArgs) => void;
+  /** Claim the sign-in window before any await. See `useOAuthPopupFlow.reserve`. */
+  readonly reserve: () => OAuthPopupReservation;
+  /** Close a claimed window this flow turned out not to need. */
+  readonly release: () => void;
+};
+type CimdStartArgs = {
+  readonly client: OAuthClientSlug;
+  readonly owner: Owner;
+  readonly reservation: OAuthPopupReservation;
 };
 type RunCimdConnectInput = {
 type CimdOutcome =
   | { readonly kind: "started"; readonly client: OAuthClientSlug; readonly reused: boolean }
+  | { readonly kind: "popup-blocked" }
   | { readonly kind: "failed"; readonly reason: "missing-endpoints" | "create-failed" };
 export async function runCimdConnect(
     return { kind: "failed", reason: "missing-endpoints" };
   }
+  // Claim the window while the click still counts. Minting the client is a
+  // round trip, and the browser stops honouring `window.open` once the
+  // activation from the click expires.
+  const reservation = deps.reserve();
+  if (reservation.kind === "blocked") return { kind: "popup-blocked" };
   const resource = input.resource ?? null;
   const existing = input.existingClients.find(
     (client) =>
   );
   if (existing) {
-    deps.start({ client: existing.slug, owner: input.owner });
+    deps.start({ client: existing.slug, owner: input.owner, reservation });
     return { kind: "started", client: existing.slug, reused: true };
   }
     clientId: input.clientIdMetadataDocumentUrl,
     clientSecret: "",
   });
-  if (created === null) return { kind: "failed", reason: "create-failed" };
+  if (created === null) {
-  deps.start({ client: created, owner: input.owner });
+    deps.release();
+    return { kind: "failed", reason: "create-failed" };
+  }
+  deps.start({ client: created, owner: input.owner, reservation });
   return { kind: "started", client: created, reused: false };
 }
 type DcrStartArgs = {
   readonly client: OAuthClientSlug;
   readonly owner: Owner;
+  readonly reservation: OAuthPopupReservation;
 };
 /** Outcome of the DCR orchestration. `"started"` means the OAuth flow handed
- *  off (the popup/inline start ran); `"fallback"` means we could not auto-set-up
+ *  off (the popup/inline start ran); `"popup-blocked"` means the browser refused
- *  — a failed probe, no registration endpoint, or a failed registration — and
+ *  the sign-in window, which no app picker can fix, so the caller reports it
- *  the caller should fall back to the bring-your-own-app picker. A failed probe
+ *  rather than falling back; `"fallback"` means we could not auto-set-up (a
+ *  failed probe, no registration endpoint, or a failed registration) and the
+ *  caller should fall back to the bring-your-own-app picker. A failed probe
  *  carries no probe result; the other two reasons always carry the probe that
  *  seeds the picker. */
 type DcrOutcome =
   | { readonly kind: "started" }
+  | { readonly kind: "popup-blocked" }
   | { readonly kind: "fallback"; readonly reason: "probe-failed" }
   | {
       readonly kind: "fallback";
   ) => Promise<OAuthClientSlug | { readonly error: string } | null>;
   /** Start the OAuth flow with the minted client (popup / inline). */
   readonly start: (args: DcrStartArgs) => void;
+  /** Claim the sign-in window before any await. See `useOAuthPopupFlow.reserve`. */
+  readonly reserve: () => OAuthPopupReservation;
+  /** Close a claimed window this flow turned out not to need. */
+  readonly release: () => void;
 };
 type RunDcrConnectInput = {
 const DCR_CLIENT_NAME = "Executor";
 /**
- * Run the transparent DCR connect sequence: probe → register → start.
+ * Run the transparent DCR connect sequence: reserve → probe → register → start.
  *
+ * - Popup refused → `{ kind: "popup-blocked" }` before any network call.
  * - Probe failure → `{ kind: "fallback", reason: "probe-failed" }` (caller shows BYO).
  * - No registration endpoint → `{ kind: "fallback", reason: "no-registration-endpoint", probe }`.
  * - Register rejected with a message → `{ kind: "fallback", reason: "registration-failed", probe, message }`
   deps: RunDcrConnectDeps,
   input: RunDcrConnectInput,
 ): Promise<DcrOutcome> {
+  // Claim the sign-in window FIRST, on the click that got us here. Probe and
+  // register are two network round trips; the browser's user activation expires
+  // well before they finish, so a window opened after them is refused and the
+  // connect dies with nothing on screen.
+  const reservation = deps.reserve();
+  if (reservation.kind === "blocked") return { kind: "popup-blocked" };
   const probe = await deps.probe(input.discoveryUrl);
-  if (probe === null) return { kind: "fallback", reason: "probe-failed" };
+  if (probe === null) {
+    deps.release();
+    return { kind: "fallback", reason: "probe-failed" };
+  }
   const registrationEndpoint = probe.registrationEndpoint;
-  if (!registrationEndpoint) return { kind: "fallback", reason: "no-registration-endpoint", probe };
+  if (!registrationEndpoint) {
+    deps.release();
+    return { kind: "fallback", reason: "no-registration-endpoint", probe };
+  }
   const slug = optimisticDcrClientSlug(probe.issuer ?? registrationEndpoint);
   const scopes = registrationScopes(input.declaredScopes ?? [], probe.scopesSupported ?? []);
     redirectUri: input.redirectUri,
     originIntegration: input.integration,
   });
-  if (minted === null) return { kind: "fallback", reason: "registration-failed", probe };
+  if (minted === null) {
+    deps.release();
+    return { kind: "fallback", reason: "registration-failed", probe };
+  }
   // OAuthClientSlug is a branded string; an object return carries the failure
   // message (e.g. the server rejected the redirect URI) for the BYO fallback.
   if (typeof minted === "object") {
+    deps.release();
     return { kind: "fallback", reason: "registration-failed", probe, message: minted.error };
   }
-  deps.start({ client: minted, owner: input.owner });
+  deps.start({ client: minted, owner: input.owner, reservation });
   return { kind: "started" };
 }
     setCimdBusy(true);
     const outcome = await runCimdConnect(
       {
+        reserve: oauthPopup.reserve,
+        release: oauthPopup.releaseReservation,
         createClient: async (args: CimdCreateClientArgs): Promise<OAuthClientSlug | null> => {
           const exit = await doCreateOAuthClient({
             payload: {
           if (Exit.isFailure(exit)) return null;
           return exit.value.client;
         },
-        start: (args: { readonly client: OAuthClientSlug; readonly owner: Owner }): void => {
+        start: (args: CimdStartArgs): void => {
           void oauthPopup.start({
+            reservation: args.reservation,
             payload: {
               client: args.client,
               // CIMD creates the public client under the connection owner, so
     setDcrBusy(true);
     const outcome = await runDcrConnect(
       {
+        reserve: oauthPopup.reserve,
+        release: oauthPopup.releaseReservation,
         probe: async (url: string): Promise<DcrProbeResult | null> => {
           const exit = await doProbe({ payload: { url }, reactivityKeys: [] });
           if (Exit.isFailure(exit)) return null;
         },
         start: (args: DcrStartArgs): void => {
           void oauthPopup.start({
+            reservation: args.reservation,
             payload: {
               client: args.client,
               // DCR registers the client under the connection owner, so the app
       success: outcome.kind === "started",
       ...(outcome.kind === "fallback" ? { dcr_fallback: true } : {}),
     });
+    // Deliberately absent: a "popup-blocked" branch. Registering an app by hand
+    // does not make the browser open a window, so dropping to the BYO picker
+    // would send the user down a path that cannot succeed either. `reserve`
+    // already put the reason in `oauthPopup.error`, which the footer renders.
     if (outcome.kind === "fallback") {
       setOAuthFallbackProbe("probe" in outcome ? outcome.probe : null);
       setDcrFailed(true);
                                     : `${integrationName} supports Client ID Metadata Document OAuth. We'll use this Executor host's public client metadata document and sign you in.`}
                                 </p>
                               </div>
-                            ) : dcrActive ? (
-                              // Transparent DCR: no picker. We register an app for you and run
-                              // the OAuth flow with a single Connect click.
-                              <div className="space-y-2 rounded-lg border border-ring/40 bg-accent/30 px-3 py-3">
-                                <p className="text-sm font-medium">No app to choose</p>
-                                <p className="text-xs text-muted-foreground">
-                                  {dcrConnecting
-                                    ? `Connecting to ${integrationName}…`
-                                    : `${integrationName} supports automatic setup. We register an app for you and sign you in — no client ID or app to pick.`}
-                                </p>
-                              </div>
                             ) : oauthLoading ? (
                               <p className="text-xs text-muted-foreground">Loading OAuth apps…</p>
                             ) : (
                               />
                             </div>
                           )}
-                          {isOAuth && oauthPopup.error ? (
-                            <p className="text-xs text-destructive">{oauthPopup.error}</p>
-                          ) : null}
                         </div>
                       )}
                     </TabsContent>
                 {continueError}
               </p>
             ) : null}
+            {/* Above the footer, not inside the method tab: the automatic
+                (CIMD/DCR) flows render no tab panel at all, and putting the
+                sign-in error in there left a blocked popup with nothing on
+                screen but the button returning to "Connect". */}
+            {isOAuth && oauthPopup.error ? (
+              <p role="alert" className="px-1 text-xs text-destructive">
+                {oauthPopup.error}
+              </p>
+            ) : null}
             <DialogFooter>
               <Button
                 type="button"

packages/react/src/plugins/oauth-sign-in.tsx+90−20

   openOAuthSystemBrowser,
   reserveOAuthPopup,
   type OAuthPopupResult,
+  type ReservedOAuthPopup,
 } from "../api/oauth-popup";
 import { connectionWriteKeys } from "../api/reactivity-keys";
 import { getActiveOrgSlug } from "../api/server-connection";
-type DesktopBridge = {
+export type DesktopBridge = {
   readonly openExternal: (url: string) => Promise<void>;
 };
   readonly onSuccess: (payload: TPayload) => void | Promise<void>;
   readonly onError?: (error: string) => void;
   readonly onAuthorizationStarted?: (result: OAuthAuthorizationStartResult) => void;
+  /** Window reserved on the click that began this flow. See `reserve`. */
+  readonly reservation?: OAuthPopupReservation;
 };
+/**
+ * A sign-in window claimed synchronously inside a click handler.
+ *
+ * `window.open` requires transient user activation, which Chromium expires
+ * about five seconds after the click. Any flow that awaits the network before
+ * it has an authorization URL (DCR probes then registers, CIMD creates a
+ * client, reconnect starts a session) therefore cannot open the window when the
+ * URL finally arrives: by then the activation is gone and the browser refuses
+ * silently. Those flows reserve a blank window on the click and navigate it
+ * later, however long the round trips take.
+ *
+ * Desktop hosts hand the URL to the real browser, so they reserve nothing and
+ * carry the bridge that will open it instead.
+ */
+export type OAuthPopupReservation =
+  | { readonly kind: "desktop"; readonly bridge: DesktopBridge }
+  | { readonly kind: "window"; readonly popup: ReservedOAuthPopup }
+  | { readonly kind: "blocked" };
+const POPUP_BLOCKED_MESSAGE = "Sign-in popup was blocked by the browser";
 export type OAuthAuthorizationStartResult = {
   /** OAuth correlation token (was the v1 session id). */
   readonly state: string;
   readonly onError?: (error: string, details?: string) => void;
   readonly onAuthorizationStarted?: (result: OAuthAuthorizationStartResult) => void;
   readonly reportMetadata?: Record<string, string | number | boolean | null | undefined>;
+  /** Window reserved on the click that began this flow. See `reserve`. */
+  readonly reservation?: OAuthPopupReservation;
 };
 export function oauthCallbackUrl(path = "/api/oauth/callback"): string {
   const doCancelOAuth = useAtomSet(cancelOAuth, { mode: "promiseExit" });
   const doOAuthConnectionCompleted = useAtomSet(oauthConnectionCompleted, { mode: "promiseExit" });
   const reportHandledError = useReportHandledError();
+  const blockedMessage = popupBlockedMessage ?? POPUP_BLOCKED_MESSAGE;
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const cleanupRef = useRef<(() => void) | null>(null);
   const sessionRef = useRef<{ readonly state: string } | null>(null);
+  // A window reserved on the click but not yet handed to a flow owns nothing
+  // that would close it: `cleanupRef` is only set once the authorization URL
+  // exists. Hold it here so cancel and unmount can close it, or abandoning a
+  // connect mid-probe strands a blank popup on screen.
+  const reservationRef = useRef<ReservedOAuthPopup | null>(null);
+  const releaseReservation = useCallback(() => {
+    reservationRef.current?.popup.close();
+    reservationRef.current = null;
+  }, []);
   const cancelSession = useCallback(
     (state: string) => {
     cleanupRef.current?.();
     cleanupRef.current = null;
     sessionRef.current = null;
+    releaseReservation();
     if (session) cancelSession(session.state);
     setBusy(false);
-  }, [cancelSession]);
+  }, [cancelSession, releaseReservation]);
   useEffect(
     () => () => {
       cleanupRef.current?.();
       cleanupRef.current = null;
       sessionRef.current = null;
+      reservationRef.current?.popup.close();
+      reservationRef.current = null;
       if (session) cancelSession(session.state);
     },
     [cancelSession],
   );
+  /**
+   * Claim the sign-in window NOW, while the click still carries user
+   * activation, and return what was claimed so the caller can abandon a flow
+   * the browser already refused instead of running a doomed authorization.
+   *
+   * Callers that reach `openAuthorization` synchronously do not need this; it
+   * reserves for itself.
+   */
+  const reserve = useCallback((): OAuthPopupReservation => {
+    // Tear the previous flow down BEFORE opening: `window.open` reuses a window
+    // already carrying `popupName`, so cancelling afterwards would close the
+    // very window just reserved.
+    cancel();
+    const bridge = getDesktopBridge();
+    if (bridge !== null) return { kind: "desktop", bridge };
+    const popup = reserveOAuthPopup({ popupName });
+    if (popup === null) {
+      trackEvent("oauth_popup_blocked");
+      setError(blockedMessage);
+      return { kind: "blocked" };
+    }
+    reservationRef.current = popup;
+    return { kind: "window", popup };
+  }, [blockedMessage, cancel, popupName]);
   const openAuthorization = useCallback(
     async (input: StartOAuthAuthorizationInput<TPayload>) => {
-      cancel();
+      // A caller that reserved on its own click already ran `cancel` inside
-      setBusy(true);
+      // `reserve`; cancelling again here would close the window it reserved.
-      setError(null);
+      const reservation = input.reservation ?? reserve();
-      const desktopBridge = getDesktopBridge();
+      if (reservation.kind === "blocked") {
-      // Desktop hosts open the auth URL in the user's real browser, so we skip
-      // the in-page popup reservation entirely and rely on the polling channel
-      // for the result.
-      const reservedPopup = desktopBridge ? null : reserveOAuthPopup({ popupName });
-      if (!desktopBridge && !reservedPopup) {
-        const message = popupBlockedMessage ?? "Sign-in popup was blocked by the browser";
-        trackEvent("oauth_popup_blocked");
         setBusy(false);
-        setError(message);
+        setError(blockedMessage);
-        input.onError?.(message);
+        input.onError?.(blockedMessage);
         return;
       }
+      setBusy(true);
+      setError(null);
+      // Desktop hosts open the auth URL in the user's real browser, so they
+      // reserve no in-page window and rely on the polling channel for the
+      // result.
+      const desktopBridge = reservation.kind === "desktop" ? reservation.bridge : null;
+      const reservedPopup = reservation.kind === "window" ? reservation.popup : null;
+      // The window's lifetime now belongs to this flow's teardown, which closes
+      // it on every failure path below.
+      reservationRef.current = null;
       const startExit = await Effect.runPromiseExit(
         Effect.tryPromise({
           try: input.run,
         cleanupRef.current = null;
         sessionRef.current = null;
         cancelSession(response.state);
-        const message = popupBlockedMessage ?? "Sign-in popup was blocked by the browser";
         trackEvent("oauth_completed", { success: false });
         setBusy(false);
-        setError(message);
+        setError(blockedMessage);
-        input.onError?.(message);
+        input.onError?.(blockedMessage);
       };
       cleanupRef.current = desktopBridge
           });
     },
     [
-      cancel,
+      blockedMessage,
       cancelSession,
       detectPopupClosed,
       doOAuthConnectionCompleted,
       noAuthorizationUrlMessage,
-      popupBlockedMessage,
       popupClosedMessage,
       popupName,
       reportHandledError,
+      reserve,
       startErrorMessage,
     ],
   );
         onSuccess: input.onSuccess,
         onError: input.onError,
         onAuthorizationStarted: input.onAuthorizationStarted,
+        ...(input.reservation === undefined ? {} : { reservation: input.reservation }),
         reportMetadata: {
           client: String(input.payload.client),
           integration: String(input.payload.integration),
     start,
     openAuthorization,
     cancel,
+    reserve,
+    releaseReservation,
   };
 }