feat(clerk-js): Add experimental combined flow

.changeset/loud-balloons-grow.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Introduce experimental sign-in combined flow.

packages/clerk-js/sandbox/app.js

@@ -181,6 +181,7 @@ function addCurrentRouteIndicator(currentRoute) {
       ...(componentControls.clerk.getProps() ?? {}),
       signInUrl: '/sign-in',
       signUpUrl: '/sign-up',
+      waitlistUrl: '/waitlist',
     });
     renderCurrentRoute();
   } else {

packages/clerk-js/sandbox/template.html

@@ -133,7 +133,7 @@
           viewBox="0 0 62 18"
           fill="none"
           aria-hidden="true"
-          class="h-[1.125rem] text-gray-950 dark:text-white"
+          class="h-[1.125rem] text-gray-950"
         >
           <ellipse
             cx="8.99999"
@@ -159,7 +159,7 @@
           ></path>
         </svg>
         <div
-          class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100 dark:bg-gray-900 dark:text-gray-400 dark:ring-gray-700"
+          class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100"
         >
           Sandbox
         </div>
@@ -249,7 +249,10 @@
     </div>
 
     <main class="bg-gray-25 flex h-full flex-1 items-center justify-center overflow-y-auto overflow-x-hidden pl-72">
-      <div id="app"></div>
+      <div
+        id="app"
+        class="max-w-full px-8 py-12"
+      ></div>
     </main>
 
     <!-- This app is in the Team SDK organization. -->

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

@@ -356,6 +356,10 @@ export class Clerk implements ClerkInterface {
     }
   };
 
