`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 navigate property:

Name	Type	Description
`publishableKey`	`string`	Clerk publishable key for your instance. This can be found in your Clerk Dashboard on the API Keys(opens in a new tab) page.
`frontendApi`	`string`	The frontend API host for your instance. This can be found in your Clerk Dashboard on the API Keys(opens in a new tab) page under the Advanced section.
`clerkJSVariant?`	`string`	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.
`supportEmail?`	`string`	Optional support email for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.
`localization`	`Localization \| undefined`	Optional 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.