I am implementing FIDO2(WebAuthn) in a Angular application. I have gotten the PublicKeyCredentialCreationOptions object and seccessfullt register. But after calling

let response = await navigator.credentials.create({'publicKey': myPublicKeyCredentialCreationOption })

I try to send the response to the server.. But this fails. When I tried to look at the object in the browser using

console.log(JSON.stringify(response)) 

I get

{}

as output (?..) but when doing

console.log(response) 

I get a object with values in the console... How should the object get serialized to send to the server?

I am implementing FIDO2(WebAuthn) in a Angular application. I have gotten the PublicKeyCredentialCreationOptions object and seccessfullt register. But after calling

let response = await navigator.credentials.create({'publicKey': myPublicKeyCredentialCreationOption })

I try to send the response to the server.. But this fails. When I tried to look at the object in the browser using

console.log(JSON.stringify(response)) 

I get

{}

as output (?..) but when doing

console.log(response) 

I get a object with values in the console... How should the object get serialized to send to the server?

• javascript
• json
• ecmascript-6
• console.log
• webauthn

2 Answers 2

PublicKeyCredential objects contains ArrayBuffer objects that cannot be serialized as JSON. You could base64 encode these values in your Angular app and decode on the server to get the same byte array back. A helper library to do exactly that for WebAuthn exists: https://github./github/webauthn-json

Here's a very simple example for anyone who needs it:

function bufferToBase64url (buffer) {
        
    // modified from https://github./github/webauthn-json/blob/main/src/webauthn-json/base64url.ts
    
    const byteView = new Uint8Array(buffer);
    let str = "";
    for (const charCode of byteView) {
        str += String.fromCharCode(charCode);
    }

    // Binary string to base64
    const base64String = btoa(str);

    // Base64 to base64url
    // We assume that the base64url string is well-formed.
    const base64urlString = base64String.replace(/\+/g, "-").replace(
        /\//g,
        "_",
    ).replace(/=/g, "");
    return base64urlString;
}

... create publicKeyCredentialCreationOptions ...

navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions
}).then(credential => {
    
    // credential created
    // console.log(credential); <-- check what is output to see what you need to call bufferToBase64url(credential.<...>) on down below
    
    // convert credential to json serializeable
    const serializeable = {
        authenticatorAttachment: credential.authenticatorAttachment,
        id: credential.id,
        rawId: bufferToBase64url(credential.rawId),
        response: {
            attestationObject: bufferToBase64url(credential.response.attestationObject),
            clientDataJSON: bufferToBase64url(credential.response.clientDataJSON)
        },
        type: credential.type
    };

    const serialized = JSON.stringify(serializeable);

    console.log(serialized);

}).catch(err => {
        
    // an error occurred
    console.error(err);
});