2

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
xHoudek
  • 115
  • 1
  • 10
  • I am getting the same issue. The RP ID is correct, I am on https (self signed cert), everything checks out. Just not sure what happened. Same problem on edge browser. – Aaron Gong Aug 14 '21 at 04:03
  • It can get a response if I enable and add an authenticator in the Chrome Web Tools. – Aaron Gong Aug 14 '21 at 05:24
  • It also works if I use a mobile phone chrome browser... – Aaron Gong Aug 14 '21 at 05:31
  • @AaronGong what authenticator did you add and where? Not sure if I need to add a certificate to get this working or what. If you could talk about how you got the response that would be super helpful, thank you! – xHoudek Aug 16 '21 at 13:43
  • Hi, it is a virtual authenticator environment found in Chrome DEV tools. I will add it to the answer – Aaron Gong Aug 17 '21 at 23:45

2 Answers2

5

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.

If you still have problems, we can discuss here... https://github.com/ais-one/cookbook/discussions

Aaron Gong
  • 977
  • 7
  • 18
  • 1
    This worked for me. I think the problem was that I don't have any physical authentication method on my device (Windows Hello is disabled). Adding the authenticator fixed that. Thanks! – xHoudek Aug 18 '21 at 18:05
0

In my case, my supported public key algorithms list was too narrow to support platform authenticator attachment. Now I use this list of algs, and it's working as it should.

{"pubKeyCredParams": [
{
  "type": "public-key",
  "alg": -7
},
{
  "type": "public-key",
  "alg": -8
},
{
  "type": "public-key",
  "alg": -36
},
{
  "type": "public-key",
  "alg": -37
},
{
  "type": "public-key",
  "alg": -38
},
{
  "type": "public-key",
  "alg": -39
},
{
  "type": "public-key",
  "alg": -257
},
{
  "type": "public-key",
  "alg": -258
},
{
  "type": "public-key",
  "alg": -259
}]}
kpostekk
  • 522
  • 5
  • 6