diff --git a/.changeset/every-glasses-shave.md b/.changeset/every-glasses-shave.md new file mode 100644 index 00000000000..d4afbe1bd78 --- /dev/null +++ b/.changeset/every-glasses-shave.md @@ -0,0 +1,5 @@ +--- +'@clerk/react-router': patch +--- + +In this release the TypeScript types for `rootAuthLoader()`, `getAuth()`, and `` 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. diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 59b194f52f8..051c2b8b956 100644 --- a/packages/react-router/package.json +++ b/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", diff --git a/packages/react-router/src/client/ReactRouterClerkProvider.tsx b/packages/react-router/src/client/ReactRouterClerkProvider.tsx index e80bb6a7eb9..93f628dd4e2 100644 --- a/packages/react-router/src/client/ReactRouterClerkProvider.tsx +++ b/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 >; -// 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) => { diff --git a/packages/react-router/src/client/types.ts b/packages/react-router/src/client/types.ts index 65020edbd71..ee26bf747a5 100644 --- a/packages/react-router/src/client/types.ts +++ b/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; export type ClerkState = { __type: 'clerkState'; diff --git a/packages/react-router/src/ssr/authenticateRequest.ts b/packages/react-router/src/ssr/authenticateRequest.ts index b0cce6c17df..e82f86ee247 100644 --- a/packages/react-router/src/ssr/authenticateRequest.ts +++ b/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( diff --git a/packages/react-router/src/ssr/getAuth.ts b/packages/react-router/src/ssr/getAuth.ts index f97532fcc5e..5113f2e1877 100644 --- a/packages/react-router/src/ssr/getAuth.ts +++ b/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; diff --git a/packages/react-router/src/ssr/loadOptions.ts b/packages/react-router/src/ssr/loadOptions.ts index a958a39d9c6..13b7c361ab0 100644 --- a/packages/react-router/src/ssr/loadOptions.ts +++ b/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 = {}) => { diff --git a/packages/react-router/src/ssr/rootAuthLoader.ts b/packages/react-router/src/ssr/rootAuthLoader.ts index 64a0c309533..688df50fbdf 100644 --- a/packages/react-router/src/ssr/rootAuthLoader.ts +++ b/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, diff --git a/packages/react-router/src/ssr/types.ts b/packages/react-router/src/ssr/types.ts index dc159b08d0e..f2d7fb20cfe 100644 --- a/packages/react-router/src/ssr/types.ts +++ b/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; @@ -101,8 +73,6 @@ type RootAuthLoaderCallbackReturn = | UNSAFE_DataWithResponseInit | Promise>; -// TODO: Figure out how to use the Route.LoaderArgs from userland code -export type LoaderFunctionArgs = CreateServerLoaderArgs; export type LoaderFunctionReturn = ReturnType; export type LoaderFunctionArgsWithAuth = LoaderFunctionArgs & { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4daf8941c48..8c34118a4e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -850,8 +850,8 @@ importers: specifier: ^2.1.4 version: 2.1.4 react-router: - specifier: 7.5.2 - version: 7.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 7.6.1 + version: 7.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) packages/remix: dependencies: @@ -2984,7 +2984,7 @@ packages: '@expo/bunyan@4.0.1': resolution: {integrity: sha512-+Lla7nYSiHZirgK+U/uYzsLv/X+HaJienbD5AKX1UQZHYfWaP+9uuQluRB4GrEVWF0GZ7vEVp/jzaOT9k/SQlg==} - engines: {node: '>=0.10.0'} + engines: {'0': node >=0.10.0} '@expo/cli@0.22.26': resolution: {integrity: sha512-I689wc8Fn/AX7aUGiwrh3HnssiORMJtR2fpksX+JIe8Cj/EDleblYMSwRPd0025wrwOV9UN1KM/RuEt/QjCS3Q==} @@ -11970,8 +11970,8 @@ packages: peerDependencies: react: '>=16.8' - react-router@7.5.2: - resolution: {integrity: sha512-9Rw8r199klMnlGZ8VAsV/I8WrIF6IyJ90JQUdboupx1cdkgYqwnrYjH+I/nY/7cA1X5zia4mDJqH36npP7sxGQ==} + react-router@7.6.1: + resolution: {integrity: sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==} engines: {node: '>=20.0.0'} peerDependencies: react: '>=18' @@ -13417,9 +13417,6 @@ packages: cpu: [arm64] os: [linux] - turbo-stream@2.4.0: - resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} - turbo-stream@2.4.1: resolution: {integrity: sha512-v8kOJXpG3WoTN/+at8vK7erSzo6nW6CIaeOvNOkHQVDajfz1ZVeSxCbc6tOH4hrGZW7VUCV0TOXd8CPzYnYkrw==} @@ -28550,12 +28547,11 @@ snapshots: '@remix-run/router': 1.23.0 react: 18.3.1 - react-router@7.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-router@7.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: cookie: 1.0.2 react: 18.3.1 set-cookie-parser: 2.6.0 - turbo-stream: 2.4.0 optionalDependencies: react-dom: 18.3.1(react@18.3.1) @@ -30240,8 +30236,6 @@ snapshots: turbo-linux-arm64@2.5.3: optional: true - turbo-stream@2.4.0: {} - turbo-stream@2.4.1: {} turbo-windows-64@2.5.3: