Middleware in Express.js

# CHAPTER 7

Middleware in Express.js #

1. Introduction #

2. Learning Objectives #

• Define the concept and anatomy of an Express Middleware function.

• Understand the critical importance of the next() function.

• Implement Global Middleware using app.use().

• Implement Route-Specific Middleware (e.g., protecting a route).

3. Beginner-Friendly Explanation #

• The Customer: The incoming HTTP Request.

• The Dance Floor: Your API Route Logic (res.json(...)).

• The Bouncers: The Middleware.

Before the customer can reach the dance floor, they must walk down a hallway lined with bouncers.

1. 1. Bouncer 1 (Logger): Writes down the customer's name and arrival time in a ledger, then says "Go ahead" (next()).

1. 2. Bouncer 2 (Security): Checks if the customer is carrying anything dangerous. If safe, says "Go ahead" (next()).

1. 3. Bouncer 3 (Authentication): Checks if the customer has a VIP wristband. If they do, they enter the dance floor. If they don't, the bouncer physically throws them out the front door (res.status(401)), and they never reach the dance floor.

4. Anatomy of a Middleware Function #

const myFirstMiddleware = (req, res, next) => {
    console.log("A request just arrived!");
    
    // CRITICAL: You MUST call next() to pass the request to the next bouncer/route.
    // If you forget next(), the request hangs forever!
    next(); 
};

5. Global Middleware #

Let's build a Custom Logger:

const express = require('express');
const app = express();

// Custom Global Middleware
const requestLogger = (req, res, next) => {
    const time = new Date().toLocaleTimeString();
    // Logs: "[10:05 AM] GET request made to /api/users"
    console.log(`[${time}] ${req.method} request made to ${req.url}`);
    
    next(); // Pass control to the next function
};

// Apply it globally
app.use(requestLogger);

app.get('/api/users', (req, res) => {
    res.send("Here are the users");
});

6. Route-Specific Middleware #

Let's build a Fake Authentication Middleware:

const checkApiKey = (req, res, next) => {
    const userKey = req.query.api_key;
    const secretKey = "super_secret_123";

    if (userKey === secretKey) {
        // Success! They have the wristband. Let them pass.
        next();
    } else {
        // Failure! Throw them out. DO NOT call next().
        res.status(401).json({ error: "Unauthorized! Invalid API Key." });
    }
};

// Apply it ONLY to this specific route by placing it in the middle
app.get('/api/dashboard', checkApiKey, (req, res) => {
    // This code ONLY executes if next() was called in the middleware!
    res.json({ message: "Welcome to the secret VIP dashboard." });
});

*To test this: Visiting /api/dashboard fails with 401. Visiting /api/dashboard?apikey=supersecret_123 succeeds with 200.*

7. Built-in Express Middleware #

8. Backend Workflow: Modifying the Request #

9. Best Practices #

• Order of Execution: In Express, order matters absolutely. Express reads your app.js file from top to bottom. If you define a Route *above* your Global Logger Middleware, the Request hits the route, sends the Response, and the Logger is entirely ignored! Always put app.use() Global Middlewares at the very top of your file.

10. Common Mistakes #

• Forgetting next(): If your custom middleware doesn't end with res.json() (throwing an error) or next() (passing it on), the request becomes trapped in purgatory. The client's browser will spin indefinitely.

11. Exercises #

1. 1. Explain the "Bouncer Analogy" and how the next() function operates within an Express application. What happens if next() is never called?

12. Coding Challenges #

• Challenge: Write a custom route-specific middleware called checkAge. It should check a query string ?age=X. If the age is less than 18, it should return a 403 Forbidden status with a JSON error message. Apply this middleware to a route named /api/restricted-content.

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the Request-Response lifecycle in Express, specifically detailing how multiple middleware functions (a "middleware stack") are executed in sequence.

• Q: Provide a real-world scenario where a custom middleware would modify the req object before calling next(), and explain how the subsequent route utilizes that modification.

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #