fix(react-router): Simplify types for LoaderFunctionArgs

.changeset/every-glasses-shave.md

@@ -0,0 +1,5 @@
+---
+'@clerk/react-router': patch
+---
+
+In this release the TypeScript types for `rootAuthLoader()`, `getAuth()`, and `<ClerkProvider>` were adjusted but should still work as before. Previously, these types relied on internal, unstable React Router types that changed in their recent 7.6.1 release. We simplified our TypeScript types and no longer rely on internal exports from React Router.

packages/react-router/package.json

@@ -90,7 +90,7 @@
   "devDependencies": {
     "@types/cookie": "^0.6.0",
     "esbuild-plugin-file-path-extensions": "^2.1.4",
-    "react-router": "7.5.2"
+    "react-router": "7.6.1"
   },
   "peerDependencies": {
     "react": "catalog:peer-react",

packages/react-router/src/client/ReactRouterClerkProvider.tsx

@@ -8,7 +8,7 @@ import {
   warnForSsr,
 } from '../utils/assert';
 import { ClerkReactRouterOptionsProvider } from './ReactRouterOptionsContext';
-import type { ClerkState, ReactRouterClerkProviderProps, ReactRouterComponentProps } from './types';
+import type { ClerkState, ReactRouterClerkProviderProps } from './types';
 import { useAwaitableNavigate } from './useAwaitableNavigate';
 
 export * from '@clerk/clerk-react';
@@ -119,9 +119,9 @@ type ClerkReactRouterOptions = Partial<
   Omit<ReactRouterClerkProviderProps, 'routerPush' | 'routerReplace' | 'clerkState'>
 >;
 
-// TODO: Remove "any" on loaderData type
+// TODO: Remove "any" on loaderData type and use Route.ComponentProps from userland code
 type ClerkProviderProps = ClerkReactRouterOptions & {
-  loaderData?: ReactRouterComponentProps['loaderData'];
+  loaderData?: any;
 };
 
 export const ClerkProvider = ({ children, loaderData, ...opts }: ClerkProviderProps) => {

packages/react-router/src/client/types.ts

@@ -1,9 +1,6 @@
 import type { ClerkProviderProps } from '@clerk/clerk-react';
 import type { InitialState, Without } from '@clerk/types';
 import type React from 'react';
-import type { CreateComponentProps } from 'react-router/route-module';
-
-export type ReactRouterComponentProps = CreateComponentProps<any>;
 
 export type ClerkState = {
   __type: 'clerkState';

packages/react-router/src/ssr/authenticateRequest.ts

@@ -2,8 +2,8 @@ import { createClerkClient } from '@clerk/backend';
 import type { AuthenticateRequestOptions, SignedInState, SignedOutState } from '@clerk/backend/internal';
 import { AuthStatus, constants } from '@clerk/backend/internal';
 import { handleNetlifyCacheInDevInstance } from '@clerk/shared/netlifyCacheHandler';
+import type { LoaderFunctionArgs } from 'react-router';
 
-import type { LoaderFunctionArgs } from './types';
 import { patchRequest } from './utils';
 
 export async function authenticateRequest(

packages/react-router/src/ssr/getAuth.ts

@@ -1,9 +1,10 @@
 import { stripPrivateDataFromObject } from '@clerk/backend/internal';
+import type { LoaderFunctionArgs } from 'react-router';
 
 import { noLoaderArgsPassedInGetAuth } from '../utils/errors';
 import { authenticateRequest } from './authenticateRequest';
 import { loadOptions } from './loadOptions';
-import type { GetAuthReturn, LoaderFunctionArgs, RootAuthLoaderOptions } from './types';
+import type { GetAuthReturn, RootAuthLoaderOptions } from './types';
 
 type GetAuthOptions = Pick<RootAuthLoaderOptions, 'secretKey'>;
 

packages/react-router/src/ssr/loadOptions.ts

@@ -4,10 +4,11 @@ import { getEnvVariable } from '@clerk/shared/getEnvVariable';
 import { isDevelopmentFromSecretKey } from '@clerk/shared/keys';
 import { isHttpOrHttps, isProxyUrlRelative } from '@clerk/shared/proxy';
 import { handleValueOrFn } from '@clerk/shared/utils';
+import type { LoaderFunctionArgs } from 'react-router';
 
 import { getPublicEnvVariables } from '../utils/env';
 import { noSecretKeyError, satelliteAndMissingProxyUrlAndDomain, satelliteAndMissingSignInUrl } from '../utils/errors';
-import type { LoaderFunctionArgs, RootAuthLoaderOptions } from './types';
+import type { RootAuthLoaderOptions } from './types';
 import { patchRequest } from './utils';
 
 export const loadOptions = (args: LoaderFunctionArgs, overrides: RootAuthLoaderOptions = {}) => {

packages/react-router/src/ssr/rootAuthLoader.ts

@@ -1,9 +1,10 @@
 import { decorateObjectWithResources } from '@clerk/backend/internal';
+import type { LoaderFunctionArgs } from 'react-router';
 
 import { invalidRootLoaderCallbackReturn } from '../utils/errors';
 import { authenticateRequest } from './authenticateRequest';
 import { loadOptions } from './loadOptions';
-import type { LoaderFunctionArgs, LoaderFunctionReturn, RootAuthLoaderCallback, RootAuthLoaderOptions } from './types';
+import type { LoaderFunctionReturn, RootAuthLoaderCallback, RootAuthLoaderOptions } from './types';
 import {
   assertValidHandlerResult,
   injectRequestStateIntoResponse,

packages/react-router/src/ssr/types.ts

@@ -8,35 +8,7 @@ import type {
   SignUpFallbackRedirectUrl,
   SignUpForceRedirectUrl,
 } from '@clerk/types';
-import type { LoaderFunction, UNSAFE_DataWithResponseInit } from 'react-router';
-import type { CreateServerLoaderArgs } from 'react-router/route-module';
-
-type Func = (...args: any[]) => unknown;
-
-type RouteModule = {
-  meta?: Func;
-  links?: Func;
-  headers?: Func;
-  loader?: Func;
-  clientLoader?: Func;
-  action?: Func;
-  clientAction?: Func;
-  HydrateFallback?: unknown;
-  default?: unknown;
-  ErrorBoundary?: unknown;
-  [key: string]: unknown;
-};
-
-export type RouteInfo = {
-  parents: RouteInfo[];
-  module: RouteModule;
-  id: unknown;
-  file: string;
-  path: string;
-  params: unknown;
-  loaderData: unknown;
-  actionData: unknown;
-};
+import type { LoaderFunction, LoaderFunctionArgs, UNSAFE_DataWithResponseInit } from 'react-router';
 
 export type GetAuthReturn = Promise<SignedInAuthObject | SignedOutAuthObject>;
 
@@ -101,8 +73,6 @@ type RootAuthLoaderCallbackReturn =
   | UNSAFE_DataWithResponseInit<unknown>
   | Promise<UNSAFE_DataWithResponseInit<unknown>>;
 
-// TODO: Figure out how to use the Route.LoaderArgs from userland code
-export type LoaderFunctionArgs = CreateServerLoaderArgs<RouteInfo>;
 export type LoaderFunctionReturn = ReturnType<LoaderFunction>;
 
 export type LoaderFunctionArgsWithAuth<Options extends RootAuthLoaderOptions = any> = LoaderFunctionArgs & {