Docs

ClerkApp

Clerk provides a ClerkApp wrapper to provide the authentication state to your React tree. This helper works with Remix SSR out-of-the-box and follows the "higher-order component" paradigm.

Usage

import { ClerkApp } from '@clerk/remix'
import type { MetaFunction, LoaderFunction } from '@remix-run/node'

import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

import { rootAuthLoader } from '@clerk/remix/ssr.server'

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'New Remix App',
  viewport: 'width=device-width,initial-scale=1',
})

export const loader: LoaderFunction = (args) => rootAuthLoader(args)

function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}

// Wrap your app in ClerkApp(app)
export default ClerkApp(App)

Properties

<ClerkApp> supports all of the same properties as <ClerkProvider> with the exception of the routerPush and routerReplace properties:

  • Name
    publishableKey
    Type
    string
    Description

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

  • Name
    clerkJSVariant?
    Type
    string
    Description

    If your web application uses only Control components you can set this value to headless and load a minimal ClerkJS bundle for optimal page performance.

  • Name
    supportEmail?
    Type
    string
    Description

    Optional support email for display in authentication screens. Will only affect Clerk components and not Account Portal pages.

  • Name
    localization
    Type
    Localization | undefined
    Description

    Optional object to localize your components. Will only affect Clerk components and not Account Portal pages.

  • Name
    allowedRedirectOrigins?
    Type
    Array<string | RegExp>
    Description

    An optional array of domains to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console.

  • Name
    allowedRedirectProtocols?
    Type
    Array<string>
    Description

    An optional array of protocols to validate user-provided redirect URLs against. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning logged in the console.

Feedback

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

Last updated on