āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/getting-started/quickstart.js-frontend ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<TutorialHero exampleRepo={[ { title: "JavaScript Quickstart Repo", link: "https://github.com/clerk/clerk-javascript-quickstart"
}
]} beforeYouStart={[ { title: "Set up a Clerk application", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", }, ]} />
To add the JavaScript SDK to your JavaScript app, you have two options:
npm.<script> tag to load the ClerkJS package from our CDN.Use the following tabs to choose your preferred method.
<Tabs items={["NPM module", "<script>"]}> { /* NPM module tab */}
<Tab> <Steps> ## Set up a JavaScript app using Vite To install Clerk's JavaScript SDK, you need to use a bundler like [Vite](https://vitejs.dev/) or [Webpack](https://webpack.js.org/).
For this tutorial, run the following commands to create a JavaScript app using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project). From the prompts, choose the **Vanilla** framework, and then choose the **JavaScript** variant.
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
```bash {{ filename: 'terminal' }}
npm create vite@latest clerk-javascript
cd clerk-javascript
npm install
npm run dev
```
```bash {{ filename: 'terminal' }}
yarn create vite clerk-javascript
cd clerk-javascript
yarn install
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm create vite clerk-javascript
cd clerk-javascript
pnpm install
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun create vite clerk-javascript
cd clerk-javascript
bun install
bun dev
```
</CodeBlockTabs>
## Install `@clerk/clerk-js`
Run the following command to add the JavaScript SDK to your project:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
```bash {{ filename: 'terminal' }}
npm install @clerk/clerk-js
```
```bash {{ filename: 'terminal' }}
yarn add @clerk/clerk-js
```
```bash {{ filename: 'terminal' }}
pnpm add @clerk/clerk-js
```
```bash {{ filename: 'terminal' }}
bun add @clerk/clerk-js
```
</CodeBlockTabs>
## Set your Clerk API keys
It's recommended to use environment variables to store your Clerk Publishable Key. In JavaScript projects, you can add these values in an `.env` file and load them into your app using a package like [`dotenv`](https://www.npmjs.com/package/dotenv). For Vite projects, environment variables in an `.env` file at the project root are automatically accessible through the [`import.meta.env` object](https://vitejs.dev/guide/env-and-mode.html#env-variables).
<SignedIn>
Add your Clerk Publishable Key to your `.env` file. It can always be retrieved from the [**API keys**](https://dashboard.clerk.com/~/api-keys) page in the Clerk Dashboard.
</SignedIn>
<SignedOut>
1. In the Clerk Dashboard, navigate to the [**API keys**](https://dashboard.clerk.com/~/api-keys) page.
1. In the **Quick Copy** section, copy your Clerk Publishable Key.
1. Paste your key into your `.env` file.
The final result should resemble the following:
</SignedOut>
```env {{ filename: '.env' }}
VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}
```
In your `main.js` file, import the Publishable Key using Vite's `import.meta.env` object.
```js {{ filename: 'main.js' }}
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
```
## Initialize Clerk
To initialize Clerk, import the `Clerk` class and instantiate it with your Clerk Publishable Key. Then, call the `load()` method, as shown in the following example:
```js {{ filename: 'main.js' }}
import { Clerk } from '@clerk/clerk-js'
const publishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(publishableKey)
await clerk.load({
// Set load options here
})
```
> [!NOTE]
> Calling the `load()` method initializes Clerk. For more information on the `load()` method and what options you can pass to it, see the [reference documentation](/docs/reference/javascript/clerk#load).
## Add Clerk components to your app
Clerk's [prebuilt components](/docs/reference/components/overview) are the easiest way to add authentication and user management to your app. They come styled out-of-the-box and are customizable to fit your app's design.
To get started, add the following components to your app:
- [`<SignIn />`](/docs/reference/components/authentication/sign-in): Renders a user interface for signing in.
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
Your `main.js` file should look something like this:
```js {{ filename: 'main.js' }}
import { Clerk } from '@clerk/clerk-js'
const clerkPubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
const clerk = new Clerk(clerkPubKey)
await clerk.load()
if (clerk.isSignedIn) {
document.getElementById('app').innerHTML = `
<div id="user-button"></div>
`
const userButtonDiv = document.getElementById('user-button')
clerk.mountUserButton(userButtonDiv)
} else {
document.getElementById('app').innerHTML = `
<div id="sign-in"></div>
`
const signInDiv = document.getElementById('sign-in')
clerk.mountSignIn(signInDiv)
}
```
And your `index.html` file should look something like this:
```html {{ filename: 'index.html' }}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
```
## Create your first user
Run your project with the following command:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
```bash {{ filename: 'terminal' }}
npm run dev
```
```bash {{ filename: 'terminal' }}
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun dev
```
</CodeBlockTabs>
Now visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
</Steps>
{ /* <script> tag tab */}
<Tab> <Steps> ## Add the SDK using a `<script>` tag This `<script>` tag will load Clerk's JavaScript SDK from our CDN and initialize it with your Clerk **Publishable Key** and **Frontend API URL**. It should be placed before any other `<script>` tags that use the JavaScript SDK.
1. In the Clerk Dashboard, navigate to the [**API keys**](https://dashboard.clerk.com/~/api-keys) page.
1. In the **Quick Copy** section, select **JavaScript** from the dropdown menu.
1. Copy the `<script>` tag and paste it into your HTML file, as shown in the following example:
```html {{ filename: 'index.html' }}
<!-- Rest of your HTML file -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="{{pub_key}}"
src="https://{{fapi_url}}/npm/@clerk/clerk-js@5/dist/clerk.browser.js"
type="text/javascript"
></script>
```
## Listen for the `load` event
Below the `<script`> tag that initializes the SDK, create another `<script>` tag that listens for the `load` event and call Clerk's [`load()`](/docs/reference/javascript/clerk#load) method to load the SDK, as shown in the following example:
```html {{ filename: 'index.html' }}
<!-- Rest of your HTML file -->
<script>
window.addEventListener('load', async function () {
await Clerk.load()
console.log('ClerkJS is loaded')
})
</script>
```
## Allow users to sign in or out
Clerk's [prebuilt components](/docs/reference/components/overview) are the easiest way to add authentication and user management to your app. They come styled out-of-the-box and are customizable to fit your app's design.
To get started, you will use:
- [`<SignIn />`](/docs/reference/components/authentication/sign-in): renders a user interface for signing in.
- [`<UserButton />`](/docs/reference/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options.
```html {{ filename: 'index.html' }}
<div id="app"></div>
<!-- Initialize Clerk with your
Clerk Publishable Key and Frontend API URL -->
<script
async
crossorigin="anonymous"
data-clerk-publishable-key="{{pub_key}}"
src="https://{{fapi_url}}/npm/@clerk/clerk-js@5/dist/clerk.browser.js"
type="text/javascript"
></script>
<script>
window.addEventListener('load', async function () {
await Clerk.load()
if (Clerk.isSignedIn) {
document.getElementById('app').innerHTML = `
<div id="user-button"></div>
`
const userButtonDiv = document.getElementById('user-button')
Clerk.mountUserButton(userButtonDiv)
} else {
document.getElementById('app').innerHTML = `
<div id="sign-in"></div>
`
const signInDiv = document.getElementById('sign-in')
Clerk.mountSignIn(signInDiv)
}
})
</script>
```
</Steps>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā