Information Security 9 min read

Understanding JSON Web Token (JWT): Structure, Creation, and Signature

This article explains the lightweight JWT specification, demonstrates how to build a token with header, payload, and signature using Base64 encoding and Node.js, and discusses its security properties, verification process, and suitable use cases for web authentication.

Top Architect
Top Architect
Top Architect
Understanding JSON Web Token (JWT): Structure, Creation, and Signature

JSON Web Token (JWT) is a lightweight specification that enables secure and reliable information exchange between users and servers.

Consider a scenario where user A follows user B; the system sends an email to B with a link like https://your.awesome-app.com/make-friend/?from_user=B&target_user=A . The URL requires B to be logged in, which can be simplified using JWT.

JWT consists of three parts: a header , a payload , and a signature .

Payload

The payload is a JSON object that carries the data needed by the receiving server. An example payload is:

{
    "iss": "John Wu JWT",
    "iat": 1441593502,
    "exp": 1441594722,
    "aud": "www.example.com",
    "sub": "[email protected]",
    "from_user": "B",
    "target_user": "A"
}

The first five fields (iss, iat, exp, aud, sub) are defined by the JWT standard.

iss : token issuer

sub : subject (the user the token is about)

aud : audience (the party that receives the token)

exp : expiration time (Unix timestamp)

iat : issued‑at time

Base64‑encoding the JSON payload yields:

eyJpc3MiOiJKb2huIFd1IEpXVCIsImlhdCI6MTQ0MTU5MzUwMiwiZXhwIjoxNDQxNTk0NzIyLCJhdWQiOiJ3d3cuZXhhbXBsZS5jb20iLCJzdWIiOiJqcm9ja2V0QGV4YW1wbGUuY29tIiwiZnJvbV91c2VyIjoiQiIsInRhcmdldF91c2VyIjoiQSJ9

In Node.js you can generate this string with the base64url package:

var base64url = require('base64url')
var header = {
    "from_user": "B",
    "target_user": "A"
}
console.log(base64url(JSON.stringify(header)))
// output: eyJpc3MiOiJKb2huIFd1IEpXVCIsImlhdCI6MTQ0MTU5MzUwMiwiZXhwIjoxNDQxNTk0NzIyLCJhdWQiOiJ3d3cuZXhhbXBsZS5jb20iLCJzdWIiOiJqcm9ja2V0QGV4YW1wbGUuY29tIiwiZnJvbV91c2VyIjoiQiIsInRhcmdldF91c2VyIjoiQSJ9

Note: Base64 is an encoding, not encryption, so the data can be decoded back to its original form.

Header

The header describes the token type and signing algorithm. Example header:

{
  "typ": "JWT",
  "alg": "HS256"
}

After Base64 encoding, the header becomes:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

Signature

The signature is created by concatenating the Base64‑encoded header and payload with a period, then signing the result with a secret key (e.g., mystar ) using the algorithm specified in the header:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0

Using HS256 and the secret mystar , the signature is:

rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM

The complete JWT is the three parts joined by periods:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0.rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM

Embedding this token in the original URL yields a login‑free friend‑adding link:

https://your.awesome-app.com/make-friend/?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcm9tX3VzZXIiOiJCIiwidGFyZ2V0X3VzZXIiOiJBIn0.rSWamyAYwuHCo7IFAgd1oRpSP7nzL7BF5t7ItqpKViM

Two common questions arise: what is the purpose of the signature, and does Base64 expose the information? The signature ensures that any modification to the header or payload will produce a different signature, and without the secret key an attacker cannot forge a valid token. Because Base64 is reversible, sensitive data should never be placed in the payload; only non‑secret identifiers such as user IDs are appropriate.

JWTs are suitable for transmitting non‑sensitive data in web applications, such as friend‑adding actions, order processing, and are widely used for authentication, authorization, and single‑sign‑on scenarios.

Node.jssecurityauthenticationJWTTokenBase64
Top Architect
Written by

Top Architect

Top Architect focuses on sharing practical architecture knowledge, covering enterprise, system, website, large‑scale distributed, and high‑availability architectures, plus architecture adjustments using internet technologies. We welcome idea‑driven, sharing‑oriented architects to exchange and learn together.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.