feat(clerk-js,types): Move to waitlist with email address in combined flow

packages/clerk-js/sandbox/app.js

@@ -175,6 +175,7 @@ function addCurrentRouteIndicator(currentRoute) {
     await Clerk.load({
       signInUrl: '/sign-in',
       signUpUrl: '/sign-up',
+      waitlistUrl: '/waitlist',
     });
     renderCurrentRoute();
   }

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

@@ -1044,14 +1044,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 {

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

@@ -337,6 +337,19 @@ export function _SignInStart(): JSX.Element {
       const sid = alreadySignedInError.meta!.sessionId!;
       await clerk.setActive({ session: sid, redirectUrl: afterSignInUrl });
     } else {
+      if (isCombinedFlow && userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST) {
+        const attribute = getSignUpAttributeFromIdentifier(identifierField);
+        const waitlistUrl = clerk.buildWaitlistUrl(
+          attribute === 'emailAddress'
+            ? {
+                initialValues: {
+                  [attribute]: identifierField.value,
+                },
+              }
+            : {},
+        );
+        return navigate(waitlistUrl);
+      }
       if (isCombinedFlow) {
         const attribute = getSignUpAttributeFromIdentifier(identifierField);
         clerk.client.signUp[attribute] = identifierField.value;

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

@@ -13,8 +13,10 @@ const _Waitlist = () => {
   const ctx = useWaitlistContext();
   const { signInUrl } = ctx;
 
+  const initialValues = ctx.initialValues || {};
+
   const formState = {
-    emailAddress: useFormControl('emailAddress', '', {
+    emailAddress: useFormControl('emailAddress', initialValues.emailAddress || '', {
       type: 'email',
       label: localizationKeys('formFieldLabel__emailAddress'),
       placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),

packages/clerk-js/src/ui/contexts/components/Waitlist.ts

@@ -1,12 +1,17 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 
 import { buildURL } from '../../../utils';
 import { useEnvironment, useOptions } from '../../contexts';
+import { useRouter } from '../../router';
 import type { WaitlistCtx } from '../../types';
+import { getInitialValuesFromQueryParams } from '../utils';
+
+const WAITLIST_INITIAL_VALUE_KEYS = ['email_address'];
 
 export type WaitlistContextType = WaitlistCtx & {
   signInUrl: string;
   afterJoinWaitlistUrl?: string;
+  initialValues: any;
 };
 
 export const WaitlistContext = createContext<WaitlistCtx | null>(null);
@@ -15,6 +20,12 @@ export const useWaitlistContext = (): WaitlistContextType => {
   const context = useContext(WaitlistContext);
   const { displayConfig } = useEnvironment();
   const options = useOptions();
+  const { queryString } = useRouter();
+
+  const initialValuesFromQueryParams = useMemo(
+    () => getInitialValuesFromQueryParams(queryString, WAITLIST_INITIAL_VALUE_KEYS),
+    [],
+  );
 
   if (!context || context.componentName !== 'Waitlist') {
     throw new Error('Clerk: useWaitlistContext called outside Waitlist.');
@@ -29,5 +40,6 @@ export const useWaitlistContext = (): WaitlistContextType => {
     ...ctx,
     componentName,
     signInUrl,
+    initialValues: { ...initialValuesFromQueryParams },
   };
 };

packages/types/src/clerk.ts

@@ -465,7 +465,7 @@ export interface Clerk {
   /**
    * Returns the configured url where <Waitlist/> is mounted or a custom waitlist page is rendered.
    */
-  buildWaitlistUrl(): string;
+  buildWaitlistUrl(opts?: { initialValues?: Record<string, string> }): string;
 
   /**
    *