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 in your Clerk Dashboard on the API Keys page.

  • 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

    Optional array of domains used to validate against the query param of an auth redirect. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning passed to the console.

Feedback

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

Last updated on