I see that on some sites (possibly many) the passkeys verification freezes when devtools are opening.
I tried to debug and see that it hangs in navigator.credentials.get.
STR:
Go to https://passkeys-demo.appspot.com/ Enter random username and click Next Enter password and click Next Create a Passkey. Sign out. Select USE ONE BUTTON SIGN-IN INSTEAD Open dev tools. Try to Sign in with passkey.
Expected result:
User successfully logged in - technically navigator.credentials.get returns credentials.
Actual Result:
navigator.credentials.get stucks in infinite loading and nothing happened - no any errors.
My assertion options looks like:
{
"challenge": "K8WztCaAZM5-ST7r198F6UD4iLZ09IINHSiDJBgHHq4",
"allowCredentials": [],
"timeout": 60000,
"userVerification": "preferred",
"rpId": "passkeys-demo.appspot.com"
}
In source code on this demo site the code
options.allowCredentials = []; <---- breakpoint hit here
// Invoke WebAuthn get
const cred = await navigator.credentials.get({
publicKey: options,
// Request a conditional UI
mediation: conditional ? 'conditional' : 'optional'
});
const credential = {}; <---- breakpoint NOT hit here (after removing breakpoint above and after macOS touch ID is completed)