I have the following basic HTML document that initializes WebAuthn's conditional UI: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action=""> <input type="text" autocomplete="username webauthn" /> <button>Submit</button> </form> <script> navigator.credentials .get({ publicKey: { challenge: new Uint8Array([1, 2, 3, 4]), allowCredentials: [], }, mediation: 'conditional', }) .then(console.log) .catch(console.error); </script> </body> </html> ``` When I load the page in Safari, conditional UI seems to work fine every time - I get prompted to log in with a saved passkey when the input receives focus. However when I inspect the page from my macOS device, I see weird alternating behavior: ## Reload 1 - A warning that, "User gesture is not detected. To use the WebAuthn API, call 'navigator.credentials.create' or 'navigator.credentials.get' within user activated events." ## Reload 2 - A warning saying, "User gesture is not detected. To use the WebAuthn API, call 'navigator.credentials.create' or 'navigator.credentials.get' within user activated events." - An error from the `.catch()` handler on the `.get()` Promise saying, "NotAllowedError: Operation failed." These two error states reliably alternate with each other in this order, no matter how many times I reload the page: - Reload 1 - Reload 2 - Reload 1 - Reload 2 - etc... To reiterate, the page seems to function fine to the end user, but the is making it impossible to truly understand whether Conditional UI is working or not.
Created attachment 464873 [details] The page seems to work fine to the end user
Created attachment 464874 [details] Console output from Reload 1
Created attachment 464875 [details] Console output from Reload 2
It turns out the "User gesture is not detected" warning stops appearing if I tap the reload icon on Safari on the iPhone. I was often Cmd+R'ing the page from the remote Web Inspector displayed on my macOS device. So to clarify, this issue is specifically about the "NotAllowedError: Operation failed" being thrown consistently on every other page load despite nothing changing in the code.
Experimenting a bit more, if I actually go through with the conditional UI prompt on each page load the subsequent page reload works fine - no error, conditional UI promise resolves with a response from `.get()`. But if I reload the page multiple times then I start to see this alternating pattern of "error -> no error -> error -> no error..." And when I don't see the `NotAllowedError` in the console on page load, conditional UI resolves as expected after selecting a passkey. When I reload the page and see `NotAllowedError`, an attempt to complete conditional UI neither resolves nor rejects the promise (I guess because the `NotAllowedError` already rejected the promise?)
*** This bug has been marked as a duplicate of bug 250589 ***