feat(clerk-js): Launch sign-in-or-up flow (#4788)

Co-authored-by: Jacek <jacek@clerk.dev>
Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>
Co-authored-by: panteliselef <panteliselef@outlook.com>
Co-authored-by: Lennart <lekoarts@gmail.com>
Co-authored-by: Bryce Kalow <bryce@clerk.dev>

Author: 6 people

.changeset/tough-bugs-vanish.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+'@clerk/vue': minor
+---
+
+Introduce sign-in-or-up flow.

integration/presets/envs.ts

@@ -113,14 +113,15 @@ const withWaitlistdMode = withEmailCodes
   .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-waitlist-mode').sk)
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-waitlist-mode').pk);
 
-const withCombinedFlow = withEmailCodes
+const withSignInOrUpFlow = withEmailCodes
   .clone()
-  .setId('withCombinedFlow')
-  .setEnvVariable('private', 'CLERK_SECRET_KEY', instanceKeys.get('with-email-codes').sk)
-  .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', instanceKeys.get('with-email-codes').pk)
-  .setEnvVariable('public', 'EXPERIMENTAL_COMBINED_FLOW', 'true')
-  .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '/sign-in')
-  .setEnvVariable('public', 'CLERK_SIGN_UP_URL', '/sign-in');
+  .setId('withSignInOrUpFlow')
+  .setEnvVariable('public', 'CLERK_SIGN_UP_URL', undefined);
+
+const withSignInOrUpEmailLinksFlow = withEmailLinks
+  .clone()
+  .setId('withSignInOrUpEmailLinksFlow')
+  .setEnvVariable('public', 'CLERK_SIGN_UP_URL', undefined);
 
 export const envs = {
   base,
@@ -138,5 +139,6 @@ export const envs = {
   withRestrictedMode,
   withLegalConsent,
   withWaitlistdMode,
-  withCombinedFlow,
+  withSignInOrUpFlow,
+  withSignInOrUpEmailLinksFlow,
 } as const;

integration/presets/longRunningApps.ts

@@ -31,7 +31,12 @@ export const createLongRunningApps = () => {
     },
     { id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles },
     { id: 'next.appRouter.withReverification', config: next.appRouter, env: envs.withReverification },
-    { id: 'next.appRouter.withCombinedFlow', config: next.appRouter, env: envs.withCombinedFlow },
+    { id: 'next.appRouter.withSignInOrUpFlow', config: next.appRouter, env: envs.withSignInOrUpFlow },
+    {
+      id: 'next.appRouter.withSignInOrUpEmailLinksFlow',
+      config: next.appRouter,
+      env: envs.withSignInOrUpEmailLinksFlow,
+    },
     { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart },
     { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes },
     { id: 'astro.node.withCustomRoles', config: astro.node, env: envs.withCustomRoles },

integration/templates/next-app-router/src/app/layout.tsx

@@ -13,9 +13,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider
       experimental={{
-        combinedFlow: process.env.NEXT_PUBLIC_EXPERIMENTAL_COMBINED_FLOW
-          ? process.env.NEXT_PUBLIC_EXPERIMENTAL_COMBINED_FLOW === 'true'
-          : undefined,
         persistClient: process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT
           ? process.env.NEXT_PUBLIC_EXPERIMENTAL_PERSIST_CLIENT === 'true'
           : undefined,

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>
   );