Comment on page
Conditional UI
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.
The application will not be able to distinguish between the user not having a passkey or choosing not to reveal it.
Applications can employ passkeys opportunistically without the fear of generating a poor user experience if there is not an already registered passkey available.
To aid in the transition from passwords to passkeys, Conditional UI integrates with password-based authentication and leverages user familiarity with the UX.
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
Last modified 2mo ago