​
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:

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.9.0/dist/bundle/index.css"
    />
    <script src="https://unpkg.com/@corbado/web-js@2.9.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
useCorbado()Global Corbado Object