diff --git a/.changeset/good-buttons-drum.md b/.changeset/good-buttons-drum.md
new file mode 100644
index 00000000000..e51bd593dbc
--- /dev/null
+++ b/.changeset/good-buttons-drum.md
@@ -0,0 +1,31 @@
+---
+'@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.
+```jsx
+
+// Without path or routing props, an error with be thrown
+
+
+
+
+
+
+// Alternative #1
+
+
+
+
+
+
+// Alternative #2
+
+
+
+
+
+```
\ No newline at end of file
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)
diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx
index 12aeeb0a259..245e4de63c9 100644
--- a/packages/nextjs/src/client-boundary/uiComponents.tsx
+++ b/packages/nextjs/src/client-boundary/uiComponents.tsx
@@ -1,52 +1,52 @@
'use client';
-import { SignIn as BaseSignIn, SignUp as BaseSignUp } from '@clerk/clerk-react';
-import type { SignInProps, SignUpProps } from '@clerk/types';
+import {
+ CreateOrganization as BaseCreateOrganization,
+ OrganizationProfile as BaseOrganizationProfile,
+ SignIn as BaseSignIn,
+ SignUp as BaseSignUp,
+ UserProfile as BaseUserProfile,
+} from '@clerk/clerk-react';
+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';
export {
- CreateOrganization,
OrganizationList,
- OrganizationProfile,
OrganizationSwitcher,
SignInButton,
SignInWithMetamaskButton,
SignOutButton,
SignUpButton,
UserButton,
- UserProfile,
} from '@clerk/clerk-react';
+export const UserProfile = (props: UserProfileProps) => {
+ return ;
+};
+
+export const CreateOrganization = (props: CreateOrganizationProps) => {
+ return ;
+};
+
+export const OrganizationProfile = (props: OrganizationProfileProps) => {
+ return ;
+};
+
export const SignIn = (props: SignInProps) => {
- const { signInUrl: repoLevelSignInUrl } = useClerkNextOptions();
- const path = props.path || repoLevelSignInUrl;
-
- if (path) {
- ;
- }
-
- return ;
+ const { signInUrl } = useClerkNextOptions();
+ return ;
};
export const SignUp = (props: SignUpProps) => {
- const { signUpUrl: repoLevelSignUpUrl } = useClerkNextOptions();
- const path = props.path || repoLevelSignUpUrl;
-
- if (path) {
- return (
-
- );
- }
-
- return ;
+ const { signUpUrl } = useClerkNextOptions();
+ return ;
};
diff --git a/packages/react/src/errors/messages.ts b/packages/react/src/errors/messages.ts
index 42e2ac81368..cfcbab1c7f4 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) =>
+ `<${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(
+ 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 ff0a09d54c2..c632da286c5 100644
--- a/packages/remix/src/client/uiComponents.tsx
+++ b/packages/remix/src/client/uiComponents.tsx
@@ -1,37 +1,40 @@
-import { SignIn as BaseSignIn, SignUp as BaseSignUp } from '@clerk/clerk-react';
-import type { SignInProps, SignUpProps } from '@clerk/types';
+import {
+ CreateOrganization as BaseCreateOrganization,
+ OrganizationProfile as BaseOrganizationProfile,
+ SignIn as BaseSignIn,
+ SignUp as BaseSignUp,
+ UserProfile as BaseUserProfile,
+} from '@clerk/clerk-react';
+import { useRoutingProps } from '@clerk/clerk-react/internal';
+import type {
+ CreateOrganizationProps,
+ OrganizationProfileProps,
+ SignInProps,
+ SignUpProps,
+ UserProfileProps,
+} from '@clerk/types';
import React from 'react';
import { useClerkRemixOptions } from './RemixOptionsContext';
-export const SignIn = (props: SignInProps) => {
- const { signInUrl } = useClerkRemixOptions();
- const path = props.path || signInUrl;
+export const UserProfile = (props: UserProfileProps) => {
+ return ;
+};
- if (path) {
- return (
-
- );
- }
+export const CreateOrganization = (props: CreateOrganizationProps) => {
+ return ;
+};
- return ;
+export const OrganizationProfile = (props: OrganizationProfileProps) => {
+ return ;
+};
+
+export const SignIn = (props: SignInProps) => {
+ const { signInUrl } = useClerkRemixOptions();
+ return ;
};
export const SignUp = (props: SignUpProps) => {
const { signUpUrl } = useClerkRemixOptions();
- const path = props.path || signUpUrl;
-
- if (path) {
- return (
-
- );
- }
- return ;
+ return ;
};
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 = () => {
-
+
);
};
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 = () => {
-
+
);
};
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 (
-
+
);
};