Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to

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:

  1. Install the package using a package manager, like npm, yarn, or pnpm.
  2. 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:

npm install @clerk/clerk-js
yarn add @clerk/clerk-js
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]'; 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 to copy your Publishable Key from the API Keys page in the Clerk Dashboard. On this same page, click on the Advanced dropdown and copy your Frontend API URL. If you are signed into your Clerk Dashboard, your Publishable key should be visible.


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.

import Clerk from '@clerk/clerk-js'; const clerkFrontendApi = `{{pub_key}}`; const clerk = new Clerk(clerkFrontendApi); await clerk.load({ // Set load options here... });
<script> const clerkFrontendApi = `pk_{{pub_key}}`; const frontendApi = '[your-domain]'; const version = '@latest'; const script = document.createElement('script'); script.setAttribute('data-clerk-frontend-api', frontendApi); script.setAttribute('data-clerk-publishable-key', clerkFrontendApi); 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.

User Button Example
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]`; 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

What did you think of this content?

Clerk © 2023