Base64 to Text JS: Decoding in JavaScript Correctly

atob and its blind spot

atob(b64) returns a binary string where each character is one byte. For pure ASCII content that is already the text you want. For anything else it is not:

atob('aGVsbG8=');    // 'hello'      — fine
atob('Y2Fmw6k=');    // 'café'      — wrong, bytes shown as Latin-1

The mangled output is the signature of this bug: correct bytes, wrong interpretation.

The correct decode

Convert the binary string to a byte array, then decode those bytes as UTF-8:

const fromBase64 = (b64) =>
  new TextDecoder().decode(
    Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))
  );

fromBase64('Y2Fmw6k=');   // 'café'

atob throws InvalidCharacterError on malformed input, so wrap it in try/catch whenever the string comes from a user, a URL or an API.

base64url

JWT segments and URL-safe payloads use a different alphabet and usually no padding. Translate before decoding:

const fromBase64Url = (s) => {
  const b64 = s.replace(/-/g, '+').replace(/_/g, '/');
  return fromBase64(b64.padEnd(b64.length + ((4 - (b64.length % 4)) % 4), '='));
};

Node.js

Node has no atob need — Buffer handles both directions and both alphabets, with the encoding stated explicitly:

Buffer.from('Y2Fmw6k=', 'base64').toString('utf8');   // 'café'
Buffer.from('café', 'utf8').toString('base64');       // 'Y2Fmw6k='
Buffer.from(token, 'base64url').toString('utf8');     // Node 16+