feat(ui): Support signUpIfMissing with Clerk <SignIn> component

.changeset/fancy-candies-slide.md

@@ -0,0 +1,14 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+'@clerk/localizations': minor
+---
+
+Support sign-in-or-sign-up combined flow with Clerk <SignIn> component
+when strict enumeration protection is enabled.
+
+On development instances, `<SignIn>` now logs a warning when the sign-in-or-up flow is rendered on an
+instance that has both password and strict enumeration protection enabled. In that configuration
+visitors without an account are routed to the password screen and cannot complete a sign-up, so the
+warning names both settings and how to resolve them.

packages/clerk-js/bundlewatch.config.json

@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "75KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "117KB" },
     { "path": "./dist/clerk.no-rhc.js", "maxSize": "316KB" },
-    { "path": "./dist/clerk.native.js", "maxSize": "74KB" },
+    { "path": "./dist/clerk.native.js", "maxSize": "76KB" },
     { "path": "./dist/vendors*.js", "maxSize": "7KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "36KB" },
     { "path": "./dist/base-account-sdk*.js", "maxSize": "207KB" },

packages/clerk-js/src/core/clerk.ts

@@ -121,7 +121,6 @@ import type {
   SignOut,
   SignOutCallback,
   SignOutOptions,
-  SignUpField,
   SignUpProps,
   SignUpRedirectOptions,
   SignUpResource,
@@ -149,7 +148,6 @@ import { ModuleManager } from '@/utils/moduleManager';
 import {
   ALLOWED_PROTOCOLS,
   buildURL,
-  completeSignUpFlow,
   createAllowedRedirectOrigins,
   createBeforeUnloadTracker,
   createPageLifecycle,
@@ -162,6 +160,7 @@ import {
   isError,
   isOrganizationId,
   isRedirectForFAPIInitiatedFlow,
+  navigateToNextStepSignUp,
   removeClerkQueryParam,
   requiresUserInput,
   stripOrigin,
@@ -2288,6 +2287,14 @@ export class Clerk implements ClerkInterface {
       throw new EmailLinkError(EmailLinkErrorCodeStatus.Expired);
     } else if (verificationStatus === 'client_mismatch') {
       throw new EmailLinkError(EmailLinkErrorCodeStatus.ClientMismatch);
+    } else if (verificationStatus === 'transferable') {
+      // signUpIfMissing flow: the email was verified but the user doesn't exist, so there is
+      // no session to complete here. The sign-up transfer is banked on the client that owns
+      // the sign-in; consuming it is left to the caller, which knows where to route next.
+      if (typeof params.onVerifiedOnOtherDevice === 'function') {
+        params.onVerifiedOnOtherDevice();
+      }
+      return;
     } else if (verificationStatus !== 'verified') {
       throw new EmailLinkError(EmailLinkErrorCodeStatus.Failed);
     }
@@ -2434,54 +2441,20 @@ export class Clerk implements ClerkInterface {
 
     const redirectUrls = new RedirectUrls(this.#options, params);
 
-    const navigateToContinueSignUp = makeNavigate(
+    const continueSignUpUrl =
       params.continueSignUpUrl ||
-        buildURL(
-          {
-            base: displayConfig.signUpUrl,
-            hashPath: '/continue',
-          },
-          { stringify: true },
-        ),
-    );
-
-    const navigateToSignUpProtectCheck = makeNavigate(
+      buildURL({ base: displayConfig.signUpUrl, hashPath: '/continue' }, { stringify: true });
+    const verifyEmailAddressUrl =
+      params.verifyEmailAddressUrl ||
+      buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true });
+    const verifyPhoneNumberUrl =
+      params.verifyPhoneNumberUrl ||
+      buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true });
+    const signUpProtectCheckUrl =
       params.signUpProtectCheckUrl ||
-        buildURL({ base: displayConfig.signUpUrl, hashPath: '/protect-check' }, { stringify: true }),
-    );
+      buildURL({ base: displayConfig.signUpUrl, hashPath: '/protect-check' }, { stringify: true });
 
-    const navigateToNextStepSignUp = ({ missingFields }: { missingFields: SignUpField[] }) => {
-      // A protect-gated sign-up always carries 'protect_check' in missing_fields, so this gate
-      // check must run BEFORE the generic missing-fields short-circuit below — otherwise the
-      // OAuth/SAML callback would land on /continue instead of the challenge.
-      if (signUp.protectCheck || missingFields.includes('protect_check')) {
-        return navigateToSignUpProtectCheck();
-      }
-
-      if (missingFields.length) {
-        return navigateToContinueSignUp();
-      }
-
-      return completeSignUpFlow({
-        signUp,
-        verifyEmailPath:
-          params.verifyEmailAddressUrl ||
-          buildURL(
-            {
-              base: displayConfig.signUpUrl,
-              hashPath: '/verify-email-address',
-            },
-            { stringify: true },
-          ),
-        verifyPhonePath:
-          params.verifyPhoneNumberUrl ||
-          buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
-        protectCheckPath:
-          params.signUpProtectCheckUrl ||
-          buildURL({ base: displayConfig.signUpUrl, hashPath: '/protect-check' }, { stringify: true }),
-        navigate,
-      });
-    };
+    const navigateToSignUpProtectCheck = makeNavigate(signUpProtectCheckUrl);
 
     const signInUrl = params.signInUrl || displayConfig.signInUrl;
     const signUpUrl = params.signUpUrl || displayConfig.signUpUrl;
@@ -2627,7 +2600,14 @@ export class Clerk implements ClerkInterface {
             },
           });
         case 'missing_requirements':
