1. Prerequisites

  • First, you need to set up a Corbado project.
  • Now, 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 which may impact dark mode and other custom UI stylings.

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@2.6.0/dist/bundle/index.css"
    />
    <script src="https://unpkg.com/@corbado/web-js@2.6.0/dist/bundle/index.js"></script>

  <body>
    <script>
      await Corbado.load({
        projectId: "your-project-id",
      });

      const authElement = document.getElementById('corbado-auth'); //Element where you want to render CorbadoAuth UI
      Corbado.mountAuthUI(authElement, {
        onLoggedIn: () => {
          //post login actions can be performed here.
          //window.location.href = '/';
        },
      });
    </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