feat(clerk-js,react,types): Add option to enable combined flow at component level

.changeset/cuddly-shrimps-fold.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Add option to allow a `<SignIn />` component instance to opt into the sign-in-or-up flow.

integration/templates/next-app-router/src/app/sign-in-or-up/[[...catchall]]/page.tsx

@@ -0,0 +1,15 @@
+import { SignIn } from '@clerk/nextjs';
+
+export default function Page() {
+  return (
+    <div>
+      <SignIn
+        routing={'path'}
+        path={'/sign-in'}
+        signUpUrl={'/sign-up'}
+        fallback={<>Loading sign in</>}
+        withSignUp
+      />
+    </div>
+  );
+}

integration/templates/next-app-router/src/app/sign-in/[[...catchall]]/page.tsx

@@ -8,9 +8,6 @@ export default function Page() {
         path={'/sign-in'}
         signUpUrl={'/sign-up'}
         fallback={<>Loading sign in</>}
-        __experimental={{
-          combinedProps: {},
-        }}
       />
     </div>
   );

integration/tests/sign-in-or-up-component.test.ts

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test';
+
+import type { Application } from '../models/application';
+import { appConfigs } from '../presets';
+import { createTestUtils } from '../testUtils';
+
+test.describe('sign-in-or-up component initialization flow @nextjs', () => {
+  test.describe.configure({ mode: 'parallel' });
+  let app: Application;
+
+  test.beforeAll(async () => {
+    app = await appConfigs.next.appRouter.clone().commit();
+    await app.setup();
+    await app.withEnv(appConfigs.envs.withEmailCodes);
+    await app.dev();
+  });
+
+  test.afterAll(async () => {
+    await app.teardown();
+  });
+
+  test('flows are combined', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-in-or-up');
+    await expect(u.page.getByText(`Don’t have an account?`)).toBeHidden();
+  });
+});

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

@@ -23,9 +23,9 @@ export type SignInContextType = SignInCtx & {
   afterSignInUrl: string;
   transferable: boolean;
   waitlistUrl: string;
-  isCombinedFlow: boolean;
   emailLinkRedirectUrl: string;
   ssoCallbackUrl: string;
+  isCombinedFlow: boolean;
 };
 
 export const SignInContext = createContext<SignInCtx | null>(null);
@@ -37,12 +37,16 @@ export const useSignInContext = (): SignInContextType => {
   const { queryParams, queryString } = useRouter();
   const options = useOptions();
   const clerk = useClerk();
-  const isCombinedFlow = Boolean(!options.signUpUrl && options.signInUrl && !isAbsoluteUrl(options.signInUrl));
 
   if (context === null || context.componentName !== 'SignIn') {
     throw new Error(`Clerk: useSignInContext called outside of the mounted SignIn component.`);
   }
 
+  const isCombinedFlow =
+    Boolean(!options.signUpUrl && options.signInUrl && !isAbsoluteUrl(options.signInUrl)) ||
+    context.withSignUp ||
+    false;
+
   const { componentName, mode, ..._ctx } = context;
   const ctx = _ctx.__experimental?.combinedProps ? { ..._ctx, ..._ctx.__experimental?.combinedProps } : _ctx;
   const initialValuesFromQueryParams = useMemo(

packages/react/src/components/SignInButton.tsx

@@ -14,6 +14,7 @@ export const SignInButton = withClerk(
       signUpForceRedirectUrl,
       mode,
       initialValues,
+      withSignUp,
       ...rest
     } = props;
     children = normalizeWithDefaultValue(children, 'Sign in');
@@ -26,6 +27,7 @@ export const SignInButton = withClerk(
         signUpFallbackRedirectUrl,
         signUpForceRedirectUrl,
         initialValues,
+        withSignUp,
       };
 
       if (mode === 'modal') {

packages/react/src/types.ts

@@ -122,6 +122,7 @@ export type SignInButtonProps = ButtonProps &
     | 'signUpForceRedirectUrl'
     | 'signUpFallbackRedirectUrl'
     | 'initialValues'
+    | 'withSignUp'
   >;
 
 export type SignUpButtonProps = {

packages/types/src/clerk.ts

@@ -940,6 +940,10 @@ export type SignInProps = RoutingOptions & {
    * Additional arbitrary metadata to be stored alongside the User object
    */
   unsafeMetadata?: SignUpUnsafeMetadata;
+  /**
+   * Enable sign-in-or-up flow for `<SignIn />` component instance.
+   */
+  withSignUp?: boolean;
 } & TransferableOption &
   SignUpForceRedirectUrl &
   SignUpFallbackRedirectUrl &