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
// The rest of your code
function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
)
}
// Wrap your app with `ClerkApp`
export default ClerkApp(App)Pass configuration options
To pass configuration options to ClerkApp, you can pass an optional argument to the ClerkApp function.
// Wrap your app in ClerkApp(app)
export default ClerkApp(App, {
publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
})- Name
afterMultiSessionSingleSignOutUrl- Type
string- Description
The full URL or path to navigate to after a signing out from a currently active account in a multi-session app.
- Name
afterSignOutUrl- Type
string- Description
The full URL or path to navigate to after a successful sign-out.
- 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.
- Name
appearance- Type
Appearance | undefined- Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
clerkJSUrl- Type
string- Description
Define the URL that
@clerk/clerk-jsshould be hot-loaded from.
- Name
clerkJSVariant- Type
'headless' | ''- Description
If your web application only uses control components, you can set this value to
headlessand load a minimal ClerkJS bundle for optimal page performance.
- Name
clerkJSVersion- Type
string- Description
Define the npm version for
@clerk/clerk-js.
- Name
domain- Type
string | ((url: URL) => boolean)- Description
Required if your application is a satellite application. Sets the domain of the satellite application.
- Name
dynamic- Type
boolean- Description
(For Next.js only) Indicates whether or not Clerk should make dynamic auth data available based on the current request. Defaults to
false. Opts the application into dynamic rendering whentrue. For more information, see Next.js rendering modes and Clerk.
- Name
initialState- Type
InitialState- Description
Provide an initial state of the Clerk client during server-side rendering. You don't need to set this value yourself unless you're developing an SDK.
- Name
isSatellite- Type
boolean | ((url: URL) => boolean)- Description
Whether the application is a satellite application.
- Name
localization- Type
Localization | undefined- Description
Optional object to localize your components. Will only affect Clerk components and not Account Portal pages.
- Name
nonce- Type
string- Description
This nonce value will be passed to the
@clerk/clerk-jsscript tag. Use it to implement a strict-dynamic CSP. Requires thedynamicprop to also be set.
- Name
publishableKey- Type
string- Description
The Clerk Publishable Key for your instance. This can be found on the API keys page in the Clerk Dashboard.
- Name
proxyUrl- Type
string | ((url: URL) => string)- Description
The URL that Clerk will proxy requests to. Required for applications that run behind a reverse proxy. Can be either a relative path (
/__clerk) or a full URL (https://<your-domain>/__clerk).
- Name
routerPush- Type
(to: string) => Promise<unknown> | void- Description
A function which takes the destination path as an argument and performs a "push" navigation.
- Name
routerReplace- Type
(to: string) => Promise<unknown> | void- Description
A function which takes the destination path as an argument and performs a "replace" navigation.
- Name
sdkMetadata- Type
{ name: string; version: string; environment: string }- Description
Contains information about the SDK that the host application is using. You don't need to set this value yourself unless you're developing an SDK.
- Name
selectInitialSession- Type
(client: ClientResource) => ActiveSessionResource | null- Description
By default, the last active session is used during client initialization. This option allows you to override that behavior, e.g. by selecting a specific session.
- Name
signInFallbackRedirectUrl- Type
string- Description
The fallback URL to redirect to after the user signs in, if there's no
redirect_urlin the path already. Defaults to/. It's recommended to use the environment variable instead.
- Name
signUpFallbackRedirectUrl- Type
string- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_urlin the path already. Defaults to/. It's recommended to use the environment variable instead.
- Name
signInForceRedirectUrl- Type
string- Description
If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
- Name
signUpForceRedirectUrl- Type
string- Description
If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
- Name
signInUrl- Type
string- Description
This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances. It is required to be set for a satellite application in a development instance. It's recommended to use the environment variable instead.
- Name
signUpUrl- Type
string- Description
This URL will be used for any redirects that might happen and needs to point to your primary application on the client-side. This option is optional for production instances but must be set for a satellite application in a development instance. It's recommended to use the environment variable instead.
- Name
standardBrowser- Type
boolean- Description
By default, ClerkJS is loaded with the assumption that cookies can be set (browser setup). On native platforms this value must be set to
false.
- Name
supportEmail- Type
string- Description
Optional support email for display in authentication screens. Will only affect Clerk components and not Account Portal pages.
- Name
syncHost- Type
string- Description
Chrome Extension only To enable, pass the URL of the web application that the extension will sync the authentication state from. See the dedicated guide for more information.
- Name
telemetry- Type
false | { disabled: boolean; debug: boolean } | undefined- Description
Controls whether or not Clerk will collect telemetry data. If set to
debug, telemetry events are only logged to the console and not sent to Clerk.
- Name
touchSession- Type
boolean- Description
By default, the Clerk Frontend API
touchendpoint is called during page focus to keep the last active session alive. This option allows you to disable this behavior.
- Name
waitlistUrl- Type
string- Description
The full URL or path to the waitlist page. If
undefined, will redirect to the Account Portal waitlist page.
Feedback
Last updated on