while using WebAuthn in FF why does navigator.credentials.get() return "DOMException: The request is not allowed by the user agent or the platform..."

Question

I'm trying to implement WebAuthn but while calling navigator.credentials.get() it always returns DOMException: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. after I press the button on the Yubikey even tho it works fine while calling navigator.credentials.create() I'm using firefox 118.0.1 for Ubuntu

here is the content of publicKey I'm calling it with:

$("#loginButton").click(function() {
        const result = navigator.credentials.get({
            publicKey: {
                challenge: new Uint8Array([139, 66, 87, 64, 66, 25, 78, 
                    64, 66, 25, 87, 139, 64, 66, 25, 78]),
                rpId: "localhost",
            }],
                userVerification: "preferred",
            }

I expected it to return a valid promise but it returns an invalid promise and gives out an error in the console

Answer 1

It looks like your PublicKeyCredentialRequestOptions isn't formatted correctly. Try this snippet instead:

navigator.credentials.get({
  publicKey: {
    challenge: new Uint8Array([
      139, 66, 87, 64, 66, 25, 78, 64, 66, 25, 87, 139, 64, 66, 25, 78,
    ]),
    rpId: "localhost",
    userVerification: "preferred",
  },
})

Also try going into your Firefox configurations (about:config) and check the following settings are enabled

• security.webauthn.webauthn is true
• security.webauthn.webauthn_enable_usbtoken is true
• security.webauthn.ctap2 is true