+  #isCombinedFlow(): boolean {
+    return this.#options.experimental?.combinedFlow && this.#options.signInUrl === this.#options.signUpUrl;
+  }
+
   public signOut: SignOut = async (callbackOrOptions?: SignOutCallback | SignOutOptions, options?: SignOutOptions) => {
     if (!this.client || this.client.sessions.length === 0) {
       return;
@@ -1049,14 +1053,13 @@ export class Clerk implements ClerkInterface {
     return this.buildUrlWithAuth(this.#options.afterSignOutUrl);
   }
 
-  public buildWaitlistUrl(): string {
+  public buildWaitlistUrl(options?: { initialValues?: Record<string, string> }): string {
     if (!this.environment || !this.environment.displayConfig) {
       return '';
     }
-
     const waitlistUrl = this.#options['waitlistUrl'] || this.environment.displayConfig.waitlistUrl;
-
-    return buildURL({ base: waitlistUrl }, { stringify: true });
+    const initValues = new URLSearchParams(options?.initialValues || {});
+    return buildURL({ base: waitlistUrl, hashSearchParams: [initValues] }, { stringify: true });
   }
 
   public buildAfterMultiSessionSingleSignOutUrl(): string {
@@ -2028,10 +2031,18 @@ export class Clerk implements ClerkInterface {
     if (!key || !this.loaded || !this.environment || !this.environment.displayConfig) {
       return '';
     }
+
     const signInOrUpUrl = this.#options[key] || this.environment.displayConfig[key];
     const redirectUrls = new RedirectUrls(this.#options, options).toSearchParams();
     const initValues = new URLSearchParams(_initValues || {});
-    const url = buildURL({ base: signInOrUpUrl, hashSearchParams: [initValues, redirectUrls] }, { stringify: true });
+    const url = buildURL(
+      {
+        base: signInOrUpUrl,
+        hashPath: this.#isCombinedFlow() && key === 'signUpUrl' ? '/create' : '',
+        hashSearchParams: [initValues, redirectUrls],
+      },
+      { stringify: true },
+    );
     return this.buildUrlWithAuth(url);
   };
 

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

@@ -32,6 +32,7 @@ export const ERROR_CODES = {
   ENTERPRISE_SSO_EMAIL_ADDRESS_DOMAIN_MISMATCH: 'enterprise_sso_email_address_domain_mismatch',
   ENTERPRISE_SSO_HOSTED_DOMAIN_MISMATCH: 'enterprise_sso_hosted_domain_mismatch',
   SAML_EMAIL_ADDRESS_DOMAIN_MISMATCH: 'saml_email_address_domain_mismatch',
+  INVITATION_ACCOUNT_NOT_EXISTS: 'invitation_account_not_exists',
 } as const;
 
 export const SIGN_IN_INITIAL_VALUE_KEYS = ['email_address', 'phone_number', 'username'];

packages/clerk-js/src/ui/common/EmailLinkVerify.tsx

@@ -15,11 +15,12 @@ export type EmailLinkVerifyProps = {
   redirectUrl?: string;
   verifyEmailPath?: string;
   verifyPhonePath?: string;
+  continuePath?: string;
   texts: Record<VerificationStatus, { title: LocalizationKey; subtitle: LocalizationKey }>;
 };
 
 export const EmailLinkVerify = (props: EmailLinkVerifyProps) => {
-  const { redirectUrl, redirectUrlComplete, verifyEmailPath, verifyPhonePath } = props;
+  const { redirectUrl, redirectUrlComplete, verifyEmailPath, verifyPhonePath, continuePath } = props;
   const { handleEmailLinkVerification } = useClerk();
   const { navigate } = useRouter();
   const signUp = useCoreSignUp();
@@ -36,6 +37,7 @@ export const EmailLinkVerify = (props: EmailLinkVerifyProps) => {
         signUp,
         verifyEmailPath,
         verifyPhonePath,
+        continuePath,
         navigate,
       });
     } catch (err) {

packages/clerk-js/src/ui/common/redirects.ts

@@ -9,12 +9,13 @@ export function buildEmailLinkRedirectUrl(
   baseUrl: string | undefined = '',
 ): string {
   const { routing, authQueryString, path } = ctx;
+  const isCombinedFlow = 'signInUrl' in ctx && 'signUpUrl' in ctx && ctx.signInUrl === ctx.signUpUrl;
   return buildRedirectUrl({
     routing,
     baseUrl,
     authQueryString,
     path,
-    endpoint: MAGIC_LINK_VERIFY_PATH_ROUTE,
+    endpoint: isCombinedFlow ? `/create${MAGIC_LINK_VERIFY_PATH_ROUTE}` : MAGIC_LINK_VERIFY_PATH_ROUTE,
   });
 }
 

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

@@ -2,10 +2,22 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { SignInContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
+import {
+  SignInContext,
+  SignUpContext,
+  useOptions,
+  useSignInContext,
+  useSignUpContext,
+  withCoreSessionSwitchGuard,
+} from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
+import { SignUpContinue } from '../SignUp/SignUpContinue';
+import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
+import { SignUpStart } from '../SignUp/SignUpStart';
+import { SignUpVerifyEmail } from '../SignUp/SignUpVerifyEmail';
+import { SignUpVerifyPhone } from '../SignUp/SignUpVerifyPhone';
 import { ResetPassword } from './ResetPassword';
 import { ResetPasswordSuccess } from './ResetPasswordSuccess';
 import { SignInAccountSwitcher } from './SignInAccountSwitcher';
@@ -24,6 +36,8 @@ function RedirectToSignIn() {
 
 function SignInRoutes(): JSX.Element {
   const signInContext = useSignInContext();
+  const signUpContext = useSignUpContext();
+  const options = useOptions();
 
   return (
     <Flow.Root flow='signIn'>
@@ -62,6 +76,62 @@ function SignInRoutes(): JSX.Element {
             redirectUrl='../factor-two'
           />
         </Route>
+        {options.experimental?.combinedFlow && (
+          <Route path='create'>
+            <Route
+              path='verify-email-address'
+              canActivate={clerk => !!clerk.client.signUp.emailAddress}
+            >
+              <SignUpVerifyEmail />
+            </Route>
+            <Route
+              path='verify-phone-number'
+              canActivate={clerk => !!clerk.client.signUp.phoneNumber}
+            >
+              <SignUpVerifyPhone />
+            </Route>
+            <Route path='sso-callback'>
+              <SignUpSSOCallback
+                signUpUrl={signUpContext.signUpUrl}
+                signInUrl={signUpContext.signInUrl}
+                signUpForceRedirectUrl={signUpContext.afterSignUpUrl}
+                signInForceRedirectUrl={signUpContext.afterSignInUrl}
+                secondFactorUrl={signUpContext.secondFactorUrl}
+                continueSignUpUrl='../continue'
+                verifyEmailAddressUrl='../verify-email-address'
+                verifyPhoneNumberUrl='../verify-phone-number'
+              />
+            </Route>
+            <Route path='verify'>
+              <SignUpEmailLinkFlowComplete
+                redirectUrlComplete={signUpContext.afterSignUpUrl}
+                verifyEmailPath='../verify-email-address'
+                verifyPhonePath='../verify-phone-number'
+                continuePath='../continue'
+              />
+            </Route>
+            <Route path='continue'>
+              <Route
+                path='verify-email-address'
+                canActivate={clerk => !!clerk.client.signUp.emailAddress}
+              >
+                <SignUpVerifyEmail />
+              </Route>
+              <Route
+                path='verify-phone-number'
+                canActivate={clerk => !!clerk.client.signUp.phoneNumber}
+              >
+                <SignUpVerifyPhone />
+              </Route>
+              <Route index>
+                <SignUpContinue />
+              </Route>
+            </Route>
+            <Route index>
+              <SignUpStart />
+            </Route>
+          </Route>
+        )}
         <Route index>
           <SignInStart />
         </Route>
@@ -73,9 +143,24 @@ function SignInRoutes(): JSX.Element {
   );
 }
 
+function SignInRoot() {
+  const signInContext = useSignInContext();
+
+  return (
+    <SignUpContext.Provider
+      value={{
+        componentName: 'SignUp',
+        ...signInContext.__experimental?.signUpProps,
+      }}
+    >
+      <SignInRoutes />
+    </SignUpContext.Provider>
+  );
+}
+
 SignInRoutes.displayName = 'SignIn';
 
-export const SignIn: React.ComponentType<SignInProps> = withCoreSessionSwitchGuard(SignInRoutes);
+export const SignIn: React.ComponentType<SignInProps> = withCoreSessionSwitchGuard(SignInRoot);
 
 export const SignInModal = (props: SignInModalProps): JSX.Element => {
   const signInProps = {

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

@@ -9,7 +9,7 @@ import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils';
 import type { SignInStartIdentifier } from '../../common';
 import { getIdentifierControlDisplayValues, groupIdentifiers, withRedirectToAfterSignIn } from '../../common';
 import { buildSSOCallbackURL } from '../../common/redirects';
-import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
+import { useCoreSignIn, useEnvironment, useOptions, useSignInContext } from '../../contexts';
 import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
 import {
   Card,
@@ -25,8 +25,10 @@ import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { useRouter } from '../../router';
 import type { FormControlState } from '../../utils';
 import { buildRequest, handleError, isMobileDevice, useFormControl } from '../../utils';
+import { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';
 import { useHandleAuthenticateWithPasskey } from './shared';
 import { SignInSocialButtons } from './SignInSocialButtons';
+import { getSignUpAttributeFromIdentifier } from './utils';
 
 const useAutoFillPasskey = () => {
   const [isSupported, setIsSupported] = useState(false);
@@ -64,8 +66,10 @@ export function _SignInStart(): JSX.Element {
   const { displayConfig, userSettings } = useEnvironment();
   const signIn = useCoreSignIn();
   const { navigate } = useRouter();
+  const options = useOptions();
   const ctx = useSignInContext();
   const { afterSignInUrl, signUpUrl, waitlistUrl } = ctx;
+  const isCombinedFlow = (options?.experimental?.combinedFlow && options.signInUrl === options.signUpUrl) || false;
   const supportEmail = useSupportEmail();
   const identifierAttributes = useMemo<SignInStartIdentifier[]>(
     () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
@@ -325,15 +329,57 @@ export function _SignInStart(): JSX.Element {
       (e: ClerkAPIError) =>
         e.code === ERROR_CODES.INVALID_STRATEGY_FOR_USER || e.code === ERROR_CODES.FORM_PASSWORD_INCORRECT,
     );
+
     const alreadySignedInError: ClerkAPIError = e.errors.find(
       (e: ClerkAPIError) => e.code === 'identifier_already_signed_in',
     );
+    const accountDoesNotExistError: ClerkAPIError = e.errors.find(
+      (e: ClerkAPIError) =>
+        e.code === ERROR_CODES.INVITATION_ACCOUNT_NOT_EXISTS || e.code === ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND,
+    );
 
     if (instantPasswordError) {
       await signInWithFields(identifierField);
     } else if (alreadySignedInError) {
       const sid = alreadySignedInError.meta!.sessionId!;
       await clerk.setActive({ session: sid, redirectUrl: afterSignInUrl });
+    } else if (isCombinedFlow && accountDoesNotExistError) {
+      const attribute = getSignUpAttributeFromIdentifier(identifierField);
+
+      if (userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST) {
+        const waitlistUrl = clerk.buildWaitlistUrl(
+          attribute === 'emailAddress'
+            ? {
+                initialValues: {
+                  [attribute]: identifierField.value,
+                },
+              }
+            : {},
+        );
+        return navigate(waitlistUrl);
+      }
+
+      clerk.client.signUp[attribute] = identifierField.value;
+      const paramsToForward = new URLSearchParams();
+      if (organizationTicket) {
+        paramsToForward.set('__clerk_ticket', organizationTicket);
+      }
+
+      const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signUpUrl);
+      const redirectUrlComplete = ctx.afterSignUpUrl || '/';
+
+      return handleCombinedFlowTransfer({
+        afterSignUpUrl: ctx.afterSignUpUrl || '/',
+        clerk,
+        handleError: e => handleError(e, [identifierField, instantPasswordField], card.setError),
+        identifierAttribute: attribute,
+        identifierValue: identifierField.value,
+        navigate,
+        organizationTicket,
+        signUpMode: userSettings.signUp.mode,
+        redirectUrl,
+        redirectUrlComplete,
+      });
     } else {
       handleError(e, [identifierField, instantPasswordField], card.setError);
     }
@@ -366,8 +412,14 @@ export function _SignInStart(): JSX.Element {
       <Card.Root>
         <Card.Content>
           <Header.Root showLogo>
-            <Header.Title localizationKey={localizationKeys('signIn.start.title')} />
-            <Header.Subtitle localizationKey={localizationKeys('signIn.start.subtitle')} />
+            {isCombinedFlow ? (
+              <Header.Title localizationKey={localizationKeys('signIn.start.__experimental_titleCombined')} />
+            ) : (
+              <>
+                <Header.Title localizationKey={localizationKeys('signIn.start.title')} />
+                <Header.Subtitle localizationKey={localizationKeys('signIn.start.subtitle')} />
+              </>
+            )}
           </Header.Root>
           <Card.Alert>{card.error}</Card.Alert>
           {/*TODO: extract main in its own component */}
@@ -416,7 +468,7 @@ export function _SignInStart(): JSX.Element {
           </Col>
         </Card.Content>
         <Card.Footer>
-          {userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC && (
+          {userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC && !isCombinedFlow && (
             <Card.Action elementId='signIn'>
               <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />
               <Card.ActionLink