Introduction to Conditional UI and Passkeys

With the increasing adoption of passkeys and the WebAuthn protocol, authentication has become more secure and user-friendly. A key advancement in this field is the integration of Conditional UI, which enhances the login process by upgrading traditional passwords with advanced passkey authentication. This approach ensures a seamless transition and better user experience, respecting user privacy and offering a smooth shift from passwords to passkeys​​​​.

Read the full technical blog post here

Understanding Conditional UI

Conditional UI is a novel mode for passkey login processes. It displays passkeys in the user interface only when a user has a discoverable credential (resident key) registered with the relying party and stored in their device’s authenticator. This results in a user interface where passkeys and passwords coexist, simplifying the login process and ensuring users aren’t overwhelmed with options. The foundation of Conditional UI is built on respect for user privacy, great user experience, and a smooth transition from passwords to passkeys​​.

Advantages and Challenges of Conditional UI

The benefits of Conditional UI include streamlined authentication, reduced user errors, enhanced user satisfaction, simple frontend integration, and support for passwordless and usernameless logins. However, it also poses challenges, such as a learning curve for developers and dependency on device and browser compatibility. Additionally, there is currently no support for using Conditional UI in the account or passkey creation process, although discussions are ongoing about its potential inclusion​​.

How Conditional UI Works

Conditional UI involves a series of steps, starting with a check for availability on the client’s browser and device. It then proceeds through a sequence of retrieving PublicKeyCredentialRequestOptions, initiating local authentication, showing the autofill selection, user authentication, and finally, sending the authenticator response to the server. Successful verification leads to user login and redirection​​.

Technical Requirements for Implementing Conditional UI

To implement Conditional UI effectively, certain technical requirements must be met. These include using discoverable credentials, credential filtering, ensuring browser compatibility, enabling JavaScript, testing for Conditional UI availability, having an HTML input field on the web page, and removing timeout protocols​​.

We hope this this overview provides helped to get a better understanding into the workings of Conditional UI (Passkeys Autofill). For a deeper look and to explore more details, have a look at the full blog article here.