Skip to main content
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.

Usage

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

You can also pass configuration optionsReact Router Icon to rootAuthLoader() no matter which method you use.

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.

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

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.

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 }) => {
    const { sessionId, userId, getToken } = request.auth
    // Add logic to fetch data
    return { yourData: 'here' }
  })
}

Pass configuration options

To pass configuration optionsReact Router Icon to rootAuthLoader(), you can pass an optional argument to the rootAuthLoader() function.

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 }) => {
      const { sessionId, userId, getToken } = request.auth
      // Add logic to fetch data
      return { yourData: 'here' }
    },
    { signInUrl: '/sign-in' }, // Options
  )
}

rootAuthLoader() options

The rootAuthLoader() function accepts an optional object. The following options are available:

  • Name
    audience?
    Type
    string | string[]
    Description

    A string or list of audiences. If passed, it is checked against the aud claim in the token.

  • 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
    domain?
    Type
    string
    Description

    The domain used for satellites to inform Clerk where this application is deployed.

  • Name
    isSatellite?
    Type
    boolean
    Description

    When using Clerk's satellite feature, this should be set to true for secondary domains.

  • Name
    jwtKey
    Type
    string
    Description

    Used to verify the session token in a networkless manner. Supply the JWKS Public Key from the API keys page in the Clerk Dashboard. It's recommended to use the environment variable instead. For more information, refer to Manual JWT verification.

  • Name
    proxyUrl?
    Type
    string
    Description

    Specify the URL of the proxy, if using a proxy.

  • Name
    publishableKey
    Type
    string
    Description

    The Clerk Publishable Key for your instance. This can be found in the API keys page -> Show Publishable Key section in the Clerk Dashboard. It's recommended to use the environment variable instead.

  • Name
    secretKey?
    Type
    string
    Description

    The Clerk Secret Key for your instance. This can be found on the API keys page in the Clerk Dashboard. It's recommended to use the environment variable instead.

  • Name
    signInUrl
    Type
    string
    Description

    This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances. It is required to be set for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    signUpUrl
    Type
    string
    Description

    This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances but must be set for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    signInFallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    signUpFallbackRedirectUrl?
    Type
    string
    Description

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

  • Name
    signInForceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

  • Name
    signUpForceRedirectUrl?
    Type
    string
    Description

    If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on