What is Conditional UI in WebAuthn?

Learn how Conditional UI improves WebAuthn by offering an autofill feature for passkeys during login.

Conditional UI is a feature in WebAuthn that dynamically displays passkeys or traditional password options based on whether a user has a registered credential (resident key) with a website or application. This method allows for a credential selection UI that coexists with autofilled passwords, providing users with a simplified and efficient login experience.

By implementing Conditional UI, websites and applications can offer a more streamlined authentication process, enhancing security while maintaining user privacy and improving the overall user experience.

• Conditional UI dynamically presents authentication options, improving the WebAuthn login process.
• It enables a smooth transition from passwords to passkeys by integrating them with autofill functionality.
• Conditional UI simplifies the implementation of passkeys in web applications, enhancing both security and user experience.

Enhancing User Experience with Conditional UI

Conditional UI helps in the adoption of passkeys by addressing common challenges associated with transitioning from traditional authentication methods. Its main features include:

• Streamlined Authentication Process: By presenting only the relevant login options, Conditional UI reduces complexity and potential user errors, thereby streamlining the authentication process with WebAuthn/passkeys.
• Integration with Existing Authentication Systems: It allows for the use of passkeys alongside traditional passwords, easing the transition for users and leveraging familiar UX paradigms.
• Privacy and Security: Conditional UI respects user privacy and enhances security by only showing passkey options when appropriate, thus avoiding unnecessary disclosure of user credentials.

Implementing Conditional UI

To implement Conditional UI, developers must implement a few extra steps to an existing WebAuthn application. For a tutorial and more detailed information, refer to this blog article.

Conditional UI FAQs

How does Conditional UI improve the login experience?
Conditional UI enhances the login experience by displaying available passkeys in the UI, streamlining the authentication process for users with registered credentials.

What are the main benefits of using Conditional UI?
The main benefits include a seamless transition from passwords to passkeys, improved user satisfaction by minimizing login steps, and the integration of passkeys with autofill features for a smoother authentication experience.

What challenges are associated with implementing Conditional UI?
Implementing Conditional UI may involve a learning curve for inexperienced developers and depends on browser and device compatibility. However, these challenges are mitigated by the ongoing development and support of WebAuthn standards.

Can I have Conditional UI on my device?
Yes, you can have Conditional UI on your device if it supports WebAuthn and if the browsers you are using are updated to support Conditional UI features. It's important to ensure that your device's software is up to date to take advantage of these features. You can test your device’s Conditional UI readiness at State of Passkeys.

Which browsers are compatible with Conditional UI?
Most modern browsers that support WebAuthn are also moving towards compatibility with Conditional UI, including Chrome, Firefox, Safari, and Edge. However, the level of support for Conditional UI features can vary, so checking the latest browser documentation or updates is advisable for the most current information. You can check the availability here.

Will Conditional UI work if the user's browser or device doesn't support it?
If the user's browser or device does not support Conditional UI, the authentication process will fall back to the standard login methods available, such as password input or regular WebAuthn logins. It's designed to enhance the user experience without excluding users with unsupported devices or browsers.

Does implementing Conditional UI require changes to the backend authentication system?
Implementing Conditional UI primarily involves changes to the frontend of your web application. However, your backend authentication system must be set up to support WebAuthn and passkeys. This might require some adjustments if your system relies solely on traditional authentication methods. However, in many cases, a dedicated endpoint to start the Conditional UI login flow is implemented.

Can Conditional UI support login flows without usernames and passwords?
Yes, one of the significant benefits of Conditional UI is its ability to support more streamlined login flows, including options without usernames (usernameless logins) or passwords (passwordless logins). By using passkeys and relying on platform authentication methods like Face ID or Touch ID, users can enjoy a more seamless login experience without compromising security.

About Corbado

Corbado is the Passkey Intelligence Platform for large-scale CIAM teams running consumer authentication. We help you see what IDP logs and generic analytics tools can't: where passkeys, passwords, OTP, social login and fallback journeys succeed, stall or fail, which devices and browsers create friction, and when an OS update silently breaks login. Two products: Corbado Observe layers process mining and observability across authentication journeys. Corbado Connect adds managed passkeys with analytics built in alongside your IDP. VicRoads runs passkeys for 5M+ users with Corbado (more than 80% passkey activation rate).