fix(remix): Automatically infer path to where component is mounted

.changeset/wicked-worms-draw.md

@@ -0,0 +1,5 @@
+---
+'@clerk/remix': patch
+---
+
+Automatically infer the path for where the component is mounted.

packages/remix/src/client/uiComponents.tsx

@@ -15,21 +15,23 @@ import type {
 } from '@clerk/types';
 import React from 'react';
 
-import { useClerkRemixOptions } from './RemixOptionsContext';
+import { usePathnameWithoutSplatRouteParams } from './usePathnameWithoutSplatRouteParams';
 
 // The assignment of UserProfile with BaseUserProfile props is used
 // to support the CustomPage functionality (eg UserProfile.Page)
 // Also the `typeof BaseUserProfile` is used to resolved the following error:
 // "The inferred type of 'UserProfile' cannot be named without a reference to ..."
 export const UserProfile: typeof BaseUserProfile = Object.assign(
   (props: UserProfileProps) => {
-    return <BaseUserProfile {...useRoutingProps('UserProfile', props)} />;
+    const path = usePathnameWithoutSplatRouteParams();
+    return <BaseUserProfile {...useRoutingProps('UserProfile', props, { path })} />;
   },
   { ...BaseUserProfile },
 );
 
 export const CreateOrganization = (props: CreateOrganizationProps) => {
-  return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props)} />;
+  const path = usePathnameWithoutSplatRouteParams();
+  return <BaseCreateOrganization {...useRoutingProps('CreateOrganization', props, { path })} />;
 };
 
 // The assignment of OrganizationProfile with BaseOrganizationProfile props is used
@@ -38,17 +40,18 @@ export const CreateOrganization = (props: CreateOrganizationProps) => {
 // "The inferred type of 'OrganizationProfile' cannot be named without a reference to ..."
 export const OrganizationProfile: typeof BaseOrganizationProfile = Object.assign(
   (props: OrganizationProfileProps) => {
-    return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props)} />;
+    const path = usePathnameWithoutSplatRouteParams();
+    return <BaseOrganizationProfile {...useRoutingProps('OrganizationProfile', props, { path })} />;
   },
   { ...BaseOrganizationProfile },
 );
 
 export const SignIn = (props: SignInProps) => {
-  const { signInUrl } = useClerkRemixOptions();
-  return <BaseSignIn {...useRoutingProps('SignIn', props, { path: signInUrl })} />;
+  const path = usePathnameWithoutSplatRouteParams();
+  return <BaseSignIn {...useRoutingProps('SignIn', props, { path })} />;
 };
 
 export const SignUp = (props: SignUpProps) => {
-  const { signUpUrl } = useClerkRemixOptions();
-  return <BaseSignUp {...useRoutingProps('SignUp', props, { path: signUpUrl })} />;
+  const path = usePathnameWithoutSplatRouteParams();
+  return <BaseSignUp {...useRoutingProps('SignUp', props, { path })} />;
 };

packages/remix/src/client/usePathnameWithoutSplatRouteParams.tsx

@@ -0,0 +1,18 @@
+import { useLocation, useParams } from '@remix-run/react';
+
+export const usePathnameWithoutSplatRouteParams = () => {
+  const params = useParams();
+  const { pathname } = useLocation();
+
+  // Get the splat route params
+  // Remix store splat route params in an object with a key of '*'
+  // If there are no splat route params, we fallback to an empty string
+  const splatRouteParam = params['*'] || '';
+
+  // Remove the splat route param from the pathname
+  // so we end up with the pathname where the components are mounted at
+  // eg /user/123/profile/security will return /user/123/profile as the path
+  const path = pathname.replace(splatRouteParam, '').replace(/\/$/, '').replace(/^\//, '').trim();
+
+  return `/${path}`;
+};