What is Conditional UI in WebAuthn?

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

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 enhances the login experience by displaying available passkeys in the UI, streamlining the authentication process for users with registered credentials.

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.

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.

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.

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.

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.

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.

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.