Challenge mismatch due to differing packages used for base64 encoding/decoding

[titanism]

Hi there - this project uses base64url on server-side and on client-side the demo uses base64-arraybuffer (albeit an outdated version). A new version of base64-arraybuffer is at https://github.com/niklasvh/base64-arraybuffer.

We recommend a few things:

• [ ] Update client-side package used at https://github.com/passport/todos-express-webauthn/blob/master/public/js/base64url.js to use https://github.com/niklasvh/base64-arraybuffer instead
• [ ] Instead of using base64url, use base64-arraybuffer from npm instead
• [ ] Instead of using toBuffer method in existing instances, simply use decode

[titanism]

Actually, ignore this, there's a core bug in the package https://github.com/niklasvh/base64-arraybuffer/issues/42

[titanism]

Perhaps instead use https://github.com/mathiasbynens/base64 everywhere (it's browser-compatible too).

[titanism]

Note that on the client-side, you can use this for converting from base64.decode to ArrayBuffer as required by navigator.credentials.create and navigator.credentials.get:

// <https://gist.github.com/miguelmota/5b06ae5698877322d0ca?permalink_comment_id=3611597#gistcomment-3611597>
// <https://stackoverflow.com/a/31394257>
function toArrayBuffer(buffer) {
  return buffer.buffer.slice(
    buffer.byteOffset,
    buffer.byteOffset + buffer.byteLength
  );
}

[titanism]

Re-opening with a little updated recommendation list (instead of original):

• [ ] Update client-side package used at https://github.com/passport/todos-express-webauthn/blob/master/public/js/base64url.js to use https://github.com/brianloveswords/base64url
• [ ] Instead of using toBuffer method in existing instances, simply use decode
• [ ] On client-side code use toArrayBuffer wrapped around decode per comment above https://github.com/jaredhanson/passport-webauthn/issues/7#issuecomment-1854714594.

[titanism]

This is what we mean by use toArrayBuffer on client-side above:

const credential = await navigator.credentials.create({
  publicKey: {
    rp: {
      name: 'SOME NAME'
    },
    user: {
      id: toArrayBuffer(base64url.toBuffer(window.USER.id)),
      // <https://blog.millerti.me/2023/02/14/controlling-the-name-displayed-during-webauthn-registration-and-authentication/>
      name: window.USER.email,
      displayName: window.USER.email
    },
    // https://chromium.googlesource.com/chromium/src/+/master/content/browser/webauth/client_data_json.md
    challenge: toArrayBuffer(base64url.toBuffer(response.body.challenge)),

[titanism]

Thank you @jaredhanson for all your work here on this project and package. We're implementing it on https://forwardemail.net. Reviewed a lot of the TODO's in the codebase. Happy to help maintain the project and npm releases. We also maintain @koajs, @expressjs, @ladjs, @breejs, @cabinjs, and more. If interested, just grant npm and GitHub access to the "titanism" user, and our team at @forwardemail will help maintain (we use np for releases and changelogs).

[titanism]

Two other issues:

• [ ] This PR needs merged https://github.com/jaredhanson/passport-webauthn/pull/4
• [ ] This also needs a PR https://github.com/jaredhanson/passport-webauthn/issues/5 and merged

[hansemannn]

Noticed this as well. For us, using the native "Buffer.from" instead of the third party util solved it.