Skip to main content
Docs

<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

    Optional object to style your components. Will only affect [Clerk components][components-ref] and not [Account Portal][ap-ref] pages.

  • Name
    localization
    Type
    Localization | undefined
    Description

    Optional object to localize your components. Will only affect [Clerk components][components-ref] and not [Account Portal][ap-ref] 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][client-ref]) => Session | null) | undefined
    Description

    An optional 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

    Optional 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_url in 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_url in 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 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
    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.

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?
GitHubEdit on GitHub

Last updated on