Docs

rootAuthLoader()

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

Configure rootAuthLoader()

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.

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

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

You can also pass options to the rootAuthLoader() as the second argument.

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

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(args, { signInUrl: '/sign-in' })
}

Loading additional data

If you need to load additional data, you can pass your loader directly to rootAuthLoader() as the second argument. The options object is passed as the third argument.

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

export async function loader(args: Route.LoaderArgs) {
  return rootAuthLoader(
    args,
    ({ request, context, params }) => {
      // Loader
      const { userId } = request.auth

      return { userId }
    },
    { signInUrl: '/sign-in' }, // Options
  )
}

rootAuthLoader() options

  • Name
    secretKey?
    Type
    string
    Description

    The Clerk Secret Key from the API keys page in the Clerk Dashboard.

  • Name
    jwtKey?
    Type
    string
    Description

    The PEM public key from the API keys page -> Show JWT public key -> PEM Public Key section in the Clerk Dashboard. For more information, refer to Manual JWT verification.

  • Name
    publishableKey?
    Type
    string
    Description

    The Clerk Publishable Key from the API keys page in the Clerk Dashboard.

  • Name
    domain?
    Type
    string
    Description

    The domain of a satellite application in a multi-domain setup.

  • Name
    isSatellite?
    Type
    boolean
    Description

    Whether the instance is a satellite domain in a multi-domain setup. Defaults to false.

  • Name
    proxyUrl?
    Type
    string
    Description

    The proxy URL from a multi-domain setup.

  • Name
    sdkMetadata?
    Type
    { name: string, version: string }
    Description

    Metadata about the SDK.

  • Name
    telemetry?
    Type
    { disabled: boolean, debug: boolean }
    Description

    Telemetry configuration.

  • Name
    userAgent?
    Type
    string
    Description

    The User-Agent request header passed to the Clerk API.

  • Name
    apiUrl?
    Type
    string
    Description

    The Clerk Backend API endpoint. Defaults to 'https://api.clerk.com'.

  • Name
    apiVersion?
    Type
    string
    Description

    The version passed to the Clerk API. Defaults to 'v1'.

  • Name
    audience?
    Type
    string | string[]
    Description

    A string or list of audiences.

  • Name
    authorizedParties?
    Type
    string[]
    Description

    An allowlist of origins to verify against, to protect your application from the subdomain cookie leaking attack.
    For example: ['http://localhost:3000', 'https://example.com']

  • Name
    signInUrl?
    Type
    string
    Description

    The full URL or path to the sign in page. Use this property to provide the target of the 'Sign in' link that's rendered. It's recommended to use the environment variable instead.

  • Name
    signUpUrl?
    Type
    string
    Description

    The full URL or path to the sign up page. Use this property to provide the target of the 'Sign up' link that's rendered. It's recommended to use the environment variable instead.

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on