iOS webauthn error: This request has been canceled by the user

[Xaber20110202]

When the user closes the webauthn pop-up window, it is not possible to recall the pop-up window again, but instead an error is prompted.

The actual error issue is:

[Warning] User gesture is not detected. To use the WebAuthn API, call 'navigator.credentials.create' or 'navigator.credentials.get' within user activated events.

This issue is caused by multiple asynchronous processing operations before using 'navigator.credentials.create' or 'navigator.credentials.get'.

Before using 'navigator.credentials.create' or 'navigator.credentials.get', only up to one asynchronous process (including requests) is allowed.

Troubleshooting this issue took over a day, so I hope this helps others.

Reference link: https://fy.blackhats.net.au/blog/2020-08-12-user-gesture-is-not-detected-using-ios-touchid-with-webauthn-rs/

[MasterKale]

Safari is one of the most finicky browsers to use WebAuthn in. You get one "freebie" call per page load that enables something like calling WebAuthn on page load even if the gesture is "indirect", but then you have to try and remove any indirect execution of call handler logic for any buttons the user might click to launch WebAuthn.

I left a note here with a bit more info but nothing too actionable unfortunately:

https://simplewebauthn.dev/docs/advanced/safari-browser

After that the best advice I have is try to set up your site to call WebAuthn's (or SimpleWebAuthn's) methods as immediately as possible in whatever click handler you assign to your buttons. If too much happens between the click and the invocation of WebAuthn then Safari will generaly pitch a fit like the one you described.

Beyond this vague advice I'd suggest posting some actual code and/or a recreation that mimics how you're trying to call WebAuthn, and from there something might stand out that could be improved to help deal with the issue...

[Xaber20110202]

PS: iOS Chrome has the same problem. What we need to do is troubleshoot the function calls at each step and reduce the asynchronous await processing to just one.

[P4sca1]

Testing my Passkey / WebAuthn implementation on Safari 17.2.1 revealed the following:

• Using a wrapper around fetch() does not work. In my specific case this was ofetch, which provides a unified fetch API across Node.js and the browser (but wraps the native browser fetch). You have to call the native fetch directly.
• It is allowed to await other promises / make fetch requests (even using the wrapper), after the call to startAuthentication. Before, you should only make a single asynchronous call via the native fetch.
• Conditional UI is also limited by the User gesture requirement. This is normally not a problem due to the "freebie" call per page you get since Safari 16. However, when using an SPA (e.g. vue-router, react-router, ...), it is not possible to initiate a Conditional UI twice, without hard reloading the page. In my case, this happens when the user opens the login page, switches to another page, and then opens the login page a 2nd time.
• Using session replay scripts (e.g. Sentry Session Replay, LogRocket, ...) also interferes with user gesture detection. Maybe because they also wrap the native fetch?

[hwhmeikle]

@P4sca1 Thanks for sharing this. We had the same issue where we were experiencing a huge amount of flakiness when trying to call startAuthentication/startRegistration through a click handler. We were constantly getting the user gesture not detected error.

We were using ky to fetch the options that were passed in, but changing it to use the native fetch completely fixed it.

It's great thats its in the docs now.