Conditional UI
Learn everything you need to know about Conditional UI.
Description
To avoid an extra passkey button in login forms, “Conditional UI” is introduced. It lets browsers display all available passkeys in an autofill dropdown that opens directly under the username field of a login form. This dropdown is only displayed if the application knows that appropriate passkeys are available.
If no passkey is available, the user needs to type in the username and password (as the current process is now).
If a passkey is available, it can be selected from the dropdown and the passkey authentication flow via Face ID or fingerprint starts. Basically, passkeys can be “hidden” behind the username field.
Characteristics
User privacy
The application will not be able to distinguish between the user not having a passkey or choosing not to reveal it.
Great UX if no passkey is available
Applications can employ passkeys opportunistically without the fear of generating a poor user experience if there is not an already registered passkey available.
Integration with password-based authentication
To aid in the transition from passwords to passkeys, Conditional UI integrates with password-based authentication and leverages user familiarity with the UX.
Implementation
To add “Conditional UI” to a web application, the autocomplete tag in the login form needs to be adjusted. A “webauthn” token is added to let passkey credentials be displayed in the ongoing request.
<input type="text" id="username-field" autocomplete="webauthn">
The user agent can choose to also display other autofill values besides passkeys. Examples for other combinations can be one of the following:
"username webauthn"
: same as “webauthn”, and also offer autofilling a user’s name"current-password webauthn"
: same as “webauthn”, and also autofill a user’s surname
Read more
To read more about Conditional UI, see GitHub.