How to Encode and Decode Base64 Text

Encoding and decoding standard text as Base64 is straightforward in most programming languages. However, if your text contains special Unicode symbols, accented letters, or emojis, standard encoding functions can fail.

In this guide, we'll explain how to safely encode and decode text to and from Base64.

Standard JavaScript Encoding (atob/btoa)

JavaScript provides built-in functions:

• btoa(): Binary-to-ASCII (Encoding)
• atob(): ASCII-to-Binary (Decoding)

// Encode text
const encoded = btoa("Hello World"); // SGVsbG8gV29ybGQ=

// Decode text
const decoded = atob("SGVsbG8gV29ybGQ="); // Hello World

The Unicode Emoji Trap

The standard btoa function expects 8-bit characters. If you pass a string containing Unicode characters (like emojis or special symbols), it will throw a Character out of range exception.

Fails in JavaScript:

btoa("Hello 🚀"); // Throws DOMException!

To encode Unicode safely, you must convert the string to a UTF-8 byte array using TextEncoder first, and then encode those bytes into Base64:

// Unicode safe encoding
const bytes = new TextEncoder().encode("Hello 🚀");
const base64 = btoa(String.fromCharCode(...bytes)); // SGVsbG8g8J+agQ==

Safe Unicode Decoding

To decode safely, convert the Base64 string back to bytes using TextDecoder:

// Unicode safe decoding
const binary = atob("SGVsbG8g8J+agQ==");
const bytes = new Uint8Array([...binary].map(char => char.charCodeAt(0)));
const text = new TextDecoder().decode(bytes); // Hello 🚀

This handles all Unicode symbols and emojis correctly, preventing application crashes.