Dec 12

React Router SDK Beta

Category: SDK
Published: Dec 12

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.

app/routes/sign-in.tsx

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.

app/routes/profile.tsx

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.