DEV Community: ZahrionTech

Base64URL Explained: Encoding Data for URLs and JWTs

ZahrionTech — Mon, 05 Oct 2026 01:37:23 +0000

You've probably seen Base64 before — those long strings of letters, numbers, +, /, and = padding. It works fine in many places, but the moment you drop that string into a URL or a filename, things break. + turns into a space, / looks like a path separator, and = confuses query strings.

That's exactly the problem Base64URL solves.

What is Base64URL?

Base64URL is a variant of Base64 designed for contexts where encoded data must survive inside URLs, filenames, or cookies without any escaping. It keeps the same core idea — representing binary data as printable ASCII text — but swaps out the two problematic characters and drops the padding:

+ becomes -
/ becomes _
= padding is omitted

So where standard Base64 might produce a+b/c==, the Base64URL version of the same data is a-b_c. Same information, safe to paste anywhere.

Where you'll meet it

The most common place developers run into Base64URL is JSON Web Tokens (JWTs). A JWT has three parts separated by dots — header, payload, and signature — and each part is Base64URL-encoded. If you've ever pasted a token into a debugger to inspect its payload, you were decoding Base64URL.

It also shows up in OAuth state parameters, PKCE code challenges, WebAuthn attestation data, and anywhere else binary data needs to travel inside a URL.

Encoding and decoding in JavaScript

The browser's built-in btoa() and atob() only handle standard Base64. Converting to and from Base64URL is just a character swap — here are two small helpers:

// Standard Base64 -> Base64URL
function toBase64Url(base64) {
  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

// Base64URL -> Standard Base64 (then decode)
function fromBase64Url(base64url) {
  let base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
  // Restore the missing padding
  base64 += '='.repeat((4 - base64.length % 4) % 4);
  return atob(base64);
}

// Example: round-trip some text
const encoded = toBase64Url(btoa('hello world')); // "aGVsbG8gd29ybGQ"
console.log(fromBase64Url(encoded));              // "hello world"

The padding trick works because Base64 always operates in groups of four characters, so you can reliably re-add the missing = signs before decoding. That's why Base64URL can safely leave them out.

Decoding a JWT payload

Reading a token's claims is a handy real-world use of this. Take the middle segment of a JWT and run it through fromBase64Url:

function decodeJwtPayload(token) {
  const payload = token.split('.')[1];
  return JSON.parse(fromBase64Url(payload));
}

// Example
const token = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiemFocmlvbiJ9.signature';
console.log(decodeJwtPayload(token)); // { user: 'zahrion' }

One important reminder: decoding a payload is not the same as verifying it. Anyone can read the claims — only checking the signature proves the token is authentic.

Wrapping up

Base64URL is a small but important detail: the same Base64 alphabet, minus the characters that break URLs. If you're debugging tokens, inspecting OAuth flows, or just curious what an encoded string actually says, a quick decoder saves you the manual character-swapping. I keep ToolStack Tools bookmarked for exactly that — it's a free, no-signup Base64 encoder and decoder that runs entirely in your browser, so pasting in a token or an encoded string stays private.

How to Decode Base64 in JavaScript (and a Free Tool That Does It Instantly)

ZahrionTech — Mon, 05 Oct 2026 01:17:04 +0000

Base64 shows up everywhere in JavaScript work: API tokens, data URLs for images, email attachments, even the odd query parameter. The browser ships with built-in functions to handle it, but there's one classic pitfall that trips up beginners and veterans alike. Let's walk through the correct way to decode (and encode) Base64 in JavaScript.

The basics: `atob()` and `btoa()`

Every modern browser (and Node.js) provides two global functions:

btoa() — binary to ASCII: encodes a string into Base64
atob() — ASCII to binary: decodes a Base64 string back into a plain string

const encoded = btoa("Hello, world!");
console.log(encoded); // SGVsbG8sIHdvcmxkIQ==

const decoded = atob(encoded);
console.log(decoded); // Hello, world!

That works great — until you try anything outside plain ASCII.

The UTF-8 pitfall

btoa() only accepts characters in the Latin1 range (code points 0–255). Pass in an emoji or any accented character and it throws an InvalidCharacterError:

btoa("héllo 🌍"); // ❌ throws InvalidCharacterError

And atob() has the mirror problem: it returns a string where each character is a single byte, so multi-byte UTF-8 sequences come back garbled:

atob("aMOpbGxvIPCfjI0="); // ❌ mojibake instead of "héllo 🌍"

The correct way: `TextEncoder` / `TextDecoder`

The fix is to convert through UTF-8 bytes explicitly. Here's a robust pair of helpers:

function base64Encode(str) {
  const bytes = new TextEncoder().encode(str); // string → UTF-8 bytes
  let binary = "";
  bytes.forEach((b) => (binary += String.fromCharCode(b)));
  return btoa(binary);
}

function base64Decode(b64) {
  const binary = atob(b64); // Base64 → raw bytes as string
  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes); // UTF-8 bytes → string
}

base64Encode("héllo 🌍"); // aMOpbGxvIPCfjI0=
base64Decode("aMOpbGxvIPCfjI0="); // héllo 🌍 ✅

A practical example: decoding a JWT payload

JSON Web Tokens store their payload as Base64url-encoded JSON. Here's how to peek at one safely in the browser console:

function decodeJwtPayload(token) {
  const base64url = token.split(".")[1];
  const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
  const binary = atob(base64);
  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
  return JSON.parse(new TextDecoder().decode(bytes));
}

Drop any unsigned JWT into that and you'll get its claims back as an object — handy when debugging API auth.

Don't want to write code every time?

For quick one-off decoding — pasting a token from a log file, checking a data URL, or sanity-checking an API response — it's faster to just use a tool. You can try it instantly at ToolStack Tools, a free Base64 decoder and encoder that runs entirely in your browser with no signup.

Recap

Use btoa() / atob() for plain ASCII strings.
Route through TextEncoder / TextDecoder whenever non-ASCII text is possible.
For JWTs, remember to convert Base64url back to standard Base64 first.

Happy decoding! 🎉

How We Structure a Small-Business CRM Database (Tables You'll Actually Need)

ZahrionTech — Sun, 04 Oct 2026 01:14:00 +0000

Most small-business CRMs fail not from bad code but from a messy database. Here is the minimal table structure we start with for a custom CRM — it covers 90% of businesses.

The core tables

contacts — every person you do business with:

id, full_name, phone, email, company, created_at

deals — one row per potential sale:

id, contact_id, title, value, stage (new / contacted / quoted / won / lost), created_at, updated_at

activities — every call, visit or follow-up:

id, deal_id, type, notes, happened_at, next_follow_up

products — what you sell:

id, name, price

deal_items — which products belong to which deal:

id, deal_id, product_id, quantity

Why this shape works

One contact can have many deals; one deal has many activities. Nothing is duplicated.
The stage column on deals drives the whole sales pipeline view — move a deal from "quoted" to "won" and your reports update themselves.
next_follow_up on activities is the single most valuable field: it powers the daily "who do I call today" list that stops leads going cold.

What we add later

Only when the business asks: user roles, email templates, invoice tables, and integrations with accounting tools. Start small, grow on demand.

We build custom CRM systems like this at ZahrionTech for small businesses in the USA, UK and worldwide — shaped around how the team actually works. More at https://zahriontech.com/

Build a Simple POS Billing Page with HTML, CSS and JavaScript

ZahrionTech — Sun, 04 Oct 2026 00:37:56 +0000

In a small retail shop, a fast billing screen beats a heavy app. Here is a minimal point-of-sale billing page you can run in any browser — no frameworks needed.

1. The layout

Two columns: product buttons on the left, the running bill on the right.

<div class="pos">
  <div class="products">
    <button data-name="Milk" data-price="120">Milk — 120</button>
    <button data-name="Bread" data-price="90">Bread — 90</button>
    <button data-name="Eggs" data-price="250">Eggs — 250</button>
  </div>
  <div class="bill">
    <h2>Bill</h2>
    <ul id="items"></ul>
    <p>Total: <strong id="total">0</strong></p>
    <button onclick="window.print()">Print receipt</button>
  </div>
</div>

2. Adding items with JavaScript

const items = document.getElementById('items');
const totalEl = document.getElementById('total');
let total = 0;

document.querySelectorAll('.products button').forEach(btn => {
  btn.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = `${btn.dataset.name} — ${btn.dataset.price}`;
    items.appendChild(li);
    total += Number(btn.dataset.price);
    totalEl.textContent = total;
  });
});

3. Why this pattern works

Every sale is one click — cashiers never touch a keyboard.
The bill is plain DOM, so window.print() gives you a receipt with zero dependencies.
Prices live in data-* attributes, so the same page works for any product list you render server-side.

4. Going further

A production version adds a product database, discount and tax rules, offline support, and end-of-day sales reports.

At ZahrionTech we build exactly that kind of custom POS software for retail stores, restaurants and salons — this demo is the same idea, production-hardened. More at https://zahriontech.com/