demo

Try our demo application to see how Corbado Connect integrates passkeys into your application.
 CorbadoConnectLogin handles passkey logins. You might embed this component in a modal or on a dedicated login page. It’s responsible for prompting the user to log in with a passkey and managing fallback if no passkey is available or if the passkey flow fails.

​
When to Use This Component

This component should be loaded at the beginning of any login flow where you want to offer passkeys as an authentication method.

​
Rendering Logic & User Experience

The component’s initial appearance can vary, creating a tailored experience for the user. There are three possible scenarios when the component loads:

​
Scenario 1: Immediate Fallback

The component immediately triggers the onFallback callback without rendering any UI. This happens if Gradual Rollout rules are configured to deny passkey login for the current user. This allows you to seamlessly direct them to your existing login method (e.g., password) without showing them a passkey option they can’t use.

​
Scenario 2: Standard Login Form

This is the default state. The component renders a form asking for an identifier (like an email address). In this state, the user can:
  1. Type their identifier and click the button to initiate a passkey login.
  2. Use Conditional UI, a browser feature that autofills the input with a passkey-associated account. Clicking this suggestion directly triggers the passkey login, saving the user a step.

​
Scenario 3: One-Tap Login

The component renders a “Sign in with a passkey” button for a specific user. This streamlined experience occurs if the component detects a clientState value (from a previous onComplete callback) stored in the browser’s localStorage. It allows returning users on the same device to log in with a single click.

​
Error Handling

The component is designed to handle errors gracefully and provide the best possible user experience. It uses two main strategies:

​
1. Automatic Fallback

In some cases, the component will automatically trigger the onFallback callback. This is the preferred behavior when:
  • The user is not part of a group that is allowed to see the passkey login prompt (as determined by Gradual Rollout).
  • Passkey Intelligence determines that the user has a very low chance of successfully using a passkey (e.g., after they have provided an identifier but no passkey is associated with it).
  • A critical, non-recoverable error occurs.
This prevents users from getting stuck and directs them to an alternative login method. The errorMessage in the callback will provide context.

​
2. Retryable Error Screen

In other cases, such as when a user instinctively closes the browser’s passkey prompt, the error is likely recoverable. Instead of triggering the fallback, the component will display an informative message inside its own UI, explaining what happened and offering a “Try again” button. This helps guide users who might be unfamiliar with the passkey experience.

​
Example

<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 passkeyLoginElement = document.getElementById('authorize-with-passkey');
    Corbado.mountCorbadoConnectLogin(passkeyLoginElement, {
      projectId: "pro-XXX", // Your Corbado Project ID
      frontendApiUrlSuffix: "frontendapi.cloud.corbado.io", // Points to your chosen Corbado Frontend API environment

      // Called when passkey login is completed successfully
      onComplete: (signedPasskeyData, clientState) => {
        // 1. Send the signedPasskeyData to your backend for verification
        fetch(SYSTEM_BE_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ signedPasskeyData: signedPasskeyData }),
        }).then(() => {
          // 2. Store clientState in localStorage to enable One-Tap Login next time
          localStorage.setItem('corbadoClientState', clientState);
          // 3. Proceed with the application flow (e.g., redirect to dashboard)
        });
      },

      // Called when passkey login is not possible or fails critically. Show your
      // fallback UI (e.g., a password field). The identifier might be pre-filled if
      // the user provided one.
      onFallback: (identifier, errorMessage) => {
        console.log(`Fallback triggered for '${identifier}' with message: ${errorMessage}`);
      },
    });
  </script>
</head>

<body>
  <div id="authorize-with-passkey"></div>
  <div id="authorize-with-fallback" style="display: none;">
    <!-- Your existing fallback authentication (e.g. password) comes here -->
  </div>
</body>

​
Available Configuration Parameters

NameDescriptionRequiredType
onCompleteInvoked upon a successful passkey login. Receives signedPasskeyData and a clientState string. Storing the clientState in localStorage is crucial for enabling the One-Tap Login experience on subsequent visits.✅(signedPasskeyData: string, clientState: string) => void
onFallbackCalled if passkey login isn’t possible (due to gradual rollout, passkey intelligence) or fails with a non-recoverable error. Provides an identifier (if the user entered one) and a descriptive errorMessage. Your logic should show an alternative login method (e.g., password) when this is called.✅(identifier: string, errorMessage: string) => void

​
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 CorbadoConnectLogin component.
Class NameUsage
.cb-login-init-signupStyles for the signup initialization section
.cb-login-init-forgot-passwordStyles for the forgot password initialization section
.cb-login-error-hard-iconsContainer for displaying hard error icons
.cb-login-error-hard-fallbackFallback styles for hard error messages
.cb-login-error-soft-iconsContainer for displaying soft error icons
.cb-login-error-soft-fallbackFallback styles for soft error messages
.cb-login-loader-containerContainer for loader elements
.cb-login-init-passkey-buttonStyles for the passkey button
.cb-login-error-hard-ctaStyles for call-to-action elements in hard error
.cb-login-success-iconsContainer for displaying success icons
.cb-switchStyles for switch account button
.cb-login-error-hard-helpStyles for help messages in hard error section

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