startAuthentication() doesn't seem to be working when useBrowserAutofill is set to true

[spencersolberg]

My code for signing in with a passkey is working fine, but I want to support autofill. When I set useBrowserAutofill to true (authentication = await startAuthentication(options, true)) the sign in no longer works. It works just fine when I do authentication = await startAuthentication(options).

After I click my sign in button once again, I get an error saying "Authentication ceremony was sent an abort signal", but I have to attempt to sign in a second time for this error to show at all.

My input field is set as autocomplete="webauthn". I have tested this in both a Chromium browser and Safari.

I can provide more of my code if that would be helpful in diagnosing this.

[MasterKale]

A basic reproduction repo would be great, if you can manage it. Error messages and stack traces would help too if they're available.

[MasterKale]

In WebAuthn only one call to navigator.credentials.create() or .get() can be running at a time. This means that when a user clicks a button to call .get() after the autofill .get() call has been made then the autofill .get() has to be aborted first.

@simplewebauthn/browser handles this all for you - whenever startAuthentication() is called any existing running WebAuthn call is automatically aborted before the new call is made.

Does this help make sense of the behavior you're observing?

The error you're seeing is expected here, and my proposed solution for you is to not show any error message when autofill is true.

[spencersolberg]

Thanks, but I still don't think I'm on the same page.

I can't sign in at all when useBrowserAutofill is true. There's no autofill UI (like shown in the images here) nor any biometric modal popping up from Chromium or Safari.

Here's a better recording that might illustrate the issue better than the previous one.

[MasterKale]

Oh, I see part of the problem now after watching the video. You can't call startAuthentication(..., true); from a button click, it has to be something you call when the page loads/component mounts. Try to refactor your project to call that when the page loads and wire up the call to startAuthentication(...); (without the second argument) in a click handler on the login button.

[spencersolberg]

Thanks, I've tried refactoring my project a little, but I'm still unable to get the autofill UI to pop up. I have a few things I'm still confused on.

1. Do I need to do anything with the call to startAuthentication(..., true); or does it just need to be called on page load? Do I need to keep track of the challenges generated from this call? Or not, if the other call is the one doing the logging in?
2. If I do need said challenges, how should I keep track of those without knowing what user is trying to sign in?

Thank you for all of the help with this.

[MasterKale]

Do I need to do anything with the call to startAuthentication(..., true); or does it just need to be called on page load? Do I need to keep track of the challenges generated from this call? Or not, if the other call is the one doing the logging in?

These docs should answer this for you: https://simplewebauthn.dev/docs/packages/browser#browser-autofill-aka-conditional-ui

If I do need said challenges, how should I keep track of those without knowing what user is trying to sign in?

..And I believe this section of the docs will have insights for you about this:

https://simplewebauthn.dev/docs/advanced/passkeys#remembering-challenges