Webauthn Academy

Webauthn Browser APIs

This section is dedicated to the two most important JavaScript browser APIs in the Webauthn workflow, navigator.credentials.create and navigator.credentials.get, their usage, configurations, and differences across browsers and platforms. On top of that, you will learn about Uint8Array, atob, and URL-safe Base64 encoding.

All code snippets in this section will be using TypeScript syntax. If you don’t how to read and transform TypeScript code, you may wish to improve your Web development skills before implementing a Webauthn workflow on your website.

Convert URL-safe Base64 to Uint8Array #

export const URLBase64ToUint8Array = (data: string): Uint8Array => {
  return Uint8Array.from(
    window.atob(data.replaceAll("-", "+").replaceAll("_", "/")),
    (c) => c.charCodeAt(0),
  );
};

Convert an ArrayBuffer to URL-safe Base64 #

export const bufferToURLBase64 = (data: ArrayBuffer): string => {
  const bytes = new Uint8Array(data);
  let str = "";
  for (const charCode of bytes) {
    str += String.fromCharCode(charCode);
  }
  return window.btoa(str)
    .replaceAll("+", "-")
    .replaceAll("/", "_")
    .replaceAll("=", "");
};