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:

• The server does not yet handle this information, but I don't think that matters since the credentials need to be created before they can be sent
• Currently testing on https://localhost
• This is taking place on the login page before the user is logged in. The idea is to prompt the user once they hit submit