Skip to main content
Docs

clerkMiddleware() | React Router

The clerkMiddleware() helper integrates Clerk authentication into your React Router application through middleware.

Configure clerkMiddleware()

  1. React Router middleware requires opting in via a future flag. Add the following to your react-router.config.ts file:

    react-router.config.ts
    import type { Config } from '@react-router/dev/config'

export default {
  // ...

  future: {
    v8_middleware: true,
  },
} satisfies Config

  2. Export clerkMiddleware() from your root route file:

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

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

clerkMiddleware() options

The clerkMiddleware() 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
    clockSkewInMs?
    Type
    number
    Description

    Specifies the allowed time difference (in milliseconds) between the Clerk server (which generates the token) and the clock of the user's application server when validating a token. Defaults to 5000 ms (5 seconds).

  • 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
    organizationSyncOptions?
    Type
    OrganizationSyncOptions | undefined
    Description

    Used to activate a specific organization or personal account based on URL path parameters. If there's a mismatch between the in the session (e.g., as reported by ) and the organization indicated by the URL, the middleware will attempt to activate the organization specified in the URL.

  • Name
    proxyUrl?
    Type
    string
    Description

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

  • Name
    signInUrl
    Type
    string
    Description

    The full URL or path to your sign-in page. Needs to point to your primary application on the client-side. Required for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    signUpUrl
    Type
    string
    Description

    The full URL or path to your sign-up page. Needs to point to your primary application on the client-side. Required for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    publishableKey
    Type
    string
    Description

    The Clerk Publishable Key for your instance. This can be found on the API keys page in the Clerk Dashboard.

  • 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. The CLERK_ENCRYPTION_KEY environment variable must be set when providing secretKey as an option, refer to Dynamic keys.

OrganizationSyncOptions

The organizationSyncOptions property on the clerkMiddleware() options object has the type OrganizationSyncOptions, which has the following properties:

  • Name
    organizationPatterns
    Type
    Pattern[]
    Description

    Specifies URL patterns that are organization-specific, containing an organization ID or slug as a path parameter. If a request matches this path, the organization identifier will be used to set that org as active.

    If the route also matches the personalAccountPatterns prop, this prop takes precedence.

    Patterns must have a path parameter named either :id (to match a Clerk organization ID) or :slug (to match a Clerk organization slug).

    Warning

    If the organization can't be activated—either because it doesn't exist or the user lacks access—the previously will remain unchanged. Components must detect this case and provide an appropriate error and/or resolution pathway, such as calling notFound() or displaying an <OrganizationSwitcher />.

    Common examples:

    • ["/orgs/:slug", "/orgs/:slug/(.*)"]
    • ["/orgs/:id", "/orgs/:id/(.*)"]
    • ["/app/:any/orgs/:slug", "/app/:any/orgs/:slug/(.*)"]
  • Name
    personalAccountPatterns
    Type
    Pattern[]
    Description

    URL patterns for resources that exist within the context of a user's personal account.

    If the route also matches the organizationPattern prop, the organizationPattern prop takes precedence.

    Common examples:

    • ["/me", "/me/(.*)"]
    • ["/user/:any", "/user/:any/(.*)"]

Pattern

A Pattern is a string that represents the structure of a URL path. In addition to any valid URL, it may include:

  • Named path parameters prefixed with a colon (e.g., :id, :slug, :any).
  • Wildcard token, (.*), which matches the remainder of the path.

Examples

  • /orgs/:slug
URLMatches:slug value
/orgs/acmecorp✅acmecorp
/orgs❌n/a
/orgs/acmecorp/settings❌n/a
  • /app/:any/orgs/:id
URLMatches:id value
/app/petstore/orgs/org_123✅org_123
/app/dogstore/v2/orgs/org_123❌n/a
  • /personal-account/(.*)
URLMatches
/personal-account/settings✅
/personal-account❌

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on