I am using an input for users to log in using email or phone. However, recently added an initial support for passkeys. I want to use the Conditional UI so users are not bothered if no passkeys are stored for this site. To use that, I need an input with autocomplete attribute set to webauthn – as required for the browserautofill property to use conditional UI.
However, the browser -I believe- does not recognize the webauthn autocomplete value having 3 autocomplete values in total
Like this:
<input type="text" autocomplete="email tel-national webauthn" />
It works with autocomplete="email webauthn" or autocomplete="tel-national webauthn".
It only happens for my desktop browsers (Arc and Google Chrome)
Arc
Chromium Engine Version 131.0.6778.140
However, it works on Chrome mobile, the browser recognize the input and presents my passkey options
Tried with only 2 values.
I want to keep the email tel-national attributes as there are more users enrolled with them than passkey.
I would rather display the password selection modal than the dropdown of user autofill, but only the later supports Conditional UI and, thus, I use the ONLY input I have on this page.
The desired behavior would be to still let the users be suggested with emails and phones and only be suggested with passkey options if existing credentials (Conditional UI). Not sure if I remove email or tel-national I could still suggest both for users without passkeys.