rootAuthLoader()

The rootAuthLoader() function configures Clerk to handle authentication state for React Router routes, allowing easy access to user session information in your app.

Usage

You can use the rootAuthLoader() in two different ways:

• Without a callback, which will just return the auth state
• With a callback function to handle custom data loading while having access to auth state

Without a callback

In your root.tsx file, add rootAuthLoader() to the loader() function. If your app doesn't have a loader() function yet, you'll need to add it manually.

import { rootAuthLoader } from '@clerk/react-router/server'
import type { Route } from './+types/root'

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args)
}

With a callback

If you need to load in additional data, you can pass a callback to rootAuthLoader() that handles the route data loading with auth state.

import { rootAuthLoader } from '@clerk/react-router/server'
import type { Route } from './+types/root'

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args, ({ request, context, params }) => {
    const { sessionId, userId, getToken } = request.auth
    // Add logic to fetch data
    return { yourData: 'here' }
  })
}