Skip to main content

<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 quickstartJavaScript Icon 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
    afterMultiSessionSingleSignOutUrl?
    Type
    string | null
    Description

    The full URL or path to navigate to after signing out the current user is complete. This option applies to multi-session applications.

  • Name
    afterSignOutUrl?
    Type
    string | null
    Description

    The full URL or path to navigate to after successful sign out.

  • Name
    allowedRedirectOrigins?
    Type
    (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
    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
    appearance?
    Type
    any
    Description

    An object to style your components. Will only affect Clerk Components and not Account Portal pages. See the Appearance docs for more information.

  • Name
    experimental?
    Type
    Autocomplete<{ commerce: boolean; persistClient: boolean; rethrowOfflineNetworkErrors: boolean; runtimeEnvironment: "headless"; }, Record<string, any>>
    Description

    Enable experimental flags to gain access to new features. These flags are not guaranteed to be stable and may change drastically in between patch or minor versions.

  • Name
    isSatellite?
    Type
    boolean | (url: URL) => boolean
    Description

    Indicates whether the application is a satellite application.

  • Name
    localization?
    Type
    LocalizationResource
    Description

    An object to localize your components. Will only affect Clerk Components and not Account Portal pages.

  • Name
    newSubscriptionRedirectUrl?
    Type
    string | null
    Description

    The full URL or path to navigate to after the user completes the checkout and clicks the "Continue" button.

  • Name
    polling?
    Type
    boolean
    Description

    Indicates whether Clerk should poll against Clerk's backend every 5 minutes. Defaults to true.

  • Name
    routerDebug?
    Type
    boolean
    Description

    If true, the router will log debug information to the console.

  • Name
    routerPush()
    Type
    (to: string, metadata?: { windowNavigate: (to: URL | string) => void; }) => unknown
    Description

    A function which takes the destination path as an argument and performs a "push" navigation.

  • Name
    routerReplace()
    Type
    (to: string, metadata?: { windowNavigate: (to: URL | string) => void; }) => unknown
    Description

    A function which takes the destination path as an argument and performs a "replace" navigation.

  • Name
    satelliteAutoSync?
    Type
    boolean
    Description

    Controls whether satellite apps automatically sync with the primary domain on initial page load. When false (default), satellite apps will skip the automatic handshake if no session cookies exist, and only trigger the handshake after an explicit sign-in action. This provides the best performance by showing the satellite app immediately without attempting to sync state first. When true, satellite apps will automatically trigger a handshake redirect to sync authentication state with the primary domain on first load, even if no session cookies exist. Use this if you want users who are already signed in on the primary domain to be automatically recognized on the satellite. Defaults to false.

  • Name
    sdkMetadata?
    Type
    { environment?: string; name: string; version: 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
    sdkMetadata.environment?
    Type
    string
    Description

    Typically this will be the NODE_ENV that the SDK is currently running in.

  • Name
    sdkMetadata.name
    Type
    string
    Description

    The npm package name of the SDK.

  • Name
    sdkMetadata.version
    Type
    string
    Description

    The npm package version of the SDK.

  • Name
    selectInitialSession()?
    Type
    (client: ClientResource) => SignedInSessionResource | null
    Description

    By default, the last signed-in 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 | null
    Description

    The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. It's recommended to use the environment variable instead. Defaults to '/'.

  • Name
    signInForceRedirectUrl?
    Type
    string | null
    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
    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
    signUpFallbackRedirectUrl?
    Type
    string | null
    Description

    The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. It's recommended to use the environment variable instead. Defaults to '/'.

  • Name
    signUpForceRedirectUrl?
    Type
    string | null
    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
    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. It is required to be set for a satellite application in a development instance. It's recommended to use the environment variable instead.

  • Name
    standardBrowser?
    Type
    boolean
    Description

    Indicates whether 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

    The support email address for display in authentication screens. Will only affect Clerk Components and not Account Portal pages.

  • Name
    taskUrls?
    Type
    Partial<Record<SessionTask["key"], string>>
    Description

    Customize the URL paths users are redirected to after sign-in or sign-up when specific session tasks need to be completed. When undefined, it uses Clerk's default task flow URLs. Defaults to undefined.

  • Name
    telemetry?
    Type
    false | { debug?: boolean; disabled?: boolean; perEventSampling?: boolean; }
    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
    telemetry.debug?
    Type
    boolean
    Description

    If true, telemetry events are only logged to the console and not sent to Clerk

  • Name
    telemetry.disabled?
    Type
    boolean
    Description

    If true, telemetry will not be collected.

  • Name
    telemetry.perEventSampling?
    Type
    boolean
    Description

    If false, the sampling rates provided per telemetry event will be ignored and all events will be sent. Defaults to true.

  • Name
    touchSession?
    Type
    boolean
    Description

    By default, the Clerk Frontend API touch endpoint is called during page focus to keep the last active session alive. This option allows you to disable this behavior.

  • Name
    ui?
    Type
    { ClerkUI?: ClerkUIConstructor | Promise<ClerkUIConstructor>; }
    Description

    Only required if you're bundling Clerk's UI (@clerk/ui) instead of loading it from the Clerk CDN. Provide the UI module to embed Clerk's prebuilt authentication components directly in your application.

  • Name
    ui.ClerkUI?
    Type
    ClerkUIConstructor | Promise<ClerkUIConstructor>
    Description

    Pass the ui export from @clerk/ui.

  • Name
    waitlistUrl?
    Type
    string
    Description

    The full URL or path to the waitlist page. If undefined, will redirect to the Account Portal waitlist page.

load() usage

main.js
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

What did you think of this content?

Last updated on

GitHubEdit on GitHub