> ## Documentation Index > Fetch the complete documentation index at: https://docs.corbado.com/llms.txt > Use this file to discover all available pages before exploring further. # CorbadoConnectLogin: Seamless Passkey Login > CorbadoConnectLogin is a UI component for passkey login. Enable smooth and secure passkey-based authentication for your users with ease. Try Demo Talk to Adoption Engineer Whitepaper ## 1. Introduction **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. ## 2. 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. ## 3. 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: ### 3.1 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. ### 3.2 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. ### 3.3 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. ## 4. Error Handling The component is designed to handle errors gracefully and provide the best possible user experience. It uses two main strategies: ### 4.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](/corbado-connect/features/gradual-rollout)). * [Passkey Intelligence](/corbado-connect/features/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. ### 4.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. ## 5. Example ```js theme={null}

``` ## 6. Available Configuration Parameters | **Name** | **Description** | **Required** | **Type** | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | ---------------------------------------------------------- | | `onComplete` | Invoked upon a successful passkey login. Receives [signedPasskeyData](/corbado-connect/concepts/signed-passkey-data) 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` | | `onFallback` | Called if passkey login isn't possible (due to gradual rollout, [passkey intelligence](/corbado-connect/features/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` | ## 7. Customization You can customize the component's appearance to match your application's design in two ways: ### 7.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](/corbado-connect/web-ui-components/corbadoconnectappend) component for a full list of variables). ### 7.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. #### 7.2.1 Shared CSS Classes 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 | #### 7.2.2 Component-Specific CSS Classes These classes are specific to the `CorbadoConnectLogin` component. | **Class Name** | **Usage** | | -------------------------------- | ----------------------------------------------------- | | `.cb-login-init-signup` | Styles for the signup initialization section | | `.cb-login-init-forgot-password` | Styles for the forgot password initialization section | | `.cb-login-error-hard-icons` | Container for displaying hard error icons | | `.cb-login-error-hard-fallback` | Fallback styles for hard error messages | | `.cb-login-error-soft-icons` | Container for displaying soft error icons | | `.cb-login-error-soft-fallback` | Fallback styles for soft error messages | | `.cb-login-loader-container` | Container for loader elements | | `.cb-login-init-passkey-button` | Styles for the passkey button | | `.cb-login-error-hard-cta` | Styles for call-to-action elements in hard error | | `.cb-login-success-icons` | Container for displaying success icons | | `.cb-switch` | Styles for switch account button | | `.cb-login-error-hard-help` | Styles for help messages in hard error section |