Make OAuth sign-in easy to cancel and retry

Rhys Sullivan committed 1 month ago

Commit 1b19b371 parent c6d10835 files · +321 −58Browse files

Unified · Split

5 files

.changeset/connection-oauth-cancel.md +5 −0
e2e/scenarios/connection-setup-ux.test.ts +128 −0
packages/react/src/components/add-account-modal.test.ts +26 −0
packages/react/src/components/add-account-modal.tsx +83 −17
packages/react/src/plugins/oauth-sign-in.tsx +79 −41

.changeset/connection-oauth-cancel.md+5−0

@@ -0,0 +1,5 @@
	1	---
	2	"executor": patch
	3	---
	4
	5	Show a clear, cancellable sign-in state and prevent cancelled OAuth requests from disrupting a retry.

e2e/scenarios/connection-setup-ux.test.ts+128−0

@@ -288,3 +288,131 @@ scenario( · 287 unmodified lines
288	}),	288	}),
289	),	289	),
290	);	290	);
		291
		292	scenario(
		293	"Connection setup · an interrupted OAuth popup can be cancelled and retried",
		294	{},
		295	Effect.scoped(
		296	Effect.gen(function* () {
		297	const { browser, identity, slug, client, emulator } = yield* fixture;
		298	yield* browser.session(identity, async ({ page, step }) => {
		299	await step("Start provider sign-in without entering a name", async () => {
		300	await visit(page, `/integrations/${slug}?addAccount=1`);
		301	await page.getByRole("tab", { name: "OAuth2", exact: true }).click();
		302	const opened = page.waitForEvent("popup");
		303	await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
		304	const popup = await opened;
		305	await popup.waitForURL(/oauth\/v2\/authorize/);
		306	await popup.close();
		307	});
		308	await step("Cancel the waiting sign-in and retry", async () => {
		309	const cancel = page.getByRole("button", { name: "Cancel sign-in", exact: true });
		310	expect(
		311	await cancel.isVisible(),
		312	"an interrupted provider window must not strand Connecting forever",
		313	).toBe(true);
		314	expect(await cancel.isEnabled()).toBe(true);
		315	await page.getByText("Continue in the sign-in window", { exact: true }).waitFor();
		316	expect(
		317	await page.getByRole("button", { name: "Connecting…", exact: true }).count(),
		318	"waiting for provider consent must not leave a dead Connecting button",
		319	).toBe(0);
		320	await cancel.click();
		321	expect(
		322	await page.getByRole("button", { name: "Connect with OAuth", exact: true }).isEnabled(),
		323	).toBe(true);
		324	const opened = page.waitForEvent("popup");
		325	await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
		326	const popup = await opened;
		327	await popup.waitForURL(/oauth\/v2\/authorize/);
		328	await popup.route("https://emulators.dev/oauth/v2/authorize/callback", (route) =>
		329	route.continue({ url: `${emulator.baseUrl}/oauth/v2/authorize/callback` }),
		330	);
		331	await popup.getByRole("button", { name: /admin/ }).click();
		332	await page.getByRole("dialog").waitFor({ state: "hidden", timeout: 30_000 });
		333	});
		334	});
		335	const connections = yield* client.connections.list({ query: { integration: slug } });
		336	expect(connections, "retry finishes and persists exactly one connection").toHaveLength(1);
		337	}),
		338	),
		339	);
		340
		341	scenario(
		342	"Connection setup · cancelling a pending OAuth start ignores its late response",
		343	{},
		344	Effect.scoped(
		345	Effect.gen(function* () {
		346	const { browser, identity, slug, client, emulator } = yield* fixture;
		347	yield* browser.session(identity, async ({ page, step }) => {
		348	const released = Promise.withResolvers<void>();
		349	const started = Promise.withResolvers<string>();
		350	const completed = Promise.withResolvers<void>();
		351	await page.route(
		352	"**/api/oauth/start",
		353	async (route) => {
		354	const response = await route.fetch();
		355	const body: unknown = await response.json();
		356	if (
		357	typeof body !== "object" \|\|
		358	body === null \|\|
		359	!("state" in body) \|\|
		360	typeof body.state !== "string"
		361	) {
		362	expect.fail("the held start response must contain its OAuth session state");
		363	}
		364	started.resolve(body.state);
		365	await released.promise;
		366	await route.fulfill({ response });
		367	completed.resolve();
		368	},
		369	{ times: 1 },
		370	);
		371	try {
		372	await step("Cancel while the authorization response is still in flight", async () => {
		373	await visit(page, `/integrations/${slug}?addAccount=1`);
		374	const opened = page.waitForEvent("popup");
		375	await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
		376	const popup = await opened;
		377	const oldState = await started.promise;
		378	await page.getByRole("button", { name: "Cancel sign-in", exact: true }).click();
		379	await expect.poll(() => popup.isClosed()).toBe(true);
		380	const cancelled = page.waitForResponse((response) =>
		381	response.url().endsWith("/api/oauth/cancel"),
		382	);
		383	const retryOpened = page.waitForEvent("popup");
		384	await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
		385	const retryPopup = await retryOpened;
		386	await retryPopup.waitForURL(/oauth\/v2\/authorize/);
		387	released.resolve();
		388	await completed.promise;
		389	const cancellation = await cancelled;
		390	expect(
		391	cancellation.request().postDataJSON(),
		392	"only the old session is cancelled",
		393	).toEqual({ state: oldState });
		394	expect(
		395	retryPopup.isClosed(),
		396	"the old response cannot close the new sign-in window",
		397	).toBe(false);
		398	expect(
		399	page.context().pages(),
		400	"only the replacement sign-in window remains",
		401	).toHaveLength(2);
		402	await page.getByText("Continue in the sign-in window", { exact: true }).waitFor();
		403	await retryPopup.route("https://emulators.dev/oauth/v2/authorize/callback", (route) =>
		404	route.continue({ url: `${emulator.baseUrl}/oauth/v2/authorize/callback` }),
		405	);
		406	await retryPopup.getByRole("button", { name: /admin/ }).click();
		407	await page.getByRole("dialog").waitFor({ state: "hidden", timeout: 30_000 });
		408	});
		409	} finally {
		410	released.resolve();
		411	await page.unrouteAll({ behavior: "wait" });
		412	}
		413	});
		414	const connections = yield* client.connections.list({ query: { integration: slug } });
		415	expect(connections, "the newer attempt survives and completes consent").toHaveLength(1);
		416	}),
		417	),
		418	);

packages/react/src/components/add-account-modal.test.ts+26−0

     const outcome = await runCimdConnect(
       {
+        isActive: () => true,
         reserve: (): OAuthPopupReservation => RESERVED,
         release: (): void => {},
         createClient: (args: CimdCreateArgs): Promise<OAuthClientSlug | null> => {
     const outcome = await runCimdConnect(
       {
+        isActive: () => true,
         reserve: (): OAuthPopupReservation => RESERVED,
         release: (): void => {},
         createClient: (): Promise<OAuthClientSlug | null> => {
     const popup = popupSpy();
     const outcome = await runCimdConnect(
       {
+        isActive: () => true,
         ...popup,
         createClient: (args: CimdCreateArgs): Promise<OAuthClientSlug> => {
           popup.calls.push("createClient");
     const popup = popupSpy();
     const outcome = await runCimdConnect(
       {
+        isActive: () => true,
         ...popup,
         createClient: (): Promise<OAuthClientSlug | null> => Promise.resolve(null),
         start: (): void => {},
     expect(popup.calls).toEqual(["reserve", "release"]);
   });
+  it("does not start sign-in after cancellation during client setup", async () => {
+    const created = Promise.withResolvers<OAuthClientSlug | null>();
+    const popup = popupSpy();
+    let active = true;
+    const connecting = runCimdConnect(
+      {
+        ...popup,
+        isActive: () => active,
+        createClient: () => created.promise,
+        start: () => {
+          popup.calls.push("start");
+        },
+      },
+      cimdInput,
+    );
+    active = false;
+    created.resolve(OAuthClientSlug.make("cancelled-client"));
+    expect(await connecting).toEqual({ kind: "aborted" });
+    expect(popup.calls).toEqual(["reserve", "release"]);
+  });
   it("never claims a window when the method is missing its endpoints", async () => {
     const popup = popupSpy();
     const outcome = await runCimdConnect(
       {
+        isActive: () => true,
         ...popup,
         createClient: (): Promise<OAuthClientSlug | null> => Promise.resolve(null),
         start: (): void => {},

packages/react/src/components/add-account-modal.tsx+83−17

   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "./dropdown-menu";
-import { ChevronDown, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "lucide-react";
+import {
+  ChevronDown,
+  EyeIcon,
+  EyeOffIcon,
+  LoaderCircleIcon,
+  PanelsTopLeftIcon,
+  PlusIcon,
+  XIcon,
+} from "lucide-react";
 import {
   Dialog,
   DialogContent,
 };
 type RunCimdConnectDeps = {
+  readonly isActive: () => boolean;
   readonly createClient: (args: CimdCreateClientArgs) => Promise<OAuthClientSlug | null>;
   readonly start: (args: CimdStartArgs) => void;
   /** Claim the sign-in window before any await. See `useOAuthPopupFlow.reserve`. */
 type CimdOutcome =
   | { readonly kind: "started"; readonly client: OAuthClientSlug; readonly reused: boolean }
+  | { readonly kind: "aborted" }
   | { readonly kind: "popup-blocked" }
   | { readonly kind: "failed"; readonly reason: "missing-endpoints" | "create-failed" };
   if (reservation.kind === "blocked") return { kind: "popup-blocked" };
   const resolved = await resolveCimdClient(deps, input);
+  if (!deps.isActive()) {
+    deps.release();
+    return { kind: "aborted" };
+  }
   if (resolved.kind === "failed") {
     deps.release();
     return resolved;
   const oauthBusy = ccBusy || oauthPopup.busy;
   const cimdConnecting = cimdBusy || oauthPopup.busy;
   const dcrConnecting = dcrBusy || oauthPopup.busy;
-  const automaticOAuthConnecting = cimdConnecting || dcrConnecting;
+  const signInPending = cimdBusy || dcrBusy || oauthPopup.busy;
+  const automaticAttemptRef = useRef(0);
+  const cancelSignIn = () => {
+    automaticAttemptRef.current += 1;
+    oauthPopup.cancel();
+    setCimdBusy(false);
+    setDcrBusy(false);
+  };
   // "Connection saved to" for a PICKED BYO OAuth app. Cloud: a Workspace (`org`)
   // app can mint Personal or Workspace connections; a Personal (`user`) app can
     const cimdOwner = owner;
     const connectionName = previewConnectionName(label, cimdOwner);
     const identityLabel = typedIdentityLabel(label);
+    const attempt = ++automaticAttemptRef.current;
+    const isActive = () => viewMountedRef.current && attempt === automaticAttemptRef.current;
     setCimdBusy(true);
     const outcome = await runCimdConnect(
       {
         reserve: oauthPopup.reserve,
-        release: oauthPopup.releaseReservation,
+        release: () => {
+          if (attempt === automaticAttemptRef.current) oauthPopup.releaseReservation();
+        },
+        isActive,
         createClient: createCimdClient,
         start: (args: CimdStartArgs): void => {
           void oauthPopup.start({
         existingClients: clientSummaries,
       },
     );
+    if (!isActive()) return;
     setCimdBusy(false);
     trackEvent("connection_oauth_started", {
       integration_slug: String(integration),
         setDcrFailed(true);
         return;
       }
+      const attempt = ++automaticAttemptRef.current;
+      const isActive = () => viewMountedRef.current && attempt === automaticAttemptRef.current;
       setDcrBusy(true);
       const outcome = await runAutomaticOAuthConnect(
         {
           reserve: oauthPopup.reserve,
-          release: oauthPopup.releaseReservation,
+          release: () => {
-          // Closing the modal genuinely unmounts this view (see
+            if (attempt === automaticAttemptRef.current) oauthPopup.releaseReservation();
-          // `AddAccountModal`), so "still mounted" is exactly "still open".
+          },
-          // The sequence checks it between round trips: a close mid-flight
+          // A closed modal or cancelled attempt cannot register a client or
-          // must not register a client or launch the popup afterwards.
+          // launch sign-in after the next round trip. A retry owns a new attempt.
-          isActive: () => viewMountedRef.current,
+          isActive,
           probe: async (url: string): Promise<OAuthProbeResult | null> => {
             const exit = await doProbe({ payload: { url }, reactivityKeys: [] });
             if (Exit.isFailure(exit)) return null;
       // The modal closed mid-flight: this view is unmounted, so no state may
       // be written at all — not the fallback below, and not even the busy
       // flag, which belongs to the surface that is gone.
-      if (outcome.kind === "aborted") return;
+      if (!isActive() || outcome.kind === "aborted") return;
       setDcrBusy(false);
       // `connection_oauth_started` measures the connect funnel; a reconnect
       // reports through `connection_reconnected` on the popup callbacks above,
             : "sm:max-w-xl",
         )}
       >
-        {addingMethod && createCustomMethod ? (
+        {signInPending ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>Add connection · {integrationName}</DialogTitle>
+            </DialogHeader>
+            <div role="status" className="flex flex-col items-center px-4 py-8 text-center">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-xl border border-border/70 bg-muted/30 text-foreground shadow-sm">
+                {oauthPopup.phase === "authorizing" ? (
+                  <PanelsTopLeftIcon aria-hidden="true" className="size-5" />
+                ) : (
+                  <LoaderCircleIcon
+                    aria-hidden="true"
+                    className="size-5 animate-spin motion-reduce:animate-none"
+                  />
+                )}
+              </div>
+              <p className="text-sm font-medium text-foreground">
+                {oauthPopup.phase === "authorizing"
+                  ? "Continue in the sign-in window"
+                  : oauthPopup.phase === "saving"
+                    ? "Finishing connection"
+                    : "Preparing sign-in"}
+              </p>
+              <DialogDescription className="mt-2 max-w-xs text-sm leading-relaxed">
+                {oauthPopup.phase === "authorizing"
+                  ? "If the window closed or sign-in stalled, cancel and try again."
+                  : oauthPopup.phase === "saving"
+                    ? "Sign-in complete. Updating your connections."
+                    : "The sign-in window will be ready shortly. You can cancel at any time."}
+              </DialogDescription>
+            </div>
+            <DialogFooter className="border-t border-border/60 pt-4 sm:justify-between">
+              <Button type="button" variant="ghost" onClick={close}>
+                Close
+              </Button>
+              {oauthPopup.phase !== "saving" ? (
+                <Button type="button" variant="outline" onClick={cancelSignIn}>
+                  Cancel sign-in
+                </Button>
+              ) : null}
+            </DialogFooter>
+          </>
+        ) : addingMethod && createCustomMethod ? (
           <>
             <DialogHeader className="border-b border-border/60 px-5 py-4">
               <DialogTitle className="text-base">Add authentication method</DialogTitle>
               </p>
             ) : null}
             <DialogFooter>
-              <Button
+              <Button type="button" variant="ghost" onClick={close} disabled={submitting || ccBusy}>
-                type="button"
-                variant="ghost"
-                onClick={close}
-                disabled={submitting || oauthBusy || automaticOAuthConnecting}
-              >
                 {isOAuth ? "Close" : "Cancel"}
               </Button>
               {/* Footer action, in precedence order:

packages/react/src/plugins/oauth-sign-in.tsx+79−41

-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { useAtomSet } from "@effect/atom-react";
+import { RegistryContext, useAtomSet } from "@effect/atom-react";
 import * as Data from "effect/Data";
 import * as Effect from "effect/Effect";
 import * as Exit from "effect/Exit";
+import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
-import { cancelOAuth, oauthConnectionCompleted, startOAuth } from "../api/atoms";
+import { oauthConnectionCompleted } from "../api/atoms";
+import { ExecutorApiClient } from "../api/client";
 import { trackEvent } from "../api/analytics";
 import { messageFromExit, messageFromUnknown, useReportHandledError } from "../api/error-reporting";
 import {
     popupName,
     startErrorMessage,
   } = options;
-  const doStartOAuth = useAtomSet(startOAuth, { mode: "promiseExit" });
+  const registry = useContext(RegistryContext);
-  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 [phase, setPhase] = useState<"idle" | "preparing" | "authorizing" | "saving">("idle");
   const [error, setError] = useState<string | null>(null);
   const cleanupRef = useRef<(() => void) | null>(null);
   const sessionRef = useRef<{ readonly state: string } | null>(null);
   // 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 generationRef = useRef(0);
   const releaseReservation = useCallback(() => {
     reservationRef.current?.popup.close();
   const cancelSession = useCallback(
     (state: string) => {
-      void doCancelOAuth({ payload: { state: OAuthState.make(state) } });
+      // Each cancellation owns its request; cancelling an older attempt must
+      // not interrupt cleanup of another session.
+      const request = ExecutorApiClient.runtime.atom(
+        ExecutorApiClient.use((client) =>
+          client.oauth.cancel({ payload: { state: OAuthState.make(state) } }),
+        ),
+      );
+      void Effect.runPromiseExit(AtomRegistry.getResult(registry, request));
     },
-    [doCancelOAuth],
+    [registry],
   );
   const cancel = useCallback(() => {
+    generationRef.current += 1;
+    setError(null);
     const session = sessionRef.current;
     cleanupRef.current?.();
     cleanupRef.current = null;
     sessionRef.current = null;
     releaseReservation();
     if (session) cancelSession(session.state);
-    setBusy(false);
+    setPhase("idle");
   }, [cancelSession, releaseReservation]);
   useEffect(
     () => () => {
+      generationRef.current += 1;
       const session = sessionRef.current;
       cleanupRef.current?.();
       cleanupRef.current = null;
       // `reserve`; cancelling again here would close the window it reserved.
       const reservation = input.reservation ?? reserve();
       if (reservation.kind === "blocked") {
-        setBusy(false);
+        setPhase("idle");
         setError(blockedMessage);
         input.onError?.(blockedMessage);
         return;
       }
-      setBusy(true);
+      setPhase("preparing");
       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
+      // Cancel/unmount owns this window even while the start request is pending.
-      // it on every failure path below.
+      const generation = generationRef.current;
-      reservationRef.current = null;
       const startExit = await Effect.runPromiseExit(
         Effect.tryPromise({
           try: input.run,
             }),
         }),
       );
+      if (generation !== generationRef.current) {
+        reservedPopup?.popup.close();
+        if (Exit.isSuccess(startExit) && startExit.value.authorizationUrl !== null) {
+          cancelSession(startExit.value.state);
+        }
+        return;
+      }
+      reservationRef.current = null;
       if (Exit.isFailure(startExit)) {
         const message = messageFromExit(startExit, startErrorMessage ?? "Failed to start sign-in");
         reportHandledError(startExit.cause, {
           metadata: input.reportMetadata,
         });
         reservedPopup?.popup.close();
-        setBusy(false);
+        setPhase("idle");
         setError(message);
         input.onError?.(message);
         return;
         const message =
           noAuthorizationUrlMessage ?? "OAuth start did not produce an authorization URL";
         reservedPopup?.popup.close();
-        setBusy(false);
+        setPhase("idle");
         setError(message);
         input.onError?.(message);
         return;
       }
+      setPhase("authorizing");
       sessionRef.current = { state: response.state };
       input.onAuthorizationStarted?.(response);
       const handleResult = async (result: OAuthPopupResult<TPayload>) => {
+        if (generation !== generationRef.current) return;
         cleanupRef.current = null;
         sessionRef.current = null;
         if (!result.ok) {
           trackEvent("oauth_completed", { success: false });
-          setBusy(false);
+          setPhase("idle");
           setError(result.error);
           input.onError?.(result.error, result.errorDetails);
           return;
         }
+        setPhase("saving");
         const refreshExit = await doOAuthConnectionCompleted({
           reactivityKeys: connectionWriteKeys,
         });
+        if (generation !== generationRef.current) return;
         if (Exit.isFailure(refreshExit)) {
           const message = messageFromExit(refreshExit, "Failed to refresh connection");
           reportHandledError(refreshExit.cause, {
             metadata: input.reportMetadata,
           });
           trackEvent("oauth_completed", { success: false });
-          setBusy(false);
+          setPhase("idle");
           setError(message);
           input.onError?.(message);
           return;
             metadata: input.reportMetadata,
           });
           trackEvent("oauth_completed", { success: false });
-          setBusy(false);
+          if (generation === generationRef.current) {
-          setError(message);
+            setPhase("idle");
-          input.onError?.(message);
+            setError(message);
+            input.onError?.(message);
+          }
           return;
         }
         trackEvent("oauth_completed", { success: true });
-        setBusy(false);
+        if (generation === generationRef.current) setPhase("idle");
       };
       const handleClosed = () => {
+        if (generation !== generationRef.current) return;
         cleanupRef.current = null;
         sessionRef.current = null;
         // `popup.closed` is advisory: COOP redirects can make a live popup
         const message =
           popupClosedMessage ?? "Sign-in cancelled - popup was closed before completing the flow.";
         trackEvent("oauth_completed", { success: false });
-        setBusy(false);
+        setPhase("idle");
         setError(message);
         input.onError?.(message);
       };
       const handleOpenFailed = () => {
+        if (generation !== generationRef.current) return;
         cleanupRef.current = null;
         sessionRef.current = null;
         cancelSession(response.state);
         trackEvent("oauth_completed", { success: false });
-        setBusy(false);
+        setPhase("idle");
         setError(blockedMessage);
         input.onError?.(blockedMessage);
       };
           name: String(input.payload.name),
           owner: input.payload.owner,
         },
-        run: () =>
+        run: () => {
-          doStartOAuth({
+          // A shared mutation atom returns its latest result to every waiter.
-            payload: {
+          // A fast retry could give the cancelled attempt the NEW session's
-              client: input.payload.client,
+          // state and make it cancel that session. Keep one atom per attempt;
-              clientOwner: input.payload.clientOwner,
+          // its subscription lives until this request settles, even on cancel.
-              owner: input.payload.owner,
+          const request = ExecutorApiClient.runtime.atom(
-              name: input.payload.name,
+            ExecutorApiClient.use((client) =>
-              integration: input.payload.integration,
+              client.oauth.start({
-              template: input.payload.template,
+                payload: {
-              identityLabel: input.payload.identityLabel,
+                  client: input.payload.client,
-              newConnection: input.payload.newConnection,
+                  clientOwner: input.payload.clientOwner,
-              redirectUri: input.payload.redirectUri ?? oauthCallbackUrl(callbackPath),
+                  owner: input.payload.owner,
-            },
+                  name: input.payload.name,
-          }).then((exit) =>
+                  integration: input.payload.integration,
+                  template: input.payload.template,
+                  identityLabel: input.payload.identityLabel,
+                  newConnection: input.payload.newConnection,
+                  redirectUri: input.payload.redirectUri ?? oauthCallbackUrl(callbackPath),
+                },
+              }),
+            ),
+          );
+          return Effect.runPromiseExit(AtomRegistry.getResult(registry, request)).then((exit) =>
             Exit.isSuccess(exit)
               ? // The redirect branch carries `authorizationUrl` + `state`; the
                 // inline "connected" (client_credentials) branch has no URL to
                     message: messageFromExit(exit, startErrorMessage ?? "Failed to start sign-in"),
                   }),
                 ),
-          ),
+          );
+        },
       });
     },
-    [callbackPath, doStartOAuth, openAuthorization, startErrorMessage],
+    [callbackPath, registry, openAuthorization, startErrorMessage],
   );
   return {
-    busy,
+    busy: phase !== "idle",
+    phase,
     error,
     setError,
     start,