Use Clerk with JavaScript

Learn how to use Clerk to quickly and easily add secure authentication and user management to your JavaScript application.

Install `@clerk/clerk-js` or use `<script>` tag

To use the ClerkJS package, you have two options:

Install the package using a package manager, like npm, yarn, or pnpm.
Use the <script> tag to load the ClerkJS package from our CDN.

Option 1: Install ClerkJS using a package manager

At the root of your project, install the ClerkJS package using your package manager of choice:

terminal
npm install @clerk/clerk-js

terminal
yarn add @clerk/clerk-js

terminal
pnpm add @clerk/clerk-js

You'll need to use a bundler like Vite or Webpack to use this method.

Option 2: Use the `<script>` tag


<script>
  // Get this URL from the Clerk Dashboard
  const frontendApi = '[your-domain].clerk.accounts.dev';
  const version = '@latest'; // Set to appropriate version
 
  // Creates asynchronous script
  const script = document.createElement('script');
  script.async = true;
  script.src = `https://${frontendApi}/npm/@clerk/clerk-js${version}/dist/clerk.browser.js`;
  document.body.appendChild(script);
</script>

Set environment keys

To use the ClerkJS package, you'll need your Publishable Key and your Frontend API URL. If you are signed into your Clerk Dashboard, your Publishable key should be visible below. However, both of these values can be found in the Clerk Dashboard on the API Keys page. On this page, click on the Advanced dropdown to find your Frontend API URL.

.env.local
REACT_APP_CLERK_PUBLISHABLE_KEY={{pub_key}}
CLERK_FRONTEND_API=[your-domain].clerk.accounts.dev

We suggest storing these keys in environment variables using an .env file or equivalent.

Setup the Clerk class

To use the ClerkJS package, you'll need to initialize the Clerk class with your Publishable key.

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.

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

index.html
<script>
  const clerkPublishableKey = `{{pub_key}}`;
  const frontendApi = '[your-domain].clerk.accounts.dev';
  const version = '@latest';
  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 () {
    const clerk = window.Clerk;
    await clerk.load({
      // Set load options here...
    });
  });
  document.body.appendChild(script);
</script>

You can configure the options for Clerk.load to change the behavior of ClerkJS. See the ClerkJS reference documentation for more information.

Render a UI component

Now that you have the Clerk class set up, you can use it to render a UI component into a DOM element.

This example uses the <UserButton /> component, which will allow the user to sign in and out of our application.


import Clerk from '@clerk/clerk-js';
 
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div
    id="user-button"
  ></div>
`;
 
const userButtonComponent = document.querySelector<HTMLDivElement>('#user-button')!;
 
const clerk = new Clerk({{pub_key}});
await clerk.load();
 
clerk.mountUserButton(userButtonComponent);


<div id="user-button"></div>
<script>
  const script = document.createElement('script');
  script.setAttribute('data-clerk-publishable-key', {{pub_key}});
  script.async = true;
  script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
 
  script.addEventListener('load', async function () {
    await window.Clerk.load();
 
    const userButtonComponent = document.querySelector('#user-button');
 
    window.Clerk.mountUserButton(userButtonComponent);
  });
  document.body.appendChild(script);
</script>

Next steps

Now that you have an application integrated with Clerk, you will want to read the following documentation:

Customization & Localization

Learn how to customize and localize the Clerk components.

Learn More

Authentication Components

Learn more about all our authentication components.

Learn More

Clerk Class Reference

Learn more about the Clerk class and how to use it.

Learn More

Install @clerk/clerk-js or use <script> tag

Option 1: Install ClerkJS using a package manager

Option 2: Use the <script> tag

Set environment keys

Setup the Clerk class

Render a UI component

Next steps

Customization & Localization

Authentication Components

Clerk Class Reference

Install `@clerk/clerk-js` or use `<script>` tag

Option 2: Use the `<script>` tag