Order of 'webauthn' matters in the input fields

[Jorgu5]

Describe the issue

Per the SimpleWebAuthn documentation for enabling conditional UI, the autocomplete input attribute should work regardless of the order in which "webauthn" is placed. Whether it's "username webauthn" or "webauthn username," it should function correctly. However, this isn't the case with Chrome across all versions. I spent an entire day deep-diving into debugging this issue, only to find it works as expected on Safari but not on Chrome.

Reproduction Steps

1. To replicate the issue, go to the example project and simply switch the order of "webauthn" in the autocomplete attribute.
2. Open the project in Chrome and interact with the input field in question.

Expected behavior

The conditional UI should operate flawlessly regardless of whether "webauthn" precedes or follows "username" in the autocomplete attribute.

Dependencies

• Browser: (e.g. Chrome all versions since the Conditional UI was introduced, tested on BrowserStack)

SimpleWebAuthn Libraries

$ npm list --depth=0 | grep @simplewebauthn
├── @simplewebauthn/browser@8.0.2
├── @simplewebauthn/typescript-types@8.0.0
# ...

[MasterKale]

Interesting development, I wouldn't expect it to matter since the WebAuthn spec doesn't mandate the autofill tokens be in any specific order:

If options.mediation is conditional and the user interacts with an input or textarea form control with an autocomplete attribute whose value contains a "webauthn" autofill detail token,

https://w3c.github.io/webauthn/#GetAssn-ConditionalMediation-Interact-FormControl

I tried recreating in Chrome Beta 188, here's what I observed:

• autocomplete="webauthn": autofill appeared
• autocomplete="username webauthn": autofill appeared
• autocomplete="webauthn username": autofill did not appear

Would you consider logging this as an issue with the Chromium project instead? I think this should really be tackled there. Either way I'll bring this up with some Google people I'm in touch with and see what they think too.

[MasterKale]

Hello @Jorgu5, I've asked around and it turns out there is a specific order for the tokens, it's just specified in WHATWG instead:

https://html.spec.whatwg.org/#autofill-detail-tokens

The "webauthn" token is #4, after #2 which is the typical "username" or "password" tokens. Which means only the following orders should be correct:

• autocomplete="username webauthn"
• autocomplete="password webauthn"
• autocomplete="webauthn"

I'll have to tweak the detection logic in startAuthentication() accordingly.

[MasterKale]

BTW I also created an issue in the WebAuthn spec related to this, as I think this should be something that could be understood just by reading the WebAuthn spec:

https://github.com/w3c/webauthn/issues/1982

[MasterKale]

The newly-published @simplewebauthn/browser@8.3.1 will now require that the "webauthn" autocomplete value be either the only value, or the last value when multiple tokens are present ✌️

[MasterKale]

I also updated the docs accordingly:

https://simplewebauthn.dev/docs/packages/browser#browser-autofill-aka-conditional-ui