​
1. Prerequisites

Install the Corbado UI components via npm or add the JavaScript library via CDN:

npm install @corbado/web-js

Note: UI components added via CDN do currently not support icon coloring.

​
2. Add UI Components to your JavaScript Code

This example show how to load the global Corbado object and mount the CorbadoAuth component.

Find a list and description of all the Corbado UI Components here.

<!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: <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 VanillaJS project, please check out our blog post.

Corbado Logo
useCorbado()Global Corbado Object