Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

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

Props

<ClerkApp> supports all of the same properties as <ClerkProvider> with the exception of the navigate property:

NameTypeDescription
publishableKeystringClerk publishable key for your instance. This can be found in your Clerk Dashboard.
frontendApistringThe frontend API host for your instance. This can be found in your Clerk Dashboard.
clerkJSVariant?stringIf your web application uses only Control components you can set this value to headless and load a minimal ClerkJS bundle for optimal page performance.
supportEmail?stringOptional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
localization?objectOptional object to localize your Components. Will only affect Clerk Components and not Account Portal pages.
allowedRedirectOrigins?Array<string | RegExp>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.

What did you think of this content?

Clerk © 2023