-          return navigateToNextStepSignUp({ missingFields: res.missingFields });
+          return navigateToNextStepSignUp({
+            signUp: res,
+            continueSignUpUrl,
+            verifyEmailAddressUrl,
+            verifyPhoneNumberUrl,
+            signUpProtectCheckUrl,
+            navigate,
+          });
         default:
           clerkOAuthCallbackDidNotCompleteSignInSignUp('sign in');
       }
@@ -2682,7 +2662,14 @@ export class Clerk implements ClerkInterface {
     }
 
     if (su.externalAccountStatus === 'verified' && su.status === 'missing_requirements') {
-      return navigateToNextStepSignUp({ missingFields: signUp.missingFields });
+      return navigateToNextStepSignUp({
+        signUp,
+        continueSignUpUrl,
+        verifyEmailAddressUrl,
+        verifyPhoneNumberUrl,
+        signUpProtectCheckUrl,
+        navigate,
+      });
     }
 
     if (this.session?.currentTask) {

packages/clerk-js/src/core/resources/SignIn.ts

@@ -100,6 +100,16 @@ import {
 import { eventBus } from '../events';
 import { BaseResource, UserData, Verification } from './internal';
 
+/**
+ * Terminal states for email-link verification polling: `verified` (success), `expired`
+ * (link timed out), or `transferable` (`signUpIfMissing` flows — the address was verified
+ * but no user exists, so the caller transfers to sign-up). Shared by the legacy
+ * `createEmailLinkFlow` poll and `SignInFuture.waitForEmailLinkVerification` so the two
+ * loops can't drift apart.
+ */
+const isTerminalEmailLinkVerificationStatus = (status: string | null) =>
+  status === 'verified' || status === 'expired' || status === 'transferable';
+
 export class SignIn extends BaseResource implements SignInResource {
   pathRoot = '/client/sign_ins';
 
@@ -335,8 +345,7 @@ export class SignIn extends BaseResource implements SignInResource {
         void run(() => {
           return this.reload()
             .then(res => {
-              const status = res[verificationKey].status;
-              if (status === 'verified' || status === 'expired') {
+              if (isTerminalEmailLinkVerificationStatus(res[verificationKey].status)) {
                 stop();
                 resolve(res);
               }
@@ -1152,8 +1161,7 @@ class SignInFuture implements SignInFutureResource {
         void run(async () => {
           try {
             const res = await this.#resource.__internal_baseGet();
-            const status = res.firstFactorVerification.status;
-            if (status === 'verified' || status === 'expired') {
+            if (isTerminalEmailLinkVerificationStatus(res.firstFactorVerification.status)) {
               stop();
               resolve(res);
             }

packages/clerk-js/src/core/resources/UserSettings.ts

@@ -1,4 +1,5 @@
 import type {
+  AttackProtectionData,
   Attributes,
   EnterpriseSSOSettings,
   OAuthProviders,
@@ -103,6 +104,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
       name: 'passkey',
     },
   };
+  attackProtection: AttackProtectionData = { enumeration_protection: { enabled: false } };
   enterpriseSSO: EnterpriseSSOSettings = {
     enabled: false,
     self_serve_sso: false,
@@ -214,6 +216,15 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
       this.attributes,
     );
     this.actions = this.withDefault(data.actions, this.actions);
+    // Normalize field-by-field rather than withDefault: a present-but-partial
+    // attack_protection object must not leave enumeration_protection undefined.
+    this.attackProtection = {
+      enumeration_protection: {
+        enabled:
+          data.attack_protection?.enumeration_protection?.enabled ??
+          this.attackProtection.enumeration_protection.enabled,
+      },
+    };
     this.enterpriseSSO = this.withDefault(data.enterprise_sso, this.enterpriseSSO);
     this.passkeySettings = this.withDefault(data.passkey_settings, this.passkeySettings);
     this.passwordSettings = data.password_settings
@@ -252,6 +263,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
   public __internal_toSnapshot(): UserSettingsJSONSnapshot {
     return {
       actions: this.actions,
+      attack_protection: this.attackProtection,
       attributes: this.attributes,
       passkey_settings: this.passkeySettings,
       password_settings: this.passwordSettings,

packages/clerk-js/src/core/resources/__tests__/SignIn.test.ts

@@ -1237,6 +1237,37 @@ describe('SignIn', () => {
           expect.anything(),
         );
       });
+
+      it('polls until firstFactorVerification status is transferable', async () => {
+        const mockFetch = vi
+          .fn()
+          .mockResolvedValueOnce({
+            client: null,
+            response: {
+              id: 'signin_123',
+              first_factor_verification: { status: 'unverified' },
+            },
+          })
+          .mockResolvedValueOnce({
+            client: null,
+            response: {
+              id: 'signin_123',
+              first_factor_verification: { status: 'transferable' },
+            },
+          });
+        BaseResource._fetch = mockFetch;
+
+        const signIn = new SignIn({ id: 'signin_123' } as any);
+        await signIn.__internal_future.emailLink.waitForVerification();
+
+        expect(mockFetch).toHaveBeenCalledWith(
+          expect.objectContaining({
+            method: 'GET',
+            path: '/client/sign_ins/signin_123',
+          }),
+          expect.anything(),
+        );
+      });
     });
 
     describe('sendPhoneCode', () => {

packages/clerk-js/src/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './beforeUnloadTracker';
 export * from './billing';
 export * from '@clerk/shared/internal/clerk-js/completeSignUpFlow';
+export * from '@clerk/shared/internal/clerk-js/navigateToNextStepSignUp';
 export * from '@clerk/shared/internal/clerk-js/email';
 export * from '@clerk/shared/internal/clerk-js/encoders';
 export * from './errors';

packages/localizations/src/ar-SA.ts

@@ -1302,6 +1302,10 @@ export const arSA: LocalizationResource = {
         subtitleNewTab: 'ارجع إلى علامة التبويب المفتوحة حديثًا للمتابعة',
         titleNewTab: 'تم تسجيل الدخول في علامة تبويب أخرى',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'استخدم رابط التحقق المرسل إلى بريدك الإلكتروني',

packages/localizations/src/be-BY.ts

@@ -1310,6 +1310,10 @@ export const beBY: LocalizationResource = {
         subtitleNewTab: 'Верніцеся на толькі што адчыненую ўкладку, каб працягнуць',
         titleNewTab: 'Залогіньцеся на іншай укладцы',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Выкарыстоўвайце спасылку для пацвярджэння, адпраўленую на вашу электронную пошту',

packages/localizations/src/bg-BG.ts

@@ -1306,6 +1306,10 @@ export const bgBG: LocalizationResource = {
         subtitleNewTab: 'Върнете се в новоотворения таб, за да продължите',
         titleNewTab: 'Влезнали сте в друг таб',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Използвайте връзката за потвърждение, изпратена на вашия имейл',

packages/localizations/src/bn-IN.ts

@@ -1314,6 +1314,10 @@ export const bnIN: LocalizationResource = {
         subtitleNewTab: 'চালিয়ে যেতে নতুন খোলা ট্যাবে ফিরে যান',
         titleNewTab: 'অন্য ট্যাবে সাইন ইন হয়েছে',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'আপনার ইমেইলে পাঠানো যাচাইকরণ লিঙ্কটি ব্যবহার করুন',

packages/localizations/src/ca-ES.ts

@@ -1314,6 +1314,10 @@ export const caES: LocalizationResource = {
         subtitleNewTab: 'Torna a la pestanya recentment oberta per continuar',
         titleNewTab: "S'ha iniciat sessió en una altra pestanya",
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: "Utilitzeu l'enllaç de verificació enviat al vostre correu electrònic",

packages/localizations/src/cs-CZ.ts

@@ -1313,6 +1313,10 @@ export const csCZ: LocalizationResource = {
         subtitleNewTab: 'Vraťte se na nově otevřenou kartu pro pokračování',
         titleNewTab: 'Přihlášeno na jiné kartě',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Použijte ověřovací odkaz zaslaný na váš e-mail',

packages/localizations/src/da-DK.ts

@@ -1304,6 +1304,10 @@ export const daDK: LocalizationResource = {
         subtitleNewTab: 'Vend tilbage til den nyligt åbnede fane for at fortsætte',
         titleNewTab: 'Logget ind på anden fane',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Brug bekræftelseslinket, der er sendt til din e-mail',

packages/localizations/src/de-DE.ts

@@ -1321,6 +1321,10 @@ export const deDE: LocalizationResource = {
         subtitleNewTab: 'Kehren Sie zum neu geöffneten Tab zurück, um fortzufahren',
         titleNewTab: 'In einem anderen Tab angemeldet',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Verwenden Sie den an Ihre E-Mail gesendeten Bestätigungslink',

packages/localizations/src/el-GR.ts

@@ -1314,6 +1314,10 @@ export const elGR: LocalizationResource = {
         subtitleNewTab: 'Επιστροφή στη νέα καρτέλα που άνοιξε για να συνεχίσετε',
         titleNewTab: 'Έχετε συνδεθεί σε άλλη καρτέλα',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Χρησιμοποιήστε τον σύνδεσμο επαλήθευσης που στάλθηκε στο email σας',

packages/localizations/src/en-GB.ts

@@ -1306,6 +1306,10 @@ export const enGB: LocalizationResource = {
         subtitleNewTab: 'Return to the newly opened tab to continue',
         titleNewTab: 'Signed in on other tab',
       },
+      verifiedTransferable: {
+        subtitle: undefined,
+        title: undefined,
+      },
     },
     emailLinkMfa: {
       formSubtitle: 'Use the verification link sent to your email',