React Router SDK Beta
- Category
- SDK
- Published
Add authentication and authorization to your React Router application in minutes with this new Clerk SDK.
We're excited to announce the beta release of @clerk/react-router, a new official SDK that allows developers to add authentication and authorization into their React Router application in a matter of minutes.
The SDK comes fully equipped with Clerk's UI components, server utilities, and low level utilities for any of your custom flows. You can use React Router both as a framework or library with Clerk.
If you want to dive right into it, head over to our React Router quickstart.
Use Clerk UI components
Clerk's pre-built UI components give you a beautiful, fully-functional user and organization management experience in minutes.
Here's an example on how simple it is to build a sign-in page using Clerk's <SignIn /> component inside your React Router applications.
import { SignIn } from '@clerk/react-router'
export default function SignInPage() {
return <SignIn />
}Server functions
You can also pair our getAuth() utility function with React Routers's server data loading to protect your routes.
import { redirect } from 'react-router'
import { getAuth } from '@clerk/react-router/ssr.server'
import { createClerkClient } from '@clerk/react-router/api.server'
import type { Route } from './+types/profile'
export async function loader(args: Route.LoaderArgs) {
const { userId } = await getAuth(args)
if (!userId) {
return redirect('/sign-in?redirect_url=' + args.request.url)
}
const user = await createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY }).users.getUser(
userId,
)
return {
user: JSON.stringify(user),
}
}
export default function Profile({ loaderData }: Route.ComponentProps) {
return <p>Hello! Your user id is {loaderData.user.id}</p>
}You can learn more about @clerk/react-router in the React Router reference documentation.
