Creating and Securing JWT Authentication in a Web App

Introduction

JSON Web Tokens (JWT) are a compact and self-contained way of securely transmitting information between parties as a JSON object. JWTs are widely used for authenticating users in web applications. In this tutorial, we’ll build a Node.js and Express backend with JWT authentication.

What is JWT?

JWT (JSON Web Token) is an open standard for securely transmitting information between parties as a JSON object. Each token consists of three parts:

Header: Contains information about the token's type and hashing algorithm.
Payload: Contains user information and claims.
Signature: Verifies the integrity of the token.

Example JWT

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0IiwidXNlcm5hbWUiOiJqb2huZG9lIn0.H6BBiB1y5eXKXvW9bbjT2Rg8Jp4oE4Y5Kxf_sDF7Kzg

Setting Up the Project

Create a new project directory:
```
mkdir jwt-auth-app
cd jwt-auth-app
```
Initialize a new Node.js project:
```
npm init -y
```

Installing Dependencies

Install the necessary dependencies:

npm install express jsonwebtoken bcryptjs dotenv express-validator

express: Web framework for Node.js.
jsonwebtoken: Library for generating and verifying JWTs.
bcryptjs: Library for hashing passwords.
dotenv: For environment variables.
express-validator: For validating input data.

Configuring the Server

Create a basic server setup in server.js:

// server.js
require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());

// Import Routes
const authRoutes = require('./routes/auth');
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Create a .env file for storing environment variables:

PORT=5000
JWT_SECRET=your_jwt_secret_key

Creating User Authentication Routes

Create the routes/auth.js file for authentication routes:

// routes/auth.js
const express = require('express');
const { body, validationResult } = require('express-validator');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const router = express.Router();

const users = []; // In-memory user storage

// Signup Route
router.post(
  '/signup',
  [
    body('username').isLength({ min: 3 }),
    body('password').isLength({ min: 5 })
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);

    users.push({ username, password: hashedPassword });
    res.status(201).json({ message: 'User registered successfully' });
  }
);

// Login Route
router.post(
  '/login',
  [
    body('username').notEmpty(),
    body('password').notEmpty()
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });

    const { username, password } = req.body;
    const user = users.find(u => u.username === username);

    if (!user) return res.status(400).json({ message: 'Invalid credentials' });

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) return res.status(400).json({ message: 'Invalid credentials' });

    const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  }
);

module.exports = router;

Explanation of Routes

Signup Route: Validates and hashes the password before storing the user.
Login Route: Validates credentials, checks password, and issues a JWT token.

Generating JWT Tokens

The jwt.sign method generates a token containing the user’s information.
The JWT_SECRET is used to sign the token, which should be kept secure and private.

const token = jwt.sign({ username }, process.env.JWT_SECRET, { expiresIn: '1h' });

Securing Routes with JWT

To protect routes, create a middleware to verify tokens.

Create middleware/auth.js:

// middleware/auth.js
const jwt = require('jsonwebtoken');

module.exports = function (req, res, next) {
  const token = req.header('Authorization')?.split(' ')[1];
  if (!token) return res.status(401).json({ message: 'Access denied' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (ex) {
    res.status(400).json({ message: 'Invalid token' });
  }
};

Protect Routes in server.js:

Create a protected route that requires a valid token:

// In server.js
const authMiddleware = require('./middleware/auth');

app.get('/api/protected', authMiddleware, (req, res) => {
  res.json({ message: 'This is a protected route', user: req.user });
});

Explanation of Middleware

The middleware checks for the presence of the token in the Authorization header.
If the token is valid, the user’s information is added to the req object, allowing access to the protected route.