Search code examples
javascriptauthenticationwebwebauthn

WebAuthn: Can't create public key. Promise is rejected

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
Solution

  • Firstly, you can test out using virtual authenticator on Chrome, see image below.

    enter image description here

    On windows, you can setup Windows Hello as authenticator and test that later.

    Now some notes for your problem

    1. localhost does not need https
    2. the expected origin specified if using only http, can be http://localhost<:port if not 80>
    3. Need to check the format sent, is it arraybyte or not

    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.