Clerk
This 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
| Name | Type | Description |
|---|---|---|
version | string | A getter for the Clerk SDK version |
loaded | boolean | A getter to see if the Clerk object is ready for use or not |
isSatellite | boolean | Clerk Flag for satellite apps. |
domain | string | A getter for the current Clerk app's domain. Prefixed with clerk. on production if not already prefixedReturns "" when ran on the server |
proxyUrl | string | A getter for your Clerk app's proxy URL. Required for applications that run behind a reverse proxy. Can be either a relative path ( /__clerk) or a full URL (https://<your-domain>/__clerk). |
instanceType | 'production' | 'development' | A getter to see the if a Clerk instance is running in production or development mode |
client | Client | The Client object for the current window. |
session | Session | null | undefined | The currently active Session, which is guaranteed to be one of the sessions in Client.sessions. If there is no active session, this field will be null. If the session is loading, this field will be undefined. |
user | User | null | undefined | A shortcut to Session.user which holds the currently active User object. If the session is null or undefined, the user field will match. |
organization | Organization | null | undefined | A shortcut to the last active Session.user.organizationMemberships which holds an instance of a Organization object. If the session is null or undefined, the user field will match. |
publishableKey | string | undefined | Clerk Publishable Key string. |
Methods
constructor()
class Clerk { constructor(key: string, options?: DomainOrProxyUrl); }
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.
Props
| Name | Type | Description |
|---|---|---|
key | string | The publishable key from your Clerk Dashboard, used to connect to Clerk |
options | DomainOrProxyUrl | undefined | The domain or proxy URL used to connect to Clerk |
DomainOrProxyUrl
Only one of the two properties are allowed to be set at a time.
| Name | Type | Description |
|---|---|---|
proxyUrl | never | string | ((url: URL) => string) | The proxyUrl used to connect to Clerk. If a function, will be called with a URL made from window.location.href |
domain | never | string | ((url: URL) => string) | The domain used to connect to Clerk. If a function, will be called with a URL made from window.location.href |
isReady()
function isReady(): boolean;
Returns true when the ClerkJS library has fully loaded and the Clerk object is ready for use. Returns false otherwise.
Returns
| Type | Description |
|---|---|
boolean | This method will return true when the Clerk object is ready, false otherwise. |
load()
function load(options?: ClerkOptions): Promise<void>;
Initializes the Clerk object and loads all necessary environment configuration and Instance settings from the Frontend API.
It is absolutely necessary to call this method before using the Clerk object in your code. Refer to the ClerkJS installation guide for more details.
ClerkOptions
| Name | Type | Description |
|---|---|---|
appearance | Appearance | undefined | Optional object to style your Components. Will only affect Clerk Components and not Account Portal pages. |
localization | Localization | undefined | Optional object to localize your Components. Will only affect Clerk Components and not Account Portal pages. |
navigate | ((to: string) => Promise<unknown> | unknown) | undefined | A function which takes the destination path as an argument and performs a "push" navigation. |
polling | boolean | undefined | Dictates if we should poll against Clerk's backend every 5 minutes. Defaults to true |
selectInitialSession | ((client: Client) => Session | null) | undefined | 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. |
standardBrowser | boolean | undefined | Controls if ClerkJS will load with the standard browser set up using Clerk cookies. Defaults to true |
supportEmail | string | undefined | Optional support email for display in authentication screens |
touchSession | boolean | undefined | Indicates whether the session should be "touched" when user interactions occur, used to record these interactions. Defaults to true |
signInUrl | string | undefined | The default URL to use to direct to when the user signs in. |
signUpUrl | string | undefined | The default URL to use to direct to when the user signs up. |
afterSignInUrl | string | undefined | The default URL to use after the user signs in. |
afterSignUpUrl | string | undefined | The default URL to use after the user signs up. |
allowedRedirectOrigins | Array<string | RegExp> | undefined | Optional array of domains used to validate against the query param of an auth redirect. If no match is made, the redirect is considered unsafe and the default redirect will be used with a warning passed to the console. |
isInterstitial | boolean | undefined | Indicates that clerk.js is will be loaded from interstitial. Defaults to false |
isSatellite | boolean | ((url: URL) => boolean) | undefined | Clerk Flag for satellite apps. Experimental. |
signOut()
function signOut(options?: SignOutOptions): Promise<void>; // OR function signOut(signOutCallback?: (() => void | Promise<any>), options?: SignOutOptions): Promise<void>;
Signs out the active user from all sessions in a multi-session application, or simply the current session in a single-session context. The current client will be deleted.
SignOutOptions
| Name | Type | Description |
|---|---|---|
sessionId | string | undefined | Specify a specific session to sign out. Useful for multi-session applications. |
addListener()
function addListener(listener: ((emission: Resources) => void)): UnsubscribeCallback;
Registers a listener that triggers a callback whenever a change in the Client, Session, or User object occurs. This method is primary used to build frontend SDKs like @clerk/clerk-react.
Resources
| Name | Type |
|---|---|
client | Client |
session | Session | undefined | null |
user | User | undefined | null |
organization | Organization | undefined | null |
lastOrganizationInvitation | OrganizationInvitation | undefined | null |
lastOrganizationMember | OrganizationMembership | undefined | null |
Please note that the session and user object have a special relationship that the type definition alone does not capture:
- When there is an active session,
user === session.user. When there is no active session,userandsessionwill both benull. - When a session is loading,
userandsessionwill beundefined.
Returns
type UnsubscribeCallback = () => void;
The addListener method returns an UnsubscribeCallback function that can be used to remove the listener from the Clerk object.
authenticateWithMetamask()
function authenticateWithMetamask({ redirectUrl, signUpContinueUrl, customNavigate, }?: AuthenticateWithMetamaskParams): Promise<void>;
AuthenticateWithMetamaskParams
| Name | Type | Description |
|---|---|---|
redirectUrl | string | undefined | Full URL or path to navigate after successful sign in or sign up. |
signUpContinueUrl | string | undefined | The location to continue navigation to in the sign up process if data is missing. |
customNavigate | ((to: string) => Promise<unknown>) | undefined | Allows you to define a custom navigation function |
Components
Additional methods
In addition to the methods listed above, the Clerk class also has the following methods:
Organization
Redirect
navigate()redirectWithAuth()redirectToSignIn()redirectToSignUp()redirectToUserProfile()redirectToCreateOrganization()redirectToOrganizationProfile()redirectToHome()
Build URLs
buildUrlWithAuth()buildSignInUrl()buildSignUpUrl()buildUserProfileUrl()buildHomeUrl()buildCreateOrganizationUrl()buildOrganizationProfileUrl()