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