I am trying to get WebAuthn set up on our login page. I am to the part where I need to make the public key using navigator.credentials.create()
. On Chrome, I keep getting the following error: Uncaught (in promise) DOMException: The operation either timed out or was not allowed. See: https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client.
Here is the relevant code:
if (isAvailable) {
// Get challenge from server
fetch("WebAuthn/WebAuthn.ashx", {
method: "POST"
})
.then(res => res.json())
.then(res => {
const publicKeyCredentialCreationOptions = {
challenge: Uint8Array.from(
res.data, c => c.charCodeAt(0)),
rp: {
id: "localhost",
name: "Company Name"
},
authenticatorSelection: {
authenticatorAttachment: "platform",
userVerification: "discouraged"
},
pubKeyCredParams: [{alg: -7, type: "public-key"}],
user: {
id: Uint8Array.from(
"UZSL85T9AFC", c => c.charCodeAt(0)),
displayName: "User",
name: document.getElementById("tbUser").value // taken from aspx form
}
};
const credential = navigator.credentials.create({
publicKey: publicKeyCredentialCreationOptions
});
});
}
Some additional information that may be useful:
Firstly, you can test out using virtual authenticator on Chrome, see image below.
On windows, you can setup Windows Hello as authenticator and test that later.
Now some notes for your problem
I have managed to get it working... You can try and look at my example code and use them, only 2 files
I am still cleaning it up to make it to production code (e.g. using JWTs / Sessions when passing info between front and back end.