# 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](https://clerk.com/docs/reference/react-router/root-auth-loader.md#without-a-callback), which will just return the auth state
- [With a callback function](https://clerk.com/docs/reference/react-router/root-auth-loader.md#with-a-callback) 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.

filename: app/root.tsx
```tsx
import { clerkMiddleware, rootAuthLoader } from '@clerk/react-router/server'
import type { Route } from './+types/root'

export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]

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.

filename: app/root.tsx
```tsx
import { clerkMiddleware, rootAuthLoader } from '@clerk/react-router/server'
import type { Route } from './+types/root'

export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()]

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' }
  })
}
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)