diff --git a/.changeset/fifty-carrots-crash.md b/.changeset/fifty-carrots-crash.md new file mode 100644 index 00000000000..661720e47b7 --- /dev/null +++ b/.changeset/fifty-carrots-crash.md @@ -0,0 +1,5 @@ +--- +'@clerk/react-router': patch +--- + +Set correct minimum `react-router` version in README diff --git a/integration/templates/react-router-node/app/root.tsx b/integration/templates/react-router-node/app/root.tsx index e24f3b1a918..614a03814fe 100644 --- a/integration/templates/react-router-node/app/root.tsx +++ b/integration/templates/react-router-node/app/root.tsx @@ -1,14 +1,11 @@ import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router'; -import { rootAuthLoader } from '@clerk/react-router/ssr.server'; +import { clerkMiddleware, rootAuthLoader } from '@clerk/react-router/server'; import { ClerkProvider } from '@clerk/react-router'; import type { Route } from './+types/root'; -// TODO: Uncomment when published -// export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]; +export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]; -export async function loader(args: Route.LoaderArgs) { - return rootAuthLoader(args); -} +export const loader = (args: Route.LoaderArgs) => rootAuthLoader(args); export function Layout({ children }: { children: React.ReactNode }) { return ( diff --git a/integration/templates/react-router-node/app/routes/protected.tsx b/integration/templates/react-router-node/app/routes/protected.tsx index 362fcac4fa4..605bd117e55 100644 --- a/integration/templates/react-router-node/app/routes/protected.tsx +++ b/integration/templates/react-router-node/app/routes/protected.tsx @@ -1,7 +1,6 @@ import { redirect } from 'react-router'; import { UserProfile } from '@clerk/react-router'; -import { getAuth } from '@clerk/react-router/ssr.server'; -import { createClerkClient } from '@clerk/react-router/api.server'; +import { clerkClient, getAuth } from '@clerk/react-router/server'; import type { Route } from './+types/profile'; export async function loader(args: Route.LoaderArgs) { @@ -11,7 +10,7 @@ export async function loader(args: Route.LoaderArgs) { return redirect('/sign-in'); } - const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(userId); + const user = await clerkClient(args).users.getUser(userId); return { firstName: user.firstName, diff --git a/packages/react-router/README.md b/packages/react-router/README.md index c97285dd49f..3639f929dba 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -31,7 +31,7 @@ ### Prerequisites -- React Router `^7.1.2` or later +- React Router `^7.9.0` or later - React 18 or later - Node.js `>=20.0.0` or later - An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_react-router).