FIDO-ERR-5011: Json could not be parsed : Invalid 'request type'

ClientDataJson is a serialized representation of a JSON structure whose message digest (aka hash) is digitally signed by the authenticator in response to the FIDO signing operation. ClientDataJson should be the following JSON structure as stated in the WebAuthn Spec.

Therefore, it is necessary to set the correct value on the browser or the application:

• For PublicKeyCredentialCreationOptions when the navigator.credentials.create method is called during registration.

• For PublicKeyCredentialRequestOptions when the navigator.credentials.get method is called during Authentication on the browser or application.

If the correct values are set, the type in base64 decoded clientDataJson would have type as “webauthn.create” for registration and “webauthn.get” for authentication.

How to set up the options for PublicKeyCredentialCreationOptions

A registration example in Javascript for the Browser is as follows:

const publicKeyCredentialCreationOptions = {
    challenge: Uint8Array.from(
        challengeStringFromServer, c => c.charCodeAt(0)),
    rp: {
        name: "StrongKey demo application",
        id: "strongkey.com",
    },
    user: {
        id: Uint8Array.from(
            "johndoe", c => c.charCodeAt(0)),
        name: "2ipST--mR0l_XeKR1l-sLYR4CgjdvdhrstXaypbnawk",
        displayName: "johndoe",
    },
    pubKeyCredParams: [{alg: -7, type: "public-key"}],
    attestation: "direct"
};

const credential = await navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions
});

Example of clientDataJson generated:

"clientDataJSON":"eyJ0eXBlIjoid2ViYXV0aG4uY3JlYXRlIiwiY2hhbGxlbmdlIjoiQ0UzY2JLRkZVUTNuLW93bUMzTWlwZyIsIm9yaWdpbiI6Imh0dHBzOi8vY2FseXBzby5zdHJvbmdrZXkuY29tIiwiY3Jvc3NPcmlnaW4iOnRydWV9"

If using base64 to decode the value of clientDataJson, it will look something similar to this:

{
	"type": "webauthn.create",
	"challenge": "CE3cbKFFUQ3n-owmC3Mipg",
	"origin": "https://calypso.strongkey.com",
	"crossOrigin": true
}

How to set up the options for PublicKeyCredentialRequestOptions

An Authentication example in Javascript for the Browser is as follows:

const publicKeyCredentialRequestOptions = {
    challenge: Uint8Array.from(
        challengeStringFromServer, c => c.charCodeAt(0)),
    rpId: "strongkey.com",
    allowCredentials: [{
        id: Uint8Array.from(
            credentialId, c => c.charCodeAt(0)),
        type: 'public-key',
        alg: -7,
    }],
    timeout: 60000,
}

const assertion = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions
});

Example of clientDataJson generated:

"clientDataJSON":"eyJ0eXBlIjoid2ViYXV0aG4uZ2V0IiwiY2hhbGxlbmdlIjoiTnhsYUpVODJOV0hSVGwwYkZoaUxTZyIsIm9yaWdpbiI6Imh0dHBzOi8vY2FseXBzby5zdHJvbmdrZXkuY29tIiwiY3Jvc3NPcmlnaW4iOnRydWV9"

If using the base64 to decode the value of clientDataJson, it will look something similar to this:

{
	"type": "webauthn.get",
	"challenge": "NxlaJU82NWHRTl0bFhiLSg",
	"origin": "https://calypso.strongkey.com",
	"crossOrigin": true
}