Links

Vanilla JS

Learn how to add the Corbado UI components to your Vanilla JavaScript application.

1. Prerequisites

Install the Corbado UI components via npm or add the JavaScript library via CDN.
NPM
CDN
Run the following npm install in your project's root level.
npm install @corbado/web-js
Include the following tags in the <head> section of your index.html file. They load Corbado's Javascript code and styles.
<link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"/>
<script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>

2. Load the global Corbado object and mount CorbadoAuth

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.css"/>
<script src="https://unpkg.com/@corbado/web-js@latest/dist/bundle/index.js"></script>
</head>
<body>
<script>
await Corbado.load({
projectId: import.meta.env.VITE_CORBADO_PROJECT_ID,
darkMode: 'on',
});
const authElement = document.getElementById('corbado-auth');
Corbado.mountAuthUI(authElement, {
onLoggedIn: () => {
window.location.href = '/';
},
isDevMode: true,
});
</script>
<div id="corbado-auth"></div>
</body>
</html>
Find detailed documentation about the available configuration options for all UI components here.

3. Read the blog post

To find a step-by-step tutorial on how to integrate passkeys into a Vanilla JS project, please check out our blog post.