Meta tags:
description=Add authentication and user management to your JavaScript app with Clerk.;

Headings (most frequently used words):

clerk, your, to, javascript, create, app, add, components, the, quickstart, before, you, start, example, repository, new, install, js, set, api, keys, initialize, run, project, first, user, sdk, using, script, tag, listen, for, load, event, allow, users, sign, in, or, out, next, steps, more, explore, feedback, prebuilt, build, custom, flows, class, reference, customization, localization,

Text of the page (most frequently used words):
clerk (92), the (62), #script (40), your (37), javascript (28), and (26), app (20), load (18), user (16), npm (15), add (14), env (14), sdk (13), file (13), you (12), new (12), document (12), const (12), div (12), following (11), key (11), html (11), from (10), src (10), publishable (10), management (9), create (9), publishablekey (9), vite (9), install (9), copy (8), use (8), api (8), sign (8), getelementbyid (8), react (7), authentication (7), for (7), started (7), run (7), yarn (7), pnpm (7), markdown (6), next (6), are (6), components (6), using (6), window (6), await (6), type (6), dist (6), browser (6), https (6), data (6), anonymous (6), crossorigin (6), with (6), bundle (6), bun (6), main (6), billing (5), that (5), how (5), index (5), options (5), initialize (5), tag (5), dashboard (5), domain (5), meta (5), vite_clerk_publishable_key (5), import (5), getting (5), this (4), explore (4), learn (4), prebuilt (4), signindiv (4), innerhtml (4), userbuttondiv (4), button (4), __internal_clerkuictor (4), clerkui (4), async (4), text (4), your_frontend_api_url (4), defer (4), tags (4), method (4), should (4), frontend (4), dev (4), head (4), like (4), error (4), reject (4), resolve (4), clerkdomain (4), core (4), resources (3), expo (3), have (3), content (3), access (3), before (3), manage (3), build (3), more (3), steps (3), guides (3), your_publishable_key (3), dropdown (3), menu (3), account (3), they (3), out (3), example (3), them (3), select (3), page (3), keys (3), other (3), project (3), loads (3), set (3), choose (3), package (3), quickstart (3), start (3), support (2), 2026 (2), manager (2), not (2), legal (2), terms (2), about (2), documentation (2), all (2), sdks (2), cli (2), b2b (2), github (2), feedback (2), was (2), helpful (2), waitlist (2), control (2), features (2), through (2), organizations (2), shared (2), application (2), class (2), reference (2), custom (2), flows (2), mountsignin (2), else (2), mountuserbutton (2), issignedin (2), function (2), addeventlistener (2), shows (2), signed (2), avatar (2), selecting (2), opens (2), userbutton (2), renders (2), interface (2), signing (2), signin (2), get (2), will (2), easiest (2), way (2), come (2), styled (2), box (2), customizable (2), fit (2), design (2), clerkjs (2), rest (2), event (2), calls (2), shown (2), paste (2), into (2), section (2), quick (2), navigate (2), passed (2), attributes (2), must (2), url (2), these (2), cdn (2), first (2), command (2), body (2), module (2), title (2), width (2), svg (2), icon (2), look (2), something (2), appendchild (2), failed (2), onerror (2), onload (2), true (2), createelement (2), promise (2), slice (2), split (2), atob (2), derive (2), throw (2), code (2), environment (2), variables (2), store (2), projects (2), can (2), framework (2), tauri (2), svelte (2), solidjs (2), rust (2), koa (2), hono (2), elysia (2), angular (2), vue (2), ruby (2), rails (2), sinatra (2), remix (2), python (2), php (2), nuxt (2), backend (2), java (2), ios (2), fastify (2), chrome (2), extension (2), astro (2), android (2), express (2), router (2), tanstack (2), docs (2), inc, cookie, sell, share, info, website, privacy, policy, conditions, brand, assets, contact, blog, careers, company, llm, leaderboard, students, startups, feature, requests, glossary, changelog, view, product, edit, last, updated, jul, what, did, think, lets, collect, signups, products, launch, simple, integrated, workflow, enables, subscriptions, free, trials, payments, plans, related, webhook, events, b2c, applications, accounts, let, teams, collaborate, members, roles, additional, help, grow, customize, localize, customization, localization, interfaces, entirely, scratch, most, relevant, allow, users, loaded, log, console, below, another, listens, listen, prefixed, supports, three, proxyurl, proxy, important, placed, any, authenticate, visit, homepage, http, localhost, 5173, device, initial, scale, viewport, name, href, image, xml, rel, link, utf, charset, lang, doctype, creates, instance, dynamically, imports, derives, does, final, result, resemble, recommended, values, variable, node, files, starting, flag, root, automatically, accessible, object, gives, classes, methods, make, easier, bunx, latest, don, already, commands, prompts, then, variant, vanilla, one, need, bundler, webpack, tabs, preferred, our, two, repo, repository, available, works, development, securing, customizing, portal, organization, session, ask, search, skip,

Text of the page (random words):
javascript quickstart getting started clerk docs skip to main content docs core 3 core 3 core 2 core 1 search documentation ask ai dashboard dashboard sign up sign up next js react expo tanstack react start react router express android astro chrome extension c fastify go ios java js backend sdk javascript nuxt php python remix ruby rails sinatra vue angular elysia hono koa rust solidjs svelte tauri select your sdk next js react expo tanstack react start react router express android astro chrome extension c fastify go ios java js backend sdk javascript nuxt php python remix ruby rails sinatra vue angular elysia hono koa rust solidjs svelte tauri guides reference getting started getting started getting started authentication flows user management session management organization management billing management account portal customizing clerk securing your app ai cli development clerk dashboard how clerk works guides getting started javascript quickstart next steps more to explore available in other sdks copy as markdown markdown copy as markdown before you start clerk icon set up a clerk application example repository javascript quickstart repo to add the javascript sdk to your javascript app you have two options install the package using a package manager like npm use the script tag to load the clerkjs package from our cdn use the following tabs to choose your preferred method npm module script create a new javascript app to install clerk s javascript sdk you need to use a bundler like vite or webpack if you don t already have a javascript app run the following commands to create a new one using vite from the prompts choose the vanilla framework and then choose the javascript variant npm pnpm yarn bun npm create vite latest clerk javascript cd clerk javascript npm install pnpm create vite clerk javascript cd clerk javascript pnpm install yarn create vite clerk javascript cd clerk javascript yarn install bunx create vite clerk javascript cd clerk javascript bun install install clerk clerk js the clerk javascript sdk gives you access to a set of classes and methods to make user authentication easier run the following command to install the sdk npm pnpm yarn bun npm install clerk clerk js pnpm add clerk clerk js yarn add clerk clerk js bun add clerk clerk js set your clerk api keys it s recommended to use environment variables to store your clerk publishable key in javascript projects you can store these values in an env file and load them using your framework s env variable support in node js you can load env files by starting your app with the env file env flag for vite projects environment variables in an env file at the project root are automatically accessible through the import meta env object add your clerk publishable key to your env file in the clerk dashboard navigate to the api keys page in the quick copy section copy your clerk publishable key paste your key into your env file the final result should resemble the following env vite_clerk_publishable_key your_publishable_key initialize clerk to initialize clerk add the following code to your main js file this code does the following imports your publishable key and derives the clerk frontend api domain from it dynamically loads the ui bundle creates a new clerk instance calls the load method to initialize clerk src main js import clerk from clerk clerk js const publishablekey import meta env vite_clerk_publishable_key if publishablekey throw new error add your vite_clerk_publishable_key to the env file derive the frontend api domain from the publishable key const clerkdomain atob publishablekey split _ 2 slice 0 1 loads the clerk ui bundle await new promise resolve reject const script document createelement script script src https clerkdomain npm clerk ui 1 dist ui browser js script async true script crossorigin anonymous script onload resolve script onerror reject new error failed to load clerk ui bundle document head appendchild script const clerk new clerk publishablekey await clerk load ui clerkui window __internal_clerkuictor add clerk components to your app clerk s prebuilt components 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 renders a user interface for signing in userbutton 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 src main js import clerk from clerk clerk js const publishablekey import meta env vite_clerk_publishable_key if publishablekey throw new error add your vite_clerk_publishable_key to the env file derive the frontend api domain from the publishable key const clerkdomain atob publishablekey split _ 2 slice 0 1 loads the clerk ui bundle await new promise resolve reject const script document createelement script script src https clerkdomain npm clerk ui 1 dist ui browser js script async true script crossorigin anonymous script onload resolve script onerror reject new error failed to load clerk ui bundle document head appendchild script const clerk new clerk publishablekey await clerk load ui clerkui window __internal_clerkuictor 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 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 src main js script body html run your project run your project with the following command npm pnpm yarn bun npm run dev pnpm run dev yarn dev bun run dev create your first user visit your app s homepage at http localhost 5173 select sign up on the page and authenticate to create your first user add the sdk using a script tag these script tags will load clerk s ui bundle and javascript sdk from the cdn and initialize them with your clerk publishable key and frontend api url they should be placed before any other script tags that use the javascript sdk important clerk options passed as script tag attributes must be prefixed with data clerk the script tag supports three attributes data clerk publishable key publishablekey data clerk proxy url proxyurl and data clerk domain domain all other options must be passed to clerk s load method in the clerk dashboard navigate to the api keys page in the quick copy section select javascript from the dropdown menu copy the script tags and paste them into your html file as shown in the following example index html rest of your html file script defer crossorigin anonymous src https your_frontend_api_url npm clerk ui 1 dist ui browser js type text javascript script script defer crossorigin anonymous data clerk publishable key your_publishable_key src https your_frontend_api_url npm clerk clerk js 6 dist clerk browser js type text javascript script listen for the load event below the script tags that initialize the sdk create another script tag that listens for the load event and calls clerk s load method to load the sdk as shown in the following example index html rest of your html file script window addeventlistener load async function await clerk load ui clerkui window __internal_clerkuictor console log clerkjs is loaded script allow users to sign in or out clerk s prebuilt components 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 renders a user interface for signing in userbutton shows the signed in user s avatar selecting it opens a dropdown menu with account management options index html div id app div script defer crossorigin anonymous src https your_frontend_api_url npm clerk ui 1 dist ui browser js type text javascript script script defer crossorigin anonymous data clerk publishable key your_publishable_key src https your_frontend_api_url npm clerk clerk js 6 dist clerk browser js type text javascript script script window addeventlistener load async function await clerk load ui clerkui window __internal_clerkuictor 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 next steps explore the most relevant next steps for your sdk using the following guides prebuilt components learn how to add clerk s prebuilt authentication and user management ui to your app build custom flows learn how to build custom user interfaces entirely from scratch using the clerk api clerk class reference learn more about the clerk class and how to use it customization localization learn how to customize and localize clerk components more to explore explore additional clerk features that help you build manage and grow your application organizations organizations are shared accounts that let teams collaborate manage members and roles and control access to shared resources billing billing enables you to manage subscriptions free trials payments plans and billing related webhook events for b2c and b2b applications waitlist waitlist lets you collect signups and control access to new products or features before launch through a simple integrated workflow feedback what did you think of this content it was helpful it was not helpful i have feedback last updated on jul 10 2026 github edit on github product authentication b2b authentication billing cli sdks react next js expo view all resources documentation changelog glossary feature requests startups students llm leaderboard company about careers blog contact brand assets legal terms and conditions privacy policy website terms of use legal resources do not sell share my info cookie manager 2026 clerk inc support copy as markdown markdown copy as markdown