CorbadoConnectPasskeyList component lets users manage their passkeys. Learn how to securely list and delete passkeys in your application.
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.
This component should be loaded within a profile or account management section of your application where a user is already authenticated.
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.
If rendered, the component allows the user to perform three main actions:
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:
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.
Name | Description | Required | Type |
---|---|---|---|
connectTokenProvider | A 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> |
You can customize the component’s appearance to match your application’s design in two ways:
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).
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.
These classes are used across multiple Corbado Connect components.
Class Name | Usage |
---|---|
.cb-h2 | Used for heading level 2 styling |
.cb-p | Used for paragraph text styling |
.cb-bold | Used for bold text |
.cb-link-button | Used for link-style buttons |
.cb-connect-container | The top-level container for the component |
.cb-primary-button | Used for primary buttons |
.cb-secondary-button | Used for secondary buttons |
.cb-notification-container | Used for notification containers |
.loader | Used for loader/spinner animations |
These classes are specific to the CorbadoConnectPasskeyList
component.
Class Name | Usage |
---|---|
.cb-passkey-button | Styles for the main passkey button |
.cb-passkey-list-container | Container for the list of passkeys |
.cb-passkey-list-item | Styles for individual passkey list items |
.cb-passkey-list-append-button | Styles for the button used to append passkey items |
.cb-modal | Styles for modal windows (used for delete confirmation, errors, etc.) |
.cb-passkey-list-empty | Styles for the empty state of the passkey list |
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.