🔐 JSON Web Token (JWT) - Complete Guide

📌 What is JWT?

JWT (JSON Web Token) is a compact, URL-safe way of representing claims securely between two parties. It is commonly used for authentication and authorization in web applications.

It looks like this:

🎯 Why Use JWT?

• ✅ Stateless authentication — no session storage needed
• ✅ Token is stored in the frontend and sent with each request
• ✅ Works great for SPAs (Single Page Apps) and mobile apps
• ✅ Scalable across multiple servers

📦 How to Install JWT in Node.js

Install the required package:

⚙️ Backend Code (Node.js + Express)

Login API that issues a token

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
app.use(express.json());

const SECRET = 'your_secret_key';

// Dummy login
app.post('/login', (req, res) => {
  const { username, password } = req.body;

  if (username === 'admin' && password === '1234') {
    const token = jwt.sign({ username }, SECRET, { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});

// Middleware to protect routes
function verifyToken(req, res, next) {
  const bearer = req.headers['authorization'];
  const token = bearer && bearer.split(' ')[1];

  if (!token) return res.status(403).json({ message: 'Token required' });

  jwt.verify(token, SECRET, (err, user) => {
    if (err) return res.status(401).json({ message: 'Invalid token' });
    req.user = user;
    next();
  });
}

// Protected route
app.get('/dashboard', verifyToken, (req, res) => {
  res.send(`Hello ${req.user.username}, welcome to your dashboard`);
});

app.listen(3000, () => console.log('Server started'));

🖥️ Frontend Code (Fetch API Example)

Login and access protected data

// Login and save token
fetch('http://localhost:3000/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'admin', password: '1234' })
})
.then(res => res.json())
.then(data => {
  localStorage.setItem('token', data.token);
  alert('Login successful');
});

// Access dashboard
const token = localStorage.getItem('token');

fetch('http://localhost:3000/dashboard', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
.then(res => res.text())
.then(data => console.log(data));

🔍 Structure of a JWT

JWT has 3 parts:

• Header: Token type & algorithm
• Payload: Claims like userId, role, etc.
• Signature: Validates token using a secret

You can decode JWT on jwt.io

📅 When to Use JWT?

• ✅ When building secure REST APIs
• ✅ In Single Page Applications (React, Angular)
• ✅ When you need scalable, stateless auth
• ❌ Don’t use JWT to store sensitive data (like passwords)

✅ Summary

• JWT is a way to safely send data between frontend & backend
• Backend creates the token after login
• Frontend stores it and sends it with each request
• Backend verifies token to allow or reject request