fix(ui): continue to the identity provider after a challenge

.changeset/protect-check-continuation-error.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix the verification challenge card spinning indefinitely when continuing the sign-in after a completed challenge fails. The error is now shown, and "Try again" retries the continuation.

.changeset/resume-enterprise-sso-after-challenge.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix sign-ins that use an enterprise connection stranding on "Use another method" after a verification challenge, instead of continuing to the identity provider.

packages/ui/src/components/SignIn/SignInFactorOneEnterpriseConnections.tsx

@@ -8,6 +8,8 @@ import { Flow, localizationKeys } from '@/ui/customizables';
 import { withCardStateProvider } from '@/ui/elements/contexts';
 import type { AvailableComponentProps } from '@/ui/types';
 
+import { useRouter } from '../../router';
+import { isProtectCheckRequiredError, navigateOnSignInProtectGate } from './handleProtectCheck';
 import { hasMultipleEnterpriseConnections } from './shared';
 
 /**
@@ -16,6 +18,7 @@ import { hasMultipleEnterpriseConnections } from './shared';
 const SignInFactorOneEnterpriseConnectionsInternal = () => {
   const ctx = useSignInContext();
   const clerk = useClerk();
+  const { navigate } = useRouter();
   const signIn = clerk.client.signIn;
 
   if (!hasMultipleEnterpriseConnections(signIn.supportedFirstFactors)) {
@@ -30,18 +33,28 @@ const SignInFactorOneEnterpriseConnectionsInternal = () => {
     provider: ff.enterpriseConnectionProvider,
   }));
 
-  const handleEnterpriseSSO = (enterpriseConnectionId: string) => {
+  const handleEnterpriseSSO = async (enterpriseConnectionId: string) => {
     const redirectUrl = ctx.ssoCallbackUrl;
     const redirectUrlComplete = ctx.afterSignInUrl || '/';
 
-    return signIn.authenticateWithRedirect({
-      strategy: 'enterprise_sso',
-      redirectUrl,
-      redirectUrlComplete,
-      oidcPrompt: ctx.oidcPrompt,
-      continueSignIn: true,
-      enterpriseConnectionId,
-    });
+    try {
+      await signIn.authenticateWithRedirect({
+        strategy: 'enterprise_sso',
+        redirectUrl,
+        redirectUrlComplete,
+        oidcPrompt: ctx.oidcPrompt,
+        continueSignIn: true,
+        enterpriseConnectionId,
+      });
+    } catch (err) {
+      // Preparing the hand-off can itself raise a challenge. No redirect was issued and the sign-in
+      // is sitting on the gate instead. Handled here because the card's click handler drops errors,
+      // so without this the user clicks their connection and nothing happens.
+      if (isProtectCheckRequiredError(err) && navigateOnSignInProtectGate(signIn, navigate, '../protect-check')) {
+        return;
+      }
+      throw err;
+    }
   };
 
   return (

packages/ui/src/components/SignIn/SignInProtectCheck.tsx

@@ -24,7 +24,12 @@ import { useNavigateToFlowStart } from '../../hooks/useNavigateToFlowStart';
 import { useProtectCheckRunner } from '../../hooks/useProtectCheckRunner';
 import { useRouter } from '../../router';
 import { buildSignInOAuthCallbackParams } from './buildOAuthCallbackParams';
-import { isSignInPendingOAuthTransfer, resumeSignInAfterProtectCheck } from './handleProtectCheck';
+import {
+  isProtectCheckRequiredError,
+  isSignInPendingOAuthTransfer,
+  isSignInProtectGated,
+  resumeSignInAfterProtectCheck,
+} from './handleProtectCheck';
 
 function SignInProtectCheckInternal(): JSX.Element | null {
   const card = useCardState();
@@ -78,6 +83,29 @@ function SignInProtectCheckInternal(): JSX.Element | null {
       }
       await resumeSignInAfterProtectCheck(updatedSignIn, {
         navigate,
+        // No `enterpriseConnectionId` is passed: this runs only under
+        // `shouldHandOffToEnterpriseConnection`, which requires a single connection, so the server
+        // has exactly one to prepare. If that guard is ever loosened to resume a connection the
+        // user chose, the id has to be carried across the challenge and passed here.
+        resumeEnterpriseSSO: async () => {
+          try {
+            await signIn.authenticateWithRedirect({
+              strategy: 'enterprise_sso',
+              redirectUrl: ctx.ssoCallbackUrl,
+              redirectUrlComplete: afterSignInUrl || '/',
+              oidcPrompt: ctx.oidcPrompt,
+              continueSignIn: true,
+            });
+          } catch (err) {
+            // Preparing the hand-off can raise a further challenge, in which case no redirect was
+            // issued: stay here and run it on the next render.
+            if (isProtectCheckRequiredError(err) && isSignInProtectGated(signIn)) {
+              await navigate('.');
+              return;
+            }
+            throw err;
+          }
+        },
         startedAsOAuthTransfer: startedAsOAuthTransfer.current,
         resumeOAuthContinuation: () =>
           typeof __internal_resumeAfterProtectCheck === 'function'

packages/ui/src/components/SignIn/SignInStart.tsx

@@ -38,14 +38,14 @@ import { useLoadingStatus } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { useTotalEnabledAuthMethods } from '../../hooks/useTotalEnabledAuthMethods';
 import { useRouter } from '../../router';
+import {
+  hasOnlyEnterpriseSSOFirstFactors,
+  shouldHandOffToEnterpriseConnection,
+  shouldHandOffUnidentifiedToEnterpriseConnection,
+} from './enterpriseSSOFactors';
 import { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';
 import { isProtectCheckRequiredError, navigateOnSignInProtectGate } from './handleProtectCheck';
-import {
-  getSSOBypassFactor,
-  hasMultipleEnterpriseConnections,
-  SIGN_IN_RESET_PASSWORD_INTENT_PARAM,
-  useHandleAuthenticateWithPasskey,
-} from './shared';
+import { SIGN_IN_RESET_PASSWORD_INTENT_PARAM, useHandleAuthenticateWithPasskey } from './shared';
 import { SignInAlternativePhoneCodePhoneNumberCard } from './SignInAlternativePhoneCodePhoneNumberCard';
 import { SignInSocialButtons } from './SignInSocialButtons';
 import {
@@ -242,7 +242,7 @@ function SignInStartInternal(): JSX.Element {
         }
         switch (res.status) {
           case 'needs_first_factor': {
-            if (!canRedirectToEnterpriseSSO(res)) {
+            if (!shouldHandOffToEnterpriseConnection(res)) {
               return navigate('factor-one');
             }
 
@@ -414,12 +414,12 @@ function SignInStartInternal(): JSX.Element {
       switch (res.status) {
         case 'needs_identifier':
           // Check if we need to initiate an enterprise sso flow
-          if (res.supportedFirstFactors?.some(ff => ff.strategy === 'enterprise_sso')) {
+          if (shouldHandOffUnidentifiedToEnterpriseConnection(res)) {
             await authenticateWithEnterpriseSSO();
           }
           break;
         case 'needs_first_factor': {
-          if (!canRedirectToEnterpriseSSO(res)) {
+          if (!shouldHandOffToEnterpriseConnection(res)) {
             if (options?.resetPasswordIntent) {
               return navigate('factor-one', {
                 searchParams: new URLSearchParams({ [SIGN_IN_RESET_PASSWORD_INTENT_PARAM]: 'true' }),
@@ -731,25 +731,6 @@ function SignInStartInternal(): JSX.Element {
   );
 }
 
-const hasOnlyEnterpriseSSOFirstFactors = (signIn: SignInResource): boolean => {
-  if (!signIn.supportedFirstFactors?.length) {
-    return false;
-  }
-
-  return signIn.supportedFirstFactors.every(ff => ff.strategy === 'enterprise_sso');
-};
-
-/**
- * Whether the sign-in can go straight to the identity provider without showing a card first.
- *
- * A connection choice and an SSO bypass are both only reachable from one, so either sends the
- * user to `factor-one` instead.
- */
-const canRedirectToEnterpriseSSO = (signIn: SignInResource): boolean =>
-  hasOnlyEnterpriseSSOFirstFactors(signIn) &&
-  !hasMultipleEnterpriseConnections(signIn.supportedFirstFactors) &&
-  !getSSOBypassFactor(signIn);
-
 const InstantPasswordRow = ({
   field,
   onForgotPasswordClick,

packages/ui/src/components/SignIn/__tests__/SignInFactorOneEnterpriseConnections.test.tsx

@@ -1,9 +1,13 @@
+import { ClerkRuntimeError } from '@clerk/shared/error';
+import type { SignInResource } from '@clerk/shared/types';
+import { waitFor } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, screen } from '@/test/utils';
 
 import { SignInFactorOne } from '../SignInFactorOne';
+import { SignInFactorOneEnterpriseConnections } from '../SignInFactorOneEnterpriseConnections';
 
 const { createFixtures } = bindCreateFixtures('SignIn');
 
@@ -58,3 +62,55 @@ describe('SignInFactorOneEnterpriseConnections', () => {
     expect(oktaButton.querySelector('.cl-socialButtonsProviderInitialIcon')).toHaveTextContent('O');
   });
 });
+
+/** Two connections is what puts the user on this card rather than a direct hand-off. */
+const TWO_CONNECTIONS = [
+  { strategy: 'enterprise_sso', enterpriseConnectionId: 'ent_acme', enterpriseConnectionName: 'Acme SSO' },
+  { strategy: 'enterprise_sso', enterpriseConnectionId: 'ent_globex', enterpriseConnectionName: 'Globex SSO' },
+];
+
+describe('SignInFactorOneEnterpriseConnections with a challenge', () => {
+  it('routes to the challenge when preparing the hand-off raises one', async () => {
+    // GIVEN a user choosing between two enterprise connections
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress();
+      f.startSignInWithEmailAddress();
+    });
+    (fixtures.signIn as unknown as SignInResource).supportedFirstFactors = TWO_CONNECTIONS as never;
+    // WHEN preparing the hand-off comes back gated: no redirect is issued and the call throws.
+    fixtures.signIn.authenticateWithRedirect.mockImplementationOnce(() => {
+      (fixtures.signIn as any).protectCheck = { status: 'pending', token: 'challenge-token-abc' };
+      throw new ClerkRuntimeError('challenge required', { code: 'protect_check_required' });
+    });
+
+    const { userEvent } = render(<SignInFactorOneEnterpriseConnections />, { wrapper });
+    await userEvent.click(await screen.findByText('Acme SSO'));
+
+    // THEN the challenge is shown, instead of the card sitting there looking inert.
+    await waitFor(() => {
+      expect(fixtures.router.navigate).toHaveBeenCalledWith('../protect-check');
+    });
+    expect(fixtures.signIn.authenticateWithRedirect).toHaveBeenCalledWith(
+      expect.objectContaining({ strategy: 'enterprise_sso', enterpriseConnectionId: 'ent_acme' }),
+    );
+  });
+
+  it('does not route to the challenge when the hand-off is issued normally', async () => {
+    // GIVEN the same card, but nothing gates the hand-off
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withEmailAddress();
+      f.startSignInWithEmailAddress();
+    });
+    (fixtures.signIn as unknown as SignInResource).supportedFirstFactors = TWO_CONNECTIONS as never;
+    fixtures.signIn.authenticateWithRedirect.mockResolvedValueOnce(undefined as never);
+
+    const { userEvent } = render(<SignInFactorOneEnterpriseConnections />, { wrapper });
+    await userEvent.click(await screen.findByText('Globex SSO'));
+
+    // THEN the redirect owns the navigation and we must not steal it.
+    await waitFor(() => {
+      expect(fixtures.signIn.authenticateWithRedirect).toHaveBeenCalled();
+    });
+    expect(fixtures.router.navigate).not.toHaveBeenCalledWith('../protect-check');
+  });
+});