typescript 46 lines · 8 steps

Decoding a JWT to check expiry

Parse a JWT's payload without a library and decide whether it has expired, allowing for clock skew.

Explained by highlit

Intermediate jwt base64url type-guards error-handling authentication

1interface JwtPayload {
exp?: number;
iat?: number;
sub?: string;
[key: string]: unknown;
6}
7 
8function decodeBase64Url(segment: string): string {
const padded = segment.replace(/-/g, "+").replace(/_/g, "/");
const withPadding = padded.padEnd(padded.length + ((4 - (padded.length % 4)) % 4), "=");
if (typeof atob === "function") {
  return decodeURIComponent(
    atob(withPadding)
      .split("")
      .map((c) => "%" + c.charCodeAt(0).toString(16).padStart(2, "0"))
      .join(""),
  );
}
return Buffer.from(withPadding, "base64").toString("utf-8");
20}
21 
22function parseJwtPayload(token: string): JwtPayload {
const parts = token.split(".");
if (parts.length !== 3) {
  throw new Error("Malformed JWT: expected 3 segments");
}
let payload: unknown;
try {
  payload = JSON.parse(decodeBase64Url(parts[1]));
} catch {
  throw new Error("Malformed JWT: payload is not valid JSON");
}
if (typeof payload !== "object" || payload === null) {
  throw new Error("Malformed JWT: payload is not an object");
}
return payload as JwtPayload;
37}
38 
39export function isTokenExpired(token: string, clockSkewSeconds = 30): boolean {
const { exp } = parseJwtPayload(token);
if (typeof exp !== "number" || !Number.isFinite(exp)) {
  throw new Error("JWT is missing a valid 'exp' claim");
}
const nowSeconds = Math.floor(Date.now() / 1000);
return nowSeconds >= exp - clockSkewSeconds;
46}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1JWTs are just base64url-encoded JSON, so you can inspect claims without a crypto library.
2Validate structure at each stage and narrow unknown types before trusting decoded data.
3A clock-skew allowance prevents flapping expiry decisions between machines with slightly different clocks.

Related explainers

ruby

module AppConfig
  module_function
 
  def fetch(key, default: nil, required: false)

Typed environment variable config in Ruby

environment-variables type-coercion configuration

Intermediate 7 steps

ruby

class ThumbnailPool
  def initialize(worker_count: 4, capacity: 100)
    @queue = SizedQueue.new(capacity)
    @running = true

A thread pool for thumbnail jobs in Ruby

concurrency thread-pool bounded-queue

Advanced 7 steps

typescript

import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
 
interface Shortcut {
  key: string;

A keyboard shortcut directive in Angular

directives event-handling keyboard-shortcuts

Intermediate 9 steps

package middleware
 
import (
	"net/http"

Localized validation errors in Gin

middleware internationalization validation

Intermediate 8 steps

typescript

import { Component, computed, signal } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkScrollableModule } from '@angular/cdk/scrolling';

Paginating a CDK table with Angular signals

signals computed-state pagination

Intermediate 9 steps

javascript

async function uploadInBatches(records, uploadFn, { batchSize = 100, concurrency = 3 } = {}) {
  const batches = [];
  for (let i = 0; i < records.length; i += batchSize) {
    batches.push(records.slice(i, i + batchSize));