From 85a5f3e990030d9b5a80e59b9c4150f4f0723d09 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 13 Dec 2023 19:14:33 +0200
Subject: [PATCH 1/9] feat(clerk-react,remix,nextjs): Default routing for
 NextJS and Remix

---
 .../src/client-boundary/uiComponents.tsx      | 16 +++++++---
 packages/react/src/components/index.ts        |  1 +
 .../src/components/withPathDefaultRouting.tsx | 30 +++++++++++++++++++
 packages/remix/src/client/uiComponents.tsx    | 13 +++++++-
 .../pages/organization/[[...index]].tsx       |  2 +-
 playground/nextjs/pages/user/[[...index]].tsx |  2 +-
 6 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 packages/react/src/components/withPathDefaultRouting.tsx

diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index 12aeeb0a259..84ecf9b8168 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -1,24 +1,32 @@
 'use client';
 
-import { SignIn as BaseSignIn, SignUp as BaseSignUp } from '@clerk/clerk-react';
+import {
+  CreateOrganization as BaseCreateOrganization,
+  OrganizationProfile as BaseOrganizationProfile,
+  SignIn as BaseSignIn,
+  SignUp as BaseSignUp,
+  UserProfile as BaseUserProfile,
+  withPathDefaultRouting,
+} from '@clerk/clerk-react';
 import type { SignInProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
 import { useClerkNextOptions } from './NextOptionsContext';
 
 export {
-  CreateOrganization,
   OrganizationList,
-  OrganizationProfile,
   OrganizationSwitcher,
   SignInButton,
   SignInWithMetamaskButton,
   SignOutButton,
   SignUpButton,
   UserButton,
-  UserProfile,
 } from '@clerk/clerk-react';
 
+export const UserProfile = withPathDefaultRouting(BaseUserProfile);
+export const CreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
+export const OrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
+
 export const SignIn = (props: SignInProps) => {
   const { signInUrl: repoLevelSignInUrl } = useClerkNextOptions();
   const path = props.path || repoLevelSignInUrl;
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index ed45d7aa226..5c7aa883ee6 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -25,6 +25,7 @@ export {
 
 export type { ProtectProps } from './controlComponents';
 
+export { withPathDefaultRouting } from './withPathDefaultRouting';
 export { SignInButton } from './SignInButton';
 export { SignUpButton } from './SignUpButton';
 export { SignOutButton } from './SignOutButton';
diff --git a/packages/react/src/components/withPathDefaultRouting.tsx b/packages/react/src/components/withPathDefaultRouting.tsx
new file mode 100644
index 00000000000..61635c7d5af
--- /dev/null
+++ b/packages/react/src/components/withPathDefaultRouting.tsx
@@ -0,0 +1,30 @@
+import type { RoutingOptions } from '@clerk/types';
+import type { ComponentProps, ComponentType } from 'react';
+import React from 'react';
+
+import { errorThrower } from '../errors/errorThrower';
+
+export function withPathDefaultRouting<T, P extends RoutingOptions>(Component: T): T {
+  const BaseComponent = Component as ComponentType<RoutingOptions>;
+  const HOC = (props: ComponentProps<ComponentType<P>>) => {
+    if (!props.path && !props.routing) {
+      errorThrower.throw('You must specify path and routing props');
+    }
+    if (props.path) {
+      return (
+        <BaseComponent
+          {...props}
+          routing='path'
+        />
+      );
+    }
+
+    return <BaseComponent {...props} />;
+  };
+
+  HOC.displayName = BaseComponent.displayName;
+
+  return Object.assign(HOC, {
+    ...BaseComponent,
+  }) as T;
+}
diff --git a/packages/remix/src/client/uiComponents.tsx b/packages/remix/src/client/uiComponents.tsx
index ff0a09d54c2..24c69aead25 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -1,9 +1,20 @@
-import { SignIn as BaseSignIn, SignUp as BaseSignUp } from '@clerk/clerk-react';
+import {
+  CreateOrganization as BaseCreateOrganization,
+  OrganizationProfile as BaseOrganizationProfile,
+  SignIn as BaseSignIn,
+  SignUp as BaseSignUp,
+  UserProfile as BaseUserProfile,
+  withPathDefaultRouting,
+} from '@clerk/clerk-react';
 import type { SignInProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
 import { useClerkRemixOptions } from './RemixOptionsContext';
 
+export const UserProfile = withPathDefaultRouting(BaseUserProfile);
+export const CreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
+export const OrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
+
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkRemixOptions();
   const path = props.path || signInUrl;
diff --git a/playground/nextjs/pages/organization/[[...index]].tsx b/playground/nextjs/pages/organization/[[...index]].tsx
index ddfbe5825a7..d758415f60f 100644
--- a/playground/nextjs/pages/organization/[[...index]].tsx
+++ b/playground/nextjs/pages/organization/[[...index]].tsx
@@ -7,7 +7,7 @@ const OrganizationProfilePage: NextPage = () => {
     <div
       style={{ display: 'flex', flexDirection: 'column', gap: '2rem', justifyContent: 'center', alignItems: 'center' }}
     >
-      <OrganizationProfile />
+      <OrganizationProfile path='/organization' />
     </div>
   );
 };
diff --git a/playground/nextjs/pages/user/[[...index]].tsx b/playground/nextjs/pages/user/[[...index]].tsx
index aafbae55faa..b904dccc8b9 100644
--- a/playground/nextjs/pages/user/[[...index]].tsx
+++ b/playground/nextjs/pages/user/[[...index]].tsx
@@ -12,7 +12,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
 const UserProfilePage: NextPage = () => {
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <UserProfile />
+      <UserProfile path='/user' />
     </div>
   );
 };

From 97a1ea6bd62d97287368a8c6b87d7fdbd50be364 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 13 Dec 2023 20:02:08 +0200
Subject: [PATCH 2/9] chore(repo): Update changeset

---
 .changeset/good-buttons-drum.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/good-buttons-drum.md

diff --git a/.changeset/good-buttons-drum.md b/.changeset/good-buttons-drum.md
new file mode 100644
index 00000000000..304060f43d0
--- /dev/null
+++ b/.changeset/good-buttons-drum.md
@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': major
+'@clerk/nextjs': major
+'@clerk/clerk-react': major
+'@clerk/remix': major
+---
+
+Path-based routing is now the default routing strategy if the `path` prop is filled. Additionally, if the `path` and `routing` props are not filled, an error will be thrown.

From cd8ae3a2bdd8111c975f11c64d9689561b709c11 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Wed, 13 Dec 2023 20:02:56 +0200
Subject: [PATCH 3/9] chore(repo): Update NextJs playground

---
 playground/nextjs/pages/create-organization/[[...index]].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playground/nextjs/pages/create-organization/[[...index]].tsx b/playground/nextjs/pages/create-organization/[[...index]].tsx
index 774947eba0c..398c93b0d5b 100644
--- a/playground/nextjs/pages/create-organization/[[...index]].tsx
+++ b/playground/nextjs/pages/create-organization/[[...index]].tsx
@@ -6,7 +6,7 @@ const CreateOrganizationPage: NextPage = () => {
     <div
       style={{ display: 'flex', flexDirection: 'column', gap: '2rem', justifyContent: 'center', alignItems: 'center' }}
     >
-      <CreateOrganization />
+      <CreateOrganization path='/create-organization' />
     </div>
   );
 };

From 7ca360e2d3900c5d47db7486ebf59bd550d30eed Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 14 Dec 2023 10:21:47 +0200
Subject: [PATCH 4/9] fix(nextjs,remix): Throw error if no path or routing
 strategy provided

---
 .../src/__snapshots__/exports.test.ts.snap          |  1 +
 .../nextjs/src/client-boundary/uiComponents.tsx     | 12 +++++++++---
 .../react/src/components/withPathDefaultRouting.tsx |  1 +
 packages/remix/src/client/uiComponents.tsx          | 13 ++++++++++---
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap
index 0e05ab262c8..b51e48d31b2 100644
--- a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap
+++ b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap
@@ -36,5 +36,6 @@ exports[`public exports should not include a breaking change 1`] = `
   "useSignIn",
   "useSignUp",
   "useUser",
+  "withPathDefaultRouting",
 ]
 `;
diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index 84ecf9b8168..3f4181a0738 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -23,13 +23,16 @@ export {
   UserButton,
 } from '@clerk/clerk-react';
 
-export const UserProfile = withPathDefaultRouting(BaseUserProfile);
-export const CreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
-export const OrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
+export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile);
+export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
+export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl: repoLevelSignInUrl } = useClerkNextOptions();
   const path = props.path || repoLevelSignInUrl;
+  if (!path && !props.routing) {
+    throw Error('You must specify path and routing props');
+  }
 
   if (path) {
     <BaseSignIn
@@ -45,6 +48,9 @@ export const SignIn = (props: SignInProps) => {
 export const SignUp = (props: SignUpProps) => {
   const { signUpUrl: repoLevelSignUpUrl } = useClerkNextOptions();
   const path = props.path || repoLevelSignUpUrl;
+  if (!path && !props.routing) {
+    throw Error('You must specify path and routing props');
+  }
 
   if (path) {
     return (
diff --git a/packages/react/src/components/withPathDefaultRouting.tsx b/packages/react/src/components/withPathDefaultRouting.tsx
index 61635c7d5af..24be8b0e48f 100644
--- a/packages/react/src/components/withPathDefaultRouting.tsx
+++ b/packages/react/src/components/withPathDefaultRouting.tsx
@@ -10,6 +10,7 @@ export function withPathDefaultRouting<T, P extends RoutingOptions>(Component: T
     if (!props.path && !props.routing) {
       errorThrower.throw('You must specify path and routing props');
     }
+
     if (props.path) {
       return (
         <BaseComponent
diff --git a/packages/remix/src/client/uiComponents.tsx b/packages/remix/src/client/uiComponents.tsx
index 24c69aead25..024d351a4a6 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -9,15 +9,19 @@ import {
 import type { SignInProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
+import { errorThrower } from '../errorThrower';
 import { useClerkRemixOptions } from './RemixOptionsContext';
 
-export const UserProfile = withPathDefaultRouting(BaseUserProfile);
-export const CreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
-export const OrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
+export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile);
+export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
+export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkRemixOptions();
   const path = props.path || signInUrl;
+  if (!path && !props.routing) {
+    errorThrower.throw('You must specify path and routing props');
+  }
 
   if (path) {
     return (
@@ -35,6 +39,9 @@ export const SignIn = (props: SignInProps) => {
 export const SignUp = (props: SignUpProps) => {
   const { signUpUrl } = useClerkRemixOptions();
   const path = props.path || signUpUrl;
+  if (!path && !props.routing) {
+    errorThrower.throw('You must specify path and routing props');
+  }
 
   if (path) {
     return (

From 24c375a3ffc6e3743e5511b68bd6e61c233a777c Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 14 Dec 2023 12:42:40 +0200
Subject: [PATCH 5/9] fix(nextjs,remix,clerk-react): Improve error for
 withPathDefaultRouting

---
 .../nextjs/src/client-boundary/uiComponents.tsx  | 16 +++++++++++-----
 .../src/components/withPathDefaultRouting.tsx    |  5 +++--
 packages/react/src/errors/messages.ts            |  3 +++
 packages/remix/src/client/uiComponents.tsx       | 13 ++++++++-----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index 3f4181a0738..a072567d17a 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -23,15 +23,21 @@ export {
   UserButton,
 } from '@clerk/clerk-react';
 
-export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile);
-export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
-export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
+export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile, 'UserProfile');
+export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(
+  BaseCreateOrganization,
+  'CreateOrganization',
+);
+export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(
+  BaseOrganizationProfile,
+  'OrganizationProfile',
+);
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl: repoLevelSignInUrl } = useClerkNextOptions();
   const path = props.path || repoLevelSignInUrl;
   if (!path && !props.routing) {
-    throw Error('You must specify path and routing props');
+    throw Error('Missing path prop. <SignIn/> requires a path prop.');
   }
 
   if (path) {
@@ -49,7 +55,7 @@ export const SignUp = (props: SignUpProps) => {
   const { signUpUrl: repoLevelSignUpUrl } = useClerkNextOptions();
   const path = props.path || repoLevelSignUpUrl;
   if (!path && !props.routing) {
-    throw Error('You must specify path and routing props');
+    throw Error('Missing path prop. <SignUp/> requires a path prop.');
   }
 
   if (path) {
diff --git a/packages/react/src/components/withPathDefaultRouting.tsx b/packages/react/src/components/withPathDefaultRouting.tsx
index 24be8b0e48f..242a2268fbe 100644
--- a/packages/react/src/components/withPathDefaultRouting.tsx
+++ b/packages/react/src/components/withPathDefaultRouting.tsx
@@ -3,12 +3,13 @@ import type { ComponentProps, ComponentType } from 'react';
 import React from 'react';
 
 import { errorThrower } from '../errors/errorThrower';
+import { noPathProvidedError } from '../errors/messages';
 
-export function withPathDefaultRouting<T, P extends RoutingOptions>(Component: T): T {
+export function withPathDefaultRouting<T, P extends RoutingOptions>(Component: T, componentName: string): T {
   const BaseComponent = Component as ComponentType<RoutingOptions>;
   const HOC = (props: ComponentProps<ComponentType<P>>) => {
     if (!props.path && !props.routing) {
-      errorThrower.throw('You must specify path and routing props');
+      errorThrower.throw(noPathProvidedError(componentName));
     }
 
     if (props.path) {
diff --git a/packages/react/src/errors/messages.ts b/packages/react/src/errors/messages.ts
index 42e2ac81368..b9474b4454f 100644
--- a/packages/react/src/errors/messages.ts
+++ b/packages/react/src/errors/messages.ts
@@ -35,3 +35,6 @@ export const customLinkWrongProps = (componentName: string) =>
 
 export const useAuthHasRequiresRoleOrPermission =
   'Missing parameters. `has` from `useAuth` requires a permission or role key to be passed. Example usage: `has({permission: "org:posts:edit"`';
+
+export const noPathProvidedError = (componentName: string) =>
+  `Missing path prop. <${componentName}/> requires a path prop.`;
diff --git a/packages/remix/src/client/uiComponents.tsx b/packages/remix/src/client/uiComponents.tsx
index 024d351a4a6..90b2c6e0fb7 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -12,15 +12,18 @@ import React from 'react';
 import { errorThrower } from '../errorThrower';
 import { useClerkRemixOptions } from './RemixOptionsContext';
 
-export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile);
-export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(BaseCreateOrganization);
-export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile);
+export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile, 'UserProfile');
+export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(
+  BaseCreateOrganization,
+  'CreateOrganization',
+);
+export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile, '');
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkRemixOptions();
   const path = props.path || signInUrl;
   if (!path && !props.routing) {
-    errorThrower.throw('You must specify path and routing props');
+    errorThrower.throw('Missing path prop. <SignIn/> requires a path prop.');
   }
 
   if (path) {
@@ -40,7 +43,7 @@ export const SignUp = (props: SignUpProps) => {
   const { signUpUrl } = useClerkRemixOptions();
   const path = props.path || signUpUrl;
   if (!path && !props.routing) {
-    errorThrower.throw('You must specify path and routing props');
+    errorThrower.throw('Missing path prop. <SignUp/> requires a path prop.');
   }
 
   if (path) {

From f82b75b900731fcf86af73b065ff2947c1f435c1 Mon Sep 17 00:00:00 2001
From: Dimitris Klouvas <dimitris@clerk.dev>
Date: Mon, 18 Dec 2023 18:45:28 +0200
Subject: [PATCH 6/9] chore(remix,nextjs,clerk-react): Replace
 withPathDefaultRouting with useRoutingOptions

---
 .../src/__snapshots__/exports.test.ts.snap    |  1 -
 .../src/client-boundary/uiComponents.tsx      | 64 +++++++------------
 packages/react/src/components/index.ts        |  1 -
 .../src/components/withPathDefaultRouting.tsx | 32 ----------
 packages/react/src/errors/messages.ts         |  2 +-
 packages/react/src/hooks/useRoutingProps.ts   | 27 ++++++++
 packages/react/src/internal.ts                |  1 +
 packages/remix/src/client/uiComponents.tsx    | 60 ++++++-----------
 8 files changed, 72 insertions(+), 116 deletions(-)
 delete mode 100644 packages/react/src/components/withPathDefaultRouting.tsx
 create mode 100644 packages/react/src/hooks/useRoutingProps.ts

diff --git a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap
index b51e48d31b2..0e05ab262c8 100644
--- a/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap
+++ b/packages/chrome-extension/src/__snapshots__/exports.test.ts.snap
@@ -36,6 +36,5 @@ exports[`public exports should not include a breaking change 1`] = `
   "useSignIn",
   "useSignUp",
   "useUser",
-  "withPathDefaultRouting",
 ]
 `;
diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index a072567d17a..83a09b14483 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -6,9 +6,15 @@ import {
   SignIn as BaseSignIn,
   SignUp as BaseSignUp,
   UserProfile as BaseUserProfile,
-  withPathDefaultRouting,
 } from '@clerk/clerk-react';
-import type { SignInProps, SignUpProps } from '@clerk/types';
+import { useRoutingProps } from '@clerk/clerk-react/internal';
+import type {
+  CreateOrganizationProps,
+  OrganizationProfileProps,
+  SignInProps,
+  SignUpProps,
+  UserProfileProps,
+} from '@clerk/types';
 import React from 'react';
 
 import { useClerkNextOptions } from './NextOptionsContext';
@@ -23,50 +29,24 @@ export {
   UserButton,
 } from '@clerk/clerk-react';
 
-export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile, 'UserProfile');
-export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(
-  BaseCreateOrganization,
-  'CreateOrganization',
-);
-export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(
-  BaseOrganizationProfile,
-  'OrganizationProfile',
-);
+export const UserProfile = (props: UserProfileProps) => {
+  return <BaseUserProfile {...useRoutingProps(BaseUserProfile.displayName, props)} />;
+};
 
-export const SignIn = (props: SignInProps) => {
-  const { signInUrl: repoLevelSignInUrl } = useClerkNextOptions();
-  const path = props.path || repoLevelSignInUrl;
-  if (!path && !props.routing) {
-    throw Error('Missing path prop. <SignIn/> requires a path prop.');
-  }
+export const CreateOrganization = (props: CreateOrganizationProps) => {
+  return <BaseCreateOrganization {...useRoutingProps(BaseCreateOrganization.displayName, props)} />;
+};
 
-  if (path) {
-    <BaseSignIn
-      {...props}
-      routing='path'
-      path={path}
-    />;
-  }
+export const OrganizationProfile = (props: OrganizationProfileProps) => {
+  return <BaseOrganizationProfile {...useRoutingProps(BaseOrganizationProfile.displayName, props)} />;
+};
 
-  return <BaseSignIn {...props} />;
+export const SignIn = (props: SignInProps) => {
+  const { signInUrl } = useClerkNextOptions();
+  return <BaseSignIn {...useRoutingProps(BaseSignIn.displayName, props, { path: signInUrl })} />;
 };
 
 export const SignUp = (props: SignUpProps) => {
-  const { signUpUrl: repoLevelSignUpUrl } = useClerkNextOptions();
-  const path = props.path || repoLevelSignUpUrl;
-  if (!path && !props.routing) {
-    throw Error('Missing path prop. <SignUp/> requires a path prop.');
-  }
-
-  if (path) {
-    return (
-      <BaseSignUp
-        {...props}
-        routing='path'
-        path={path}
-      />
-    );
-  }
-
-  return <BaseSignUp {...props} />;
+  const { signUpUrl } = useClerkNextOptions();
+  return <BaseSignUp {...useRoutingProps(BaseSignUp.displayName, props, { path: signUpUrl })} />;
 };
diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts
index 5c7aa883ee6..ed45d7aa226 100644
--- a/packages/react/src/components/index.ts
+++ b/packages/react/src/components/index.ts
@@ -25,7 +25,6 @@ export {
 
 export type { ProtectProps } from './controlComponents';
 
-export { withPathDefaultRouting } from './withPathDefaultRouting';
 export { SignInButton } from './SignInButton';
 export { SignUpButton } from './SignUpButton';
 export { SignOutButton } from './SignOutButton';
diff --git a/packages/react/src/components/withPathDefaultRouting.tsx b/packages/react/src/components/withPathDefaultRouting.tsx
deleted file mode 100644
index 242a2268fbe..00000000000
--- a/packages/react/src/components/withPathDefaultRouting.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { RoutingOptions } from '@clerk/types';
-import type { ComponentProps, ComponentType } from 'react';
-import React from 'react';
-
-import { errorThrower } from '../errors/errorThrower';
-import { noPathProvidedError } from '../errors/messages';
-
-export function withPathDefaultRouting<T, P extends RoutingOptions>(Component: T, componentName: string): T {
-  const BaseComponent = Component as ComponentType<RoutingOptions>;
-  const HOC = (props: ComponentProps<ComponentType<P>>) => {
-    if (!props.path && !props.routing) {
-      errorThrower.throw(noPathProvidedError(componentName));
-    }
-
-    if (props.path) {
-      return (
-        <BaseComponent
-          {...props}
-          routing='path'
-        />
-      );
-    }
-
-    return <BaseComponent {...props} />;
-  };
-
-  HOC.displayName = BaseComponent.displayName;
-
-  return Object.assign(HOC, {
-    ...BaseComponent,
-  }) as T;
-}
diff --git a/packages/react/src/errors/messages.ts b/packages/react/src/errors/messages.ts
index b9474b4454f..cfcbab1c7f4 100644
--- a/packages/react/src/errors/messages.ts
+++ b/packages/react/src/errors/messages.ts
@@ -37,4 +37,4 @@ export const useAuthHasRequiresRoleOrPermission =
   'Missing parameters. `has` from `useAuth` requires a permission or role key to be passed. Example usage: `has({permission: "org:posts:edit"`';
 
 export const noPathProvidedError = (componentName: string) =>
-  `Missing path prop. <${componentName}/> requires a path prop.`;
+  `<${componentName}/> is missing a path prop to work with path based routing`;
diff --git a/packages/react/src/hooks/useRoutingProps.ts b/packages/react/src/hooks/useRoutingProps.ts
new file mode 100644
index 00000000000..94fb8339f0a
--- /dev/null
+++ b/packages/react/src/hooks/useRoutingProps.ts
@@ -0,0 +1,27 @@
+import type { RoutingOptions } from '@clerk/types';
+
+import { errorThrower } from '../errors/errorThrower';
+import { noPathProvidedError } from '../errors/messages';
+
+export function useRoutingProps<T extends RoutingOptions>(
+  componentName: string,
+  props: T,
+  routingOptions?: RoutingOptions,
+): T {
+  if (!props.path && !props.routing) {
+    errorThrower.throw(noPathProvidedError(componentName));
+  }
+
+  if (props.path) {
+    return {
+      ...routingOptions,
+      ...props,
+      routing: 'path',
+    };
+  }
+
+  return {
+    ...routingOptions,
+    ...props,
+  };
+}
diff --git a/packages/react/src/internal.ts b/packages/react/src/internal.ts
index 618de019b63..f8211d6abe3 100644
--- a/packages/react/src/internal.ts
+++ b/packages/react/src/internal.ts
@@ -1,2 +1,3 @@
 export { setErrorThrowerOptions } from './errors/errorThrower';
 export { MultisessionAppSupport } from './components/controlComponents';
+export { useRoutingProps } from './hooks/useRoutingProps';
diff --git a/packages/remix/src/client/uiComponents.tsx b/packages/remix/src/client/uiComponents.tsx
index 90b2c6e0fb7..7a8ddef8fcf 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -4,55 +4,37 @@ import {
   SignIn as BaseSignIn,
   SignUp as BaseSignUp,
   UserProfile as BaseUserProfile,
-  withPathDefaultRouting,
 } from '@clerk/clerk-react';
-import type { SignInProps, SignUpProps } from '@clerk/types';
+import { useRoutingProps } from '@clerk/clerk-react/internal';
+import type {
+  CreateOrganizationProps,
+  OrganizationProfileProps,
+  SignInProps,
+  SignUpProps,
+  UserProfileProps,
+} from '@clerk/types';
 import React from 'react';
 
-import { errorThrower } from '../errorThrower';
 import { useClerkRemixOptions } from './RemixOptionsContext';
 
-export const UserProfile: typeof BaseUserProfile = withPathDefaultRouting(BaseUserProfile, 'UserProfile');
-export const CreateOrganization: typeof BaseCreateOrganization = withPathDefaultRouting(
-  BaseCreateOrganization,
-  'CreateOrganization',
-);
-export const OrganizationProfile: typeof BaseOrganizationProfile = withPathDefaultRouting(BaseOrganizationProfile, '');
+export const UserProfile = (props: UserProfileProps) => {
+  return <BaseUserProfile {...useRoutingProps(BaseUserProfile.displayName, props)} />;
+};
 
-export const SignIn = (props: SignInProps) => {
-  const { signInUrl } = useClerkRemixOptions();
-  const path = props.path || signInUrl;
-  if (!path && !props.routing) {
-    errorThrower.throw('Missing path prop. <SignIn/> requires a path prop.');
-  }
+export const CreateOrganization = (props: CreateOrganizationProps) => {
+  return <BaseCreateOrganization {...useRoutingProps(BaseCreateOrganization.displayName, props)} />;
+};
 
-  if (path) {
-    return (
-      <BaseSignIn
-        {...props}
-        routing='path'
-        path={path}
-      />
-    );
-  }
+export const OrganizationProfile = (props: OrganizationProfileProps) => {
+  return <BaseOrganizationProfile {...useRoutingProps(BaseOrganizationProfile.displayName, props)} />;
+};
 
-  return <BaseSignIn {...props} />;
+export const SignIn = (props: SignInProps) => {
+  const { signInUrl } = useClerkRemixOptions();
+  return <BaseSignIn {...useRoutingProps(BaseSignIn.displayName, props, { path: signInUrl })} />;
 };
 
 export const SignUp = (props: SignUpProps) => {
   const { signUpUrl } = useClerkRemixOptions();
-  const path = props.path || signUpUrl;
-  if (!path && !props.routing) {
-    errorThrower.throw('Missing path prop. <SignUp/> requires a path prop.');
-  }
-
-  if (path) {
-    return (
-      <BaseSignUp
-        routing='path'
-        path={path}
-      />
-    );
-  }
-  return <BaseSignUp {...props} />;
+  return <BaseSignUp {...useRoutingProps(BaseSignUp.displayName, props, { path: signUpUrl })} />;
 };

From 36fa16d9559143bf6dced4d56fc22bd5a2b3df76 Mon Sep 17 00:00:00 2001
From: Dimitris Klouvas <dimitris@clerk.dev>
Date: Mon, 18 Dec 2023 19:10:52 +0200
Subject: [PATCH 7/9] chore(remix,nextjs): Use hard-coded component name This
 change is applied to show correct component name. Using Component.displayName
 was causing a `<withClerk(Component)/>` to be shown in error message

---
 packages/nextjs/src/client-boundary/uiComponents.tsx | 10 +++++-----
 packages/remix/src/client/uiComponents.tsx           | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index 83a09b14483..245e4de63c9 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -30,23 +30,23 @@ export {
 } from '@clerk/clerk-react';
 
 export const UserProfile = (props: UserProfileProps) => {
-  return <BaseUserProfile {...useRoutingProps(BaseUserProfile.displayName, props)} />;
+  return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 };
 
 export const CreateOrganization = (props: CreateOrganizationProps) => {
-  return <BaseCreateOrganization {...useRoutingProps(BaseCreateOrganization.displayName, props)} />;
+  return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 };
 
 export const OrganizationProfile = (props: OrganizationProfileProps) => {
-  return <BaseOrganizationProfile {...useRoutingProps(BaseOrganizationProfile.displayName, props)} />;
+  return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 };
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkNextOptions();
-  return <BaseSignIn {...useRoutingProps(BaseSignIn.displayName, props, { path: signInUrl })} />;
+  return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 };
 
 export const SignUp = (props: SignUpProps) => {
   const { signUpUrl } = useClerkNextOptions();
-  return <BaseSignUp {...useRoutingProps(BaseSignUp.displayName, props, { path: signUpUrl })} />;
+  return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 };
diff --git a/packages/remix/src/client/uiComponents.tsx b/packages/remix/src/client/uiComponents.tsx
index 7a8ddef8fcf..c632da286c5 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -18,23 +18,23 @@ import React from 'react';
 import { useClerkRemixOptions } from './RemixOptionsContext';
 
 export const UserProfile = (props: UserProfileProps) => {
-  return <BaseUserProfile {...useRoutingProps(BaseUserProfile.displayName, props)} />;
+  return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
 };
 
 export const CreateOrganization = (props: CreateOrganizationProps) => {
-  return <BaseCreateOrganization {...useRoutingProps(BaseCreateOrganization.displayName, props)} />;
+  return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
 };
 
 export const OrganizationProfile = (props: OrganizationProfileProps) => {
-  return <BaseOrganizationProfile {...useRoutingProps(BaseOrganizationProfile.displayName, props)} />;
+  return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
 };
 
 export const SignIn = (props: SignInProps) => {
   const { signInUrl } = useClerkRemixOptions();
-  return <BaseSignIn {...useRoutingProps(BaseSignIn.displayName, props, { path: signInUrl })} />;
+  return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
 };
 
 export const SignUp = (props: SignUpProps) => {
   const { signUpUrl } = useClerkRemixOptions();
-  return <BaseSignUp {...useRoutingProps(BaseSignUp.displayName, props, { path: signUpUrl })} />;
+  return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
 };

From b41d61279469f17c594534dc44d4d5542a54dec0 Mon Sep 17 00:00:00 2001
From: Dimitris Klouvas <dimitris@clerk.dev>
Date: Mon, 18 Dec 2023 19:23:47 +0200
Subject: [PATCH 8/9] chore(repo): Update changeset with examples

---
 .changeset/good-buttons-drum.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/.changeset/good-buttons-drum.md b/.changeset/good-buttons-drum.md
index 304060f43d0..e51bd593dbc 100644
--- a/.changeset/good-buttons-drum.md
+++ b/.changeset/good-buttons-drum.md
@@ -6,3 +6,26 @@
 ---
 
 Path-based routing is now the default routing strategy if the `path` prop is filled. Additionally, if the `path` and `routing` props are not filled, an error will be thrown.
+```jsx
+
+// Without path or routing props, an error with be thrown
+<UserProfile />
+<CreateOrganization />
+<OrganizationProfile />
+<SignIn />
+<SignUp />
+
+// Alternative #1
+<UserProfile path="/whatever"/>
+<CreateOrganization path="/whatever"/>
+<OrganizationProfile path="/whatever"/>
+<SignIn path="/whatever"/>
+<SignUp path="/whatever"/>
+
+// Alternative #2
+<UserProfile routing="hash_or_virtual"/>
+<CreateOrganization routing="hash_or_virtual"/>
+<OrganizationProfile routing="hash_or_virtual"/>
+<SignIn routing="hash_or_virtual"/>
+<SignUp routing="hash_or_virtual"/>
+```
\ No newline at end of file

From 563f1e72dcb3fd8c139cee953c967edcce627138 Mon Sep 17 00:00:00 2001
From: Dimitris Klouvas <dimitris@clerk.dev>
Date: Mon, 18 Dec 2023 20:11:21 +0200
Subject: [PATCH 9/9] chore(repo): Disable telemetry in integration tests

---
 integration/presets/envs.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/integration/presets/envs.ts b/integration/presets/envs.ts
index 3d466134596..5c665fd64d9 100644
--- a/integration/presets/envs.ts
+++ b/integration/presets/envs.ts
@@ -24,6 +24,7 @@ const envKeys = getInstanceKeys();
 
 const withEmailCodes = environmentConfig()
   .setId('withEmailCodes')
+  .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
   .setEnvVariable('private', 'CLERK_SECRET_KEY', envKeys['with-email-codes'].sk)
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', envKeys['with-email-codes'].pk)
   .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '/sign-in')
@@ -32,6 +33,7 @@ const withEmailCodes = environmentConfig()
 
 const withEmailLinks = environmentConfig()
   .setId('withEmailLinks')
+  .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
   .setEnvVariable('private', 'CLERK_SECRET_KEY', envKeys['with-email-links'].sk)
   .setEnvVariable('public', 'CLERK_PUBLISHABLE_KEY', envKeys['with-email-links'].pk)
   .setEnvVariable('public', 'CLERK_SIGN_IN_URL', '/sign-in')
@@ -40,6 +42,7 @@ const withEmailLinks = environmentConfig()
 
 const withCustomRoles = environmentConfig()
   .setId('withCustomRoles')
+  .setEnvVariable('public', 'CLERK_TELEMETRY_DISABLED', true)
   // Temporarily use the stage api until the custom roles feature is released to prod
   .setEnvVariable('private', 'CLERK_API_URL', 'https://api.clerkstage.dev')
   .setEnvVariable('private', 'CLERK_SECRET_KEY', envKeys['with-custom-roles'].sk)