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 combined flow.

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

@@ -34,12 +34,14 @@ 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.combinedFlow;
+
   const { componentName, mode, ..._ctx } = context;
   const ctx = _ctx.__experimental?.combinedProps || _ctx;
 
@@ -76,7 +78,7 @@ export const useSignInContext = (): SignInContextType => {
   signUpUrl = buildURL({ base: signUpUrl, hashSearchParams: [queryParams, preservedParams] }, { stringify: true });
   waitlistUrl = buildURL({ base: waitlistUrl, hashSearchParams: [queryParams, preservedParams] }, { stringify: true });
 
-  if (options.experimental?.combinedFlow) {
+  if (isCombinedFlow) {
     signUpUrl = buildURL(
       { base: signInUrl, hashPath: '/create', hashSearchParams: [queryParams, preservedParams] },
       { stringify: true },

packages/react/src/components/SignInButton.tsx

@@ -13,6 +13,7 @@ export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkP
     signUpForceRedirectUrl,
     mode,
     initialValues,
+    combinedFlow,
     ...rest
   } = props;
   children = normalizeWithDefaultValue(children, 'Sign in');
@@ -25,6 +26,7 @@ export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkP
       signUpFallbackRedirectUrl,
       signUpForceRedirectUrl,
       initialValues,
+      combinedFlow,
     };
 
     if (mode === 'modal') {

packages/react/src/types.ts

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

packages/types/src/clerk.ts

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