feat(clerk-js): Initiate enterprise SSO from ticket flows

.changeset/nasty-items-jog.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Initiate enterprise SSO from ticket flows, such as organization invitations.

packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx

@@ -222,6 +222,10 @@ function SignInStartInternal(): JSX.Element {
       .then(res => {
         switch (res.status) {
           case 'needs_first_factor':
+            if (hasOnlyEnterpriseSSOFirstFactors(res)) {
+              return authenticateWithEnterpriseSSO();
+            }
+
             return navigate('factor-one');
           case 'needs_second_factor':
             return navigate('factor-two');
@@ -241,6 +245,12 @@ function SignInStartInternal(): JSX.Element {
         return attemptToRecoverFromSignInError(err);
       })
       .finally(() => {
+        // Keep the card in loading state during SSO redirect to prevent UI flicker
+        // This is necessary because there's a brief delay between initiating the SSO flow
+        // and the actual redirect to the external Identity Provider
+        const isRedirectingToSSOProvider = hasOnlyEnterpriseSSOFirstFactors(signIn);
+        if (isRedirectingToSSOProvider) return;
+
         status.setIdle();
         card.setIdle();
       });
@@ -364,7 +374,7 @@ function SignInStartInternal(): JSX.Element {
           }
           break;
         case 'needs_first_factor':
-          if (res.supportedFirstFactors?.every(ff => ff.strategy === 'enterprise_sso')) {
+          if (hasOnlyEnterpriseSSOFirstFactors(res)) {
             await authenticateWithEnterpriseSSO();
             break;
           }
@@ -604,6 +614,14 @@ function SignInStartInternal(): JSX.Element {
   );
 }
 
+const hasOnlyEnterpriseSSOFirstFactors = (signIn: SignInResource): boolean => {
+  if (!signIn.supportedFirstFactors?.length) {
+    return false;
+  }
+
+  return signIn.supportedFirstFactors.every(ff => ff.strategy === 'enterprise_sso');
+};
+
 const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> }) => {
   const [autofilled, setAutofilled] = useState(false);
   const ref = useRef<HTMLInputElement>(null);

packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx

@@ -119,6 +119,7 @@ function SignUpStartInternal(): JSX.Element {
   const hasEmail = !!formState.emailAddress.value;
   const isProgressiveSignUp = userSettings.signUp.progressive;
   const isLegalConsentEnabled = userSettings.signUp.legal_consent_enabled;
+  const oidcPrompt = ctx.oidcPrompt;
 
   const fields = determineActiveFields({
     attributes,
@@ -145,8 +146,13 @@ function SignUpStartInternal(): JSX.Element {
           setMissingRequirementsWithTicket(true);
         }
 
+        const redirectUrl = ctx.ssoCallbackUrl;
+        const redirectUrlComplete = ctx.afterSignUpUrl || '/';
+
         return completeSignUpFlow({
           signUp,
+          redirectUrl,
+          redirectUrlComplete,
           verifyEmailPath: 'verify-email-address',
           verifyPhonePath: 'verify-phone-number',
           handleComplete: () => {
@@ -155,6 +161,7 @@ function SignUpStartInternal(): JSX.Element {
             return setActive({ session: signUp.createdSessionId, redirectUrl: afterSignUpUrl });
           },
           navigate,
+          oidcPrompt,
         });
       })
       .catch(err => {
@@ -163,6 +170,12 @@ function SignUpStartInternal(): JSX.Element {
         handleError(err, [], card.setError);
       })
       .finally(() => {
+        // Keep the card in loading state during SSO redirect to prevent UI flicker
+        // This is necessary because there's a brief delay between initiating the SSO flow
+        // and the actual redirect to the external Identity Provider
+        const isRedirectingToSSOProvider = signUp.missingFields.some(mf => mf === 'saml' || mf === 'enterprise_sso');
+        if (isRedirectingToSSOProvider) return;
+
         status.setIdle();
         card.setIdle();
       });
@@ -302,7 +315,7 @@ function SignUpStartInternal(): JSX.Element {
           navigate,
           redirectUrl,
           redirectUrlComplete,
-          oidcPrompt: ctx.oidcPrompt,
+          oidcPrompt,
         }),
       )
       .catch(err => handleError(err, fieldsToSubmit, card.setError))