What is Conditional UI in WebAuthn?

What is Conditional UI?#

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.

---

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 CIAM teams running consumer authentication at scale. We help you see what IDP logs and generic analytics tools can't: which devices, OS versions, browsers and credential managers support passkeys, why enrollments don't turn into logins, where the WebAuthn flow fails and when an OS / browser update silently breaks login, all without replacing Okta, Auth0, Ping, Cognito or your in-house IDP. Two products: Corbado Observe layers observability for passkeys and any other login method. Corbado Connect adds managed passkeys with analytics built in (alongside your IDP). VicRoads runs passkeys for 5M+ users with Corbado (+80% passkey activation). Talk to a Passkey Expert →