@corbado/web-js

Table of Contents

• 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

Overview

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.

🚀 Getting Started

Option 1: Using NPM

Install the package via NPM:

npm install @corbado/web-js

Option 2: Using script and style Tags

Include the script and styles directly in your HTML:

<link
  rel="stylesheet"
  href="https://unpkg.com/@corbado/web-js@2/dist/bundle/index.css"
/>
<script src="https://unpkg.com/@corbado/web-js@2/dist/bundle/index.js"></script>

@2 loads the most recent version of major version 2. Replace @2 with a specific version number if you want to pin it. Use @latest if you always want to have the most recent version including majors (not recommended for production).

📌 Usage

Usage with NPM

Initialization:

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.

Authentication UI

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>

Handling Passkey List UI:

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>

Handling Logout:

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();
  });
}

Usage in HTML with script and style Tags

Initialization:

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.

Handling User Authentication State:

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.

💡 Example Applications

• 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

📄 Documentation & Support

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

🚢 Release Notes

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

🔒 License

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