ClerkJS

ClerkJS is our foundational JavaScript library for building user management and authentication. It enables you to register, sign in, verify and manage users for your application using highly customizable flows.

While we typically recommend using one of our framework bindings (such as our React or Next.js bindings), having the ability to use the underlying ClerkJS package provides more freedom to use Clerk how you best see fit.

Installation

There are two ways you can include ClerkJS in your project. You can either import the ClerkJS npm module or load ClerkJS with a script tag.

You need to create a Clerk Application in your Clerk Dashboard before you can set up ClerkJS. For more information, check out our Set up your application guide.

Install ClerkJS as ES module

terminal
npm install @clerk/clerk-js

terminal
yarn add @clerk/clerk-js

terminal
pnpm add @clerk/clerk-js

Once you have installed the package, you will need to import the ClerkJS object constructor into your code and pass it your Clerk Publishable Key as a parameter. Then, you can call the load() method to initialize ClerkJS. For more information on the load() method and what options you can pass to it, check out the reference documentation.


import Clerk from '@clerk/clerk-js';
 
const clerkPublishableKey = {{pub_key}};
const clerk = new Clerk(clerkPublishableKey);
await clerk.load({
  // Set load options here...
});

Install ClerkJS as script

ClerkJS can be loaded from a <script /> tag with the source from your Frontend API URL. You can find your Frontend API URL in the Clerk Dashboard on the API Keys page. Click on the Advanced dropdown to reveal the Frontend API URL.

Add the following script to your site's <body> element:

Calling the load() method initializes ClerkJS. For more information on the load() method and what options you can pass to it, check out the reference documentation.


<script>
  // Get this URL and Publishable Key from the Clerk Dashboard
  const clerkPublishableKey = {{pub_key}};
  const frontendApi = '[your-domain].clerk.accounts.dev';
  const version = '@latest'; // Set to appropriate version
 
  // Creates asynchronous script
  const script = document.createElement('script');
  script.setAttribute('data-clerk-frontend-api', frontendApi);
  script.setAttribute('data-clerk-publishable-key', clerkPublishableKey);
  script.async = true;
  script.src = `https://${frontendApi}/npm/@clerk/clerk-js${version}/dist/clerk.browser.js`;
 
  // Adds listener to initialize ClerkJS after it's loaded
  script.addEventListener('load', async function () {
    await window.Clerk.load({
      // Set load options here...
    });
  });
  document.body.appendChild(script);
</script>

Usage

Once you have access to the Clerk class, you're able to access and call a myriad of attributes and methods to control your program.

To utilize these methods and attributes, Clerk has a wide array of classes you'll access such as: