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
headlessand 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.