<ClerkLoaded>
The <ClerkLoaded> component guarantees that the Clerk object has loaded (the status is 'ready' or 'degraded') and will be available under window.Clerk. This allows you to wrap child components to access the Clerk object without the need to check it exists.
Usage with JavaScript
The following methods available on an instance of the Clerk class is used to render and control the <ClerkLoaded /> component:
The following examples assume that you have followed the quickstart in order to add Clerk to your JavaScript application.
load()
Render the <ClerkLoaded> component to an HTML <div> element.
function load(options?: ClerkOptions): Promise<void>ClerkOptions
The load() method accepts an optional object that accepts the following props. All props are optional.
- Name
appearance?- Type
Appearance | undefined- Description
An object to style your components. Will only affect Clerk components and not Account Portal pages.
- Name
localization?- Type
Localization | undefined- Description
An object to localize your components. Will only affect Clerk components and not Account Portal pages.
- 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
polling?- Type
boolean | undefined- Description
Dictates if we should poll against Clerk's backend every 5 minutes. Defaults to
true.
- Name
selectInitialSession?- Type
((client: Client) => Session | null) | undefined- Description
A function which allows you to control which active session is the initial session to base a user's state off of. Defaults to the first session in the client's sessions array.
- Name
standardBrowser?- Type
boolean | undefined- Description
Controls if ClerkJS will load with the standard browser set up using Clerk cookies. Defaults to
true.
- Name
supportEmail?- Type
string | undefined- Description
Support email for display in authentication screens.
- Name
touchSession?- Type
boolean | undefined- Description
Indicates whether the session should be "touched" when user interactions occur, used to record these interactions. Defaults to
true.
- Name
signInUrl?- Type
string | undefined- Description
The default URL to use to direct to when the user signs in. It's recommended to use the environment variable instead.
- Name
signUpUrl?- Type
string | undefined- Description
The default URL to use to direct to when the user signs up. 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
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
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 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 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
isSatellite?- Type
boolean | ((url: URL) => boolean) | undefined- Description
Clerk flag for satellite apps. Experimental.
- Name
telemetry?- Type
false | { disabled?: boolean; debug?: boolean } | undefined- Description
Controls whether or not Clerk will collect telemetry data.
import { Clerk } from '@clerk/clerk-js'
// Initialize Clerk with your Clerk Publishable Key
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()Feedback
Last updated on