Prints output from WebAuthn calls

WebAuthnPrintOutput.js

function printHex(msg, buf) {
    // if the buffer was a TypedArray (e.g. Uint8Array), grab its buffer and use that
    if (ArrayBuffer.isView(buf) && buf.buffer instanceof ArrayBuffer) {
        buf = buf.buffer;
    }

    // check the arguments
    if ((typeof msg != "string") ||
        (typeof buf != "object")) {
        console.log("Bad args to printHex");
        return;
    }
    if (!(buf instanceof ArrayBuffer)) {
        console.log("Attempted printHex with non-ArrayBuffer:", buf);
        return;
    }

    // print the buffer as a 16 byte long hex string
    var arr = new Uint8Array(buf);
    var len = buf.byteLength;
    var i;
    var str = "";
    console.log(msg, `(${buf.byteLength} bytes)`);
    for (i = 0; i < len; i++) {
        var hexch = arr[i].toString(16);
        hexch = (hexch.length == 1) ? ("0" + hexch) : hexch;
        str += hexch.toUpperCase() + " ";
        if (i && !((i + 1) % 16)) {
            console.log(str);
            str = "";
        }
    }

    // print the remaining bytes
    if ((i) % 16) {
        console.log(str);
    }
}

var createCredentialDefaultArgs = {
    publicKey: {
        // Relying Party:
        rp: {
            name: "Acme",
            icon: "https://www.w3.org/StyleSheets/TR/2016/logos/W3C"
        },

        // User:
        user: {
            id: new Uint8Array(16),
            name: "john.p.smith@example.com",
            displayName: "John P. Smith",
            icon: "https://pics.acme.com/00/p/aBjjjpqPb.png"
        },

        pubKeyCredParams: [{
            type: "public-key",
            alg: -7,
        }],

        attestation: "direct",

        timeout: 60000,

        challenge: new Uint8Array([
            0x8C, 0x0A, 0x26, 0xFF, 0x22, 0x91, 0xC1, 0xE9, 0xB9, 0x4E, 0x2E, 0x17, 0x1A, 0x98, 0x6A, 0x73,
            0x71, 0x9D, 0x43, 0x48, 0xD5, 0xA7, 0x6A, 0x15, 0x7E, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0F, 0xEF,
            0x79, 0x50, 0x68, 0x71, 0xDA, 0xEE, 0xEE, 0xB9, 0x94, 0xC3, 0xC2, 0x15, 0x67, 0x65, 0x26, 0x22,
            0xE3, 0xF3, 0xAB, 0x3B, 0x78, 0x2E, 0xD5, 0x6F, 0x81, 0x26, 0xE2, 0xA6, 0x01, 0x7D, 0x74, 0x50
        ]).buffer
    }
};

var getCredentialDefaultArgs = {
    publicKey: {
        timeout: 60000,
        // allowCredentials: [newCredential]
        challenge: new Uint8Array([
            0x8C, 0x0A, 0x26, 0xFF, 0x22, 0x91, 0xC1, 0xE9, 0xB9, 0x4E, 0x2E, 0x17, 0x1A, 0x98, 0x6A, 0x73,
            0x71, 0x9D, 0x43, 0x48, 0xD5, 0xA7, 0x6A, 0x15, 0x7E, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0F, 0xEF,
            0x79, 0x50, 0x68, 0x71, 0xDA, 0xEE, 0xEE, 0xB9, 0x94, 0xC3, 0xC2, 0x15, 0x67, 0x65, 0x26, 0x22,
            0xE3, 0xF3, 0xAB, 0x3B, 0x78, 0x2E, 0xD5, 0x6F, 0x81, 0x26, 0xE2, 0xA6, 0x01, 0x7D, 0x74, 0x50
        ]).buffer
    },
};

((async function() {
    var cred = await navigator.credentials.create(createCredentialDefaultArgs);
    console.log("NEW CREDENTIAL", cred);
    printHex("rawId", cred.rawId);
    printHex("attestationObject", cred.response.attestationObject);
    printHex("clientDataJSON", cred.response.clientDataJSON);

    var idList = [{
        id: cred.rawId,
        transports: ["usb", "nfc", "ble"],
        type: "public-key"
    }];
    getCredentialDefaultArgs.publicKey.allowCredentials = idList;
    var assertion = await navigator.credentials.get(getCredentialDefaultArgs);
    console.log("ASSERTION", assertion);
    printHex("clientDataJSON", assertion.response.clientDataJSON);
    printHex("authenticatorData", assertion.response.authenticatorData);
    printHex("signature", assertion.response.signature);
    printHex("userHandle", assertion.response.userHandle);
})())
.then(() => console.log("done"))
.catch((err) => console.log("ERROR:", err));