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 (
- +
); };