• Overview
• 🚀 Getting Started
  • Option 1: Using NPM
  • Option 2: Using script and style Tags
• 📌 Usage
  • Usage with NPM
    • Initialization
    • Authentication UI
    • Handling Passkey List UI
    • Handling Logout
  • Usage in HTML with script and style Tags
    • Initialization
    • Handling User Authentication State
• 💡 Example Applications
• 📄 Documentation & Support
• 🚢 Release Notes
• 🔒 License

The @corbado/web-js package enables easy integration of Corbado's authentication functionalities into web projects. It can be used either by installing the package from NPM or by directly including it in your HTML files through script and style tags.

Install the package via NPM:

npm install @corbado/web-js

Include the script and styles directly in your HTML:

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

Replace @latest with the specific version number you intend to use.

Import and initialize Corbado in your main JavaScript or TypeScript file:

import Corbado from '@corbado/web-js';

await Corbado.load({
  projectId: 'pro-XXXXXXXXXXXXXXXXXXXX',
});

Note: It's important to initialize Corbado before using any of its functionalities.

Mount the authentication UI to your HTML element:

<script>
  const authElement = document.getElementById('corbado-auth');

  // In your JavaScript or TypeScript file after initializing Corbado
  Corbado.mountAuthUI(authElement, {
    onLoggedIn: () => {
      window.location.href = '/';
    },
  });
</script>

<div id="corbado-auth"></div>

Use the Corbado.isAuthenticated boolean to check if the user is logged in and to mount the passkey list UI:

// In your JavaScript or TypeScript file after initializing Corbado if (Corbado.user) {
Corbado.mountPasskeyListUI(passkeyListHTMLElement); }

<script>
  const passkeyListElement = document.getElementById('passkey-list');

  // In your JavaScript or TypeScript file after initializing Corbado
  if (Corbado.isAuthenticated) {
    Corbado.mountPasskeyListUI(passkeyListElement);
  }
</script>

<div id="passkey-list"></div>

Use the Corbado.isAuthenticated boolean to check if the user is logged in and to handle logout:

// In your JavaScript or TypeScript file after initializing Corbado
if (Corbado.isAuthenticated) {
  logoutButton.addEventListener('click', async () => {
    await Corbado.logout();
  });
}

Initialize Corbado in a <script> tag within your HTML:

<script type="module">
  await Corbado.load({
    projectId: 'pro-XXXXXXXXXXXXXXXXXXXX',
  });

  // Additional JavaScript to manage UI
</script>

Note: It's important to initialize Corbado before using any of its functionalities.

Use JavaScript to manage login/logout states and to mount the passkey list UI:

<script type="module">
  if (!Corbado.user) {
    // Handle login state
  } else {
    // Handle logout state and mount passkey list
  }
</script>

Note:

• The use of the type="module" attribute is necessary to use ES6 modules in the browser. For more information, please refer to this article.
• Use of Corbado with <script> tag is similar to using it with NPM, except that you don't need to import the package and you can use the Corbado object directly from the global scope.

• For a detailed example using the package from NPM checkout the example application and its source code
• For an example using script and style tags directly in HTML checkout the example application and its source code

For support and questions please visit our Slack channel. For more detailed information and advanced configuration options, please visit our Documentation Page.

Find out what we've shipped! Check out the changelog files here

This project is licensed under the MIT License - see the LICENSE file for details.