Clerk class

The Clerk class is the main entrypoint class for the @clerk/clerk-js package. It contains a number of methods and properties for interacting with the Clerk API.

Properties

Methods

addListener()

Registers a listener that triggers a callback whenever a change in the Client, Session, or User object occurs. This method is primarily used to build frontend SDKs like @clerk/clerk-react(opens in a new tab).

function addListener(listener: ((emission: Resources) => void)): UnsubscribeCallback;

Resources

addListener() returns

The addListener method returns an UnsubscribeCallback function that can be used to remove the listener from the Clerk object.

type UnsubscribeCallback = () => void;

authenticateWithMetamask()

function authenticateWithMetamask({
  redirectUrl,
  signUpContinueUrl,
  customNavigate,
}?: AuthenticateWithMetamaskParams): Promise<void>;

AuthenticateWithMetamaskParams

constructor()

Create an instance of the Clerk class with dedicated options.

This method is only available when importing Clerk from @clerk/clerk-js, rather than using a Window script.

class Clerk {
  constructor(key: string, options?: DomainOrProxyUrl);
}

constructor() properties

DomainOrProxyUrl

Only one of the two properties are allowed to be set at a time.

load()

Initializes the Clerk object and loads all necessary environment configuration and instance settings from the Frontend API(opens in a new tab).

You must call this method before using the Clerk object in your code. Refer to the ClerkJS installation guide for more details.

function load(options?: ClerkOptions): Promise<void>;

ClerkOptions

All props below are optional.

signOut()

• In a multi-session application: Signs out the active user from all sessions
• In a single-session context: Signs out the active user from the current session

The current client will be deleted. You can specify a specific session to sign out by passing the sessionId parameter.

function signOut(options?: SignOutOptions): Promise<void>;
// OR
function signOut(signOutCallback?: (() => void | Promise<any>), options?: SignOutOptions): Promise<void>;

SignOutOptions

Components

The Clerk class also contains a number of methods for interacting with Clerk's prebuilt components.

<SignIn />

= mountSignIn()

• unmountSignIn()
• openSignIn()
• closeSignIn()

<SignUp />

• mountSignUp()
• unmountSignUp()
• openSignUp()
• closeSignUp()

<UserButton />

• mountUserButton()
• unmountUserButton()

<UserProfile />

• mountUserProfile()
• unmountUserProfile()
• openUserProfile()
• closeUserProfile()

<OrganizationProfile />

• mountOrganizationProfile()
• unmountOrganizationProfile()
• openOrganizationProfile()
• closeOrganizationProfile()

<OrganizationSwitcher />

• mountOrganizationSwitcher()
• unmountOrganizationSwitcher()

<CreateOrganization />

• mountCreateOrganization
• unmountCreateOrganization
• openCreateOrganization
• closeCreateOrganization

<OrganizationList />

• mountOrganizationList
• unmountOrganizationList

Additional methods

In addition to the methods listed above, the Clerk class also has the following methods:

Organization

• getOrganization()
• createOrganization()
• getOrganizationMemberships() (deprecated)

Redirect

• navigate()
• redirectWithAuth()
• redirectToSignIn()
• redirectToSignUp()
• redirectToUserProfile()
• redirectToCreateOrganization()
• redirectToOrganizationProfile()
• redirectToHome() (deprecated)

Build URLs

• buildUrlWithAuth()
• buildSignInUrl()
• buildSignUpUrl()
• buildUserProfileUrl()
• buildHomeUrl()
• buildCreateOrganizationUrl()
• buildOrganizationProfileUrl()

Handle navigation

• handleMagicLinkVerification()
• handleRedirectCallback()
• handleUnauthenticated()

Session

• setSession() (deprecated)
• setActive()

Last updated on March 12, 2024