demo

Try our demo application to see how Corbado Connect integrates passkeys into your application.

CorbadoConnectPasskeyList provides a complete UI for authenticated users to manage their passkeys.

​
When to Use This Component

This component should be loaded within a profile or account management section of your application where a user is already authenticated.

​
Rendering Logic

The component’s rendering is primarily controlled by the Gradual Rollout feature. If the allow-passkey-list ruleset you’ve configured determines that the current user should not have access to passkey management, the component will not render at all.

​
User Experience

If rendered, the component allows the user to perform three main actions:

  1. List existing passkeys: See all passkeys associated with their account, including helpful metadata like the device it was created on and when it was last used.
  2. Delete existing passkeys: Revoke passkeys they no longer need.
  3. Append new passkeys: Add a passkey from their current device.

​
Error Handling

The component is designed to show clear, helpful error messages to the user within a pop-up modal. Planned errors that the user might encounter include:

  • Unsupported device: If the user tries to append a passkey on a device or browser that does not support WebAuthn.
  • Passkey already exists: If the user tries to append a passkey on a device that already has one registered for their account.

​
Example

Important: This component is designed for users who are already logged in. You must generate secure ConnectTokens (see here) on your backend for listing, appending, and deleting passkeys to validate that the user session is legitimate.

<head>
  <script src="https://cdn.cloud.corbado.io/connect/dist/web-js-latest.min.js"></script>
  <link rel="stylesheet" href="https://cdn.cloud.corbado.io/connect/dist/web-js-latest.min.css" />

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

    // This function is responsible for getting a short-lived ConnectToken from your backend.
    // Your server would make a secure, server-to-server call to Corbado's Backend API.
    const connectTokenProvider = async (type) => {
      // 'type' will be 'passkey-list', 'passkey-append', or 'passkey-delete'
      const response = await fetch('/your-backend/generate-corbado-connect-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type }), 
      });

      const { token } = await response.json();

      return token;
    };

    Corbado.mountCorbadoConnectPasskeyList(passkeyListElement, {
      projectId: "pro-XXX", // Your Corbado Project ID
      frontendApiUrlSuffix: "frontendapi.cloud.corbado.io", // Points to your chosen Corbado Frontend API environment

      // Asynchronously provides ConnectTokens for all actions (list, append, delete)
      connectTokenProvider: connectTokenProvider
    });
  </script>
</head>

<body>
  <!-- The passkey list UI will render into this div -->
  <div id="passkey-list"></div>
</body>

​
Available Configuration Parameters

NameDescriptionRequiredType
connectTokenProviderA function that asynchronously returns a ConnectToken. It receives a type argument (either 'passkey-list', 'passkey-append', or 'passkey-delete') to specify which kind of token is needed from your backend.✅(type: string) => Promise<string>

​
Customization

You can customize the component’s appearance to match your application’s design in two ways:

​
1. Through CSS Theme Variables

The easiest way to change colors, fonts, and border-radius is by overriding our CSS theme variables. You can set these in a :root block in your stylesheet. (See the Customization section of the CorbadoConnectAppend component for a full list of variables).

​
2. Through CSS Classes

For more detailed changes, you can directly target the component’s CSS classes. All classes are scoped under the .cb-connect-container to avoid conflicts.

​
Shared CSS Classes

These classes are used across multiple Corbado Connect components.

Class NameUsage
.cb-h2Used for heading level 2 styling
.cb-pUsed for paragraph text styling
.cb-boldUsed for bold text
.cb-link-buttonUsed for link-style buttons
.cb-connect-containerThe top-level container for the component
.cb-primary-buttonUsed for primary buttons
.cb-secondary-buttonUsed for secondary buttons
.cb-notification-containerUsed for notification containers
.loaderUsed for loader/spinner animations

​
Component-Specific CSS Classes

These classes are specific to the CorbadoConnectPasskeyList component.

Class NameUsage
.cb-passkey-buttonStyles for the main passkey button
.cb-passkey-list-containerContainer for the list of passkeys
.cb-passkey-list-itemStyles for individual passkey list items
.cb-passkey-list-append-buttonStyles for the button used to append passkey items
.cb-modalStyles for modal windows (used for delete confirmation, errors, etc.)
.cb-passkey-list-emptyStyles for the empty state of the passkey list

​
Next steps: Get in touch

Corbado Connect is currently not offered as self-service option. For inquiries, demonstrations, or to discuss enterprise deployment options, please contact us:

We look forward to helping you deploy passkeys seamlessly—while protecting your existing investments and infrastructure.