base64: Support multi bytes encoding characters (#1122)

* fix(base64): use TextEncoder/TextDecoder for proper UTF-8 encoding

btoa()/atob() treat each character as a single Latin-1 byte, which
silently corrupts non-ASCII characters in SASL credentials. For
example, "ø" (U+00F8) gets encoded as byte 0xF8 instead of the
correct UTF-8 sequence 0xC3 0xB8, causing XMPP authentication
failures for users with non-ASCII usernames (Nordic æøå, German
umlauts, Cyrillic, CJK, etc.).

Use TextEncoder/TextDecoder to properly handle UTF-8 encoding and
decoding before passing to btoa()/atob().

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* slightly modernize impl

---------

Co-authored-by: Øyvind Randa <oyvind.randa@nextgentel.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Sonny Piers <sonny@fastmail.net>

Author: 4 people

package-lock.json

@@ -1,7 +1,26 @@
 export function encode(string) {
-  return globalThis.btoa(string);
+  const encoder = new TextEncoder();
+  const bytes = encoder.encode(string);
+
+  if (typeof bytes.toBase64 === "function") {
+    return bytes.toBase64();
+  }
+
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCodePoint(byte);
+  }
+  return globalThis.btoa(binary);
 }
 
-export function decode(string) {
-  return globalThis.atob(string);
+export function decode(data) {
+  const decoder = new TextDecoder();
+
+  if (typeof Uint8Array.fromBase64 === "function") {
+    return decoder.decode(Uint8Array.fromBase64(data));
+  }
+
+  const binary = globalThis.atob(data);
+  const bytes = Uint8Array.from(binary, (c) => c.codePointAt(0));
+  return decoder.decode(bytes);
 }

packages/base64/index.js

@@ -0,0 +1,115 @@
+import { encode, decode } from "../index.js";
+
+test("encodes ASCII strings", () => {
+  expect(encode("hello")).toBe("aGVsbG8=");
+});
+
+test("decodes ASCII strings", () => {
+  expect(decode("aGVsbG8=")).toBe("hello");
+});
+
+test("round-trips ASCII", () => {
+  const input = "foo\0bar\0baz";
+  expect(decode(encode(input))).toBe(input);
+});
+
+test("round-trips null bytes in SASL PLAIN format", () => {
+  const input = "\0username\0password";
+  expect(decode(encode(input))).toBe(input);
+});
+
+// Nordic characters (æ, ø, å)
+test("round-trips Nordic characters æøå", () => {
+  expect(decode(encode("æ"))).toBe("æ");
+  expect(decode(encode("ø"))).toBe("ø");
+  expect(decode(encode("å"))).toBe("å");
+  expect(decode(encode("Æ"))).toBe("Æ");
+  expect(decode(encode("Ø"))).toBe("Ø");
+  expect(decode(encode("Å"))).toBe("Å");
+});
+
+// German umlauts
+test("round-trips German umlauts äöüß", () => {
+  expect(decode(encode("ä"))).toBe("ä");
+  expect(decode(encode("ö"))).toBe("ö");
+  expect(decode(encode("ü"))).toBe("ü");
+  expect(decode(encode("ß"))).toBe("ß");
+});
+
+// French accented characters
+test("round-trips French accented characters", () => {
+  expect(decode(encode("é"))).toBe("é");
+  expect(decode(encode("è"))).toBe("è");
+  expect(decode(encode("ê"))).toBe("ê");
+  expect(decode(encode("ë"))).toBe("ë");
+  expect(decode(encode("ç"))).toBe("ç");
+  expect(decode(encode("ñ"))).toBe("ñ");
+});
+
+// Cyrillic
+test("round-trips Cyrillic characters", () => {
+  const input = "Привет";
+  expect(decode(encode(input))).toBe(input);
+});
+
+// CJK characters
+test("round-trips CJK characters", () => {
+  expect(decode(encode("日本語"))).toBe("日本語");
+  expect(decode(encode("中文"))).toBe("中文");
+  expect(decode(encode("한국어"))).toBe("한국어");
+});
+
+// Arabic and Hebrew
+test("round-trips Arabic and Hebrew characters", () => {
+  expect(decode(encode("مرحبا"))).toBe("مرحبا");
+  expect(decode(encode("שלום"))).toBe("שלום");
+});
+
+// Emoji (4-byte UTF-8 sequences)
+test("round-trips emoji", () => {
+  expect(decode(encode("🎉"))).toBe("🎉");
+  expect(decode(encode("👨‍💻"))).toBe("👨‍💻");
+  expect(decode(encode("🇳🇴"))).toBe("🇳🇴");
+});
+
+// Mixed scripts
+test("round-trips mixed scripts in a single string", () => {
+  const input = "Hello æøå Привет 日本語 🎉";
+  expect(decode(encode(input))).toBe(input);
+});
+
+// Verifies UTF-8 byte encoding rather than Latin-1
+test("encodes ø as UTF-8 bytes, not Latin-1", () => {
+  // ø (U+00F8) in UTF-8 is [0xC3, 0xB8] → base64 "w7g="
+  // In Latin-1 (btoa) it would be [0xF8] → base64 "+A=="
+  expect(encode("ø")).toBe("w7g=");
+});
+
+test("encodes æ as UTF-8 bytes, not Latin-1", () => {
+  // æ (U+00E6) in UTF-8 is [0xC3, 0xA6] → base64 "w6Y="
+  // In Latin-1 (btoa) it would be [0xE6] → base64 "5g=="
+  expect(encode("æ")).toBe("w6Y=");
+});
+
+test("encodes å as UTF-8 bytes, not Latin-1", () => {
+  // å (U+00E5) in UTF-8 is [0xC3, 0xA5] → base64 "w6U="
+  // In Latin-1 (btoa) it would be [0xE5] → base64 "5Q=="
+  expect(encode("å")).toBe("w6U=");
+});
+
+// Full SASL PLAIN payload with non-ASCII username
+test("SASL PLAIN payload with Nordic username", () => {
+  const payload = "\0øyvindranda@example.com\0session-token";
+  const encoded = encode(payload);
+  expect(decode(encoded)).toBe(payload);
+});
+
+test("SASL PLAIN payload with German username", () => {
+  const payload = "\0müller@example.com\0password";
+  expect(decode(encode(payload))).toBe(payload);
+});
+
+test("SASL PLAIN payload with Cyrillic username", () => {
+  const payload = "\0иван@example.com\0password";
+  expect(decode(encode(payload))).toBe(payload);
+});