JWT Authentication

# JWT Authentication

Welcome to Chapter 24! In the last chapter, we successfully verified a user's password. But there is a massive problem: HTTP is a stateless protocol.

This means the server has amnesia. It treats every single request as completely independent. If a user logs in, the server says "Success!". But 1 second later, if the user requests their private /dashboard, the server says "Who are you?".

To solve this, we give the user a digital ID card after they log in. Every time they make a new request, they show this ID card to the server. The modern standard for this ID card is a JSON Web Token (JWT).

---

1. Introduction #

A JSON Web Token (JWT) is a long, scrambled string of characters generated by your server.

The Workflow:

1. 1. Login: User sends email/password. Server verifies with bcrypt.

1. 2. Issue Token: Server uses the jsonwebtoken package to generate a token containing the user's database id. It sends this token back to the client.

---

4. Syntax Explanation #

Let's see how to generate a token inside our Login route.

```javascript id="ch24-syntax-1" // 1. Require the package const jwt = require('jsonwebtoken');

// (Inside your login route, AFTER bcrypt.compare is successful)

// 2. Define the payload (the data you want to embed in the token) const payload = { userId: user._id };

// 3. Define your secret key const SECRET = "mySuperSecretPassword123";

// 4. Sign the token // Arg 1: Payload, Arg 2: Secret, Arg 3: Expiration time const token = jwt.sign(payload, SECRET, { expiresIn: '1h' });

// 5. Send the token back to the user res.status(200).json({ message: "Login successful", token: token });

**Output Explanation:**
The client receives a response containing a token that looks something like: `eyJhbGciOiJIUzI1Ni...`. This token will automatically expire and become invalid after 1 hour.

---

## 5. Real-world Examples

**Theme Parks:**
A JWT is exactly like a wristband at a theme park.
- **Login:** You pay at the front gate (provide email/password).
- **Issue Token:** The cashier puts a wristband on you (JWT).
- **Protected Routes:** You walk up to a roller coaster. The attendant (Middleware) looks at your wristband. If it's real and hasn't expired, you get to ride. You don't have to pay (log in) again for every single ride!

---

## 6. Multiple Code Examples

### Example 1: The Protected Route
Let's create a route that only logged-in users can access.

javascript id="ch24-code-1" // We apply our custom 'verifyToken' middleware (which we write next) app.get('/api/dashboard', verifyToken, (req, res) => { // If the middleware allows them through, they see this: res.json({ message: "Welcome to your private dashboard!" }); });

### Example 2: The Auth Middleware
This is the bouncer! It intercepts the request and checks the token.
Tokens are traditionally sent in the HTTP Headers under `Authorization: Bearer <token>`.

javascript id="ch24-code-2" const jwt = require('jsonwebtoken'); const SECRET = "mySuperSecretPassword123";

const verifyToken = (req, res, next) => { // 1. Look for the token in the request headers const authHeader = req.header('Authorization'); // 2. If there is no header, reject them if (!authHeader) { return res.status(401).json({ error: "Access Denied. No token provided." }); }

// 3. The header looks like "Bearer eyJhbG...". We split it to just get the token. const token = authHeader.split(' ')[1];

try { // 4. Verify the token using our secret key const decodedPayload = jwt.verify(token, SECRET); // 5. Attach the decoded payload (the userId) to the request object! req.user = decodedPayload; // 6. Let them into the route! next(); } catch (err) { // If token is fake, altered, or expired, it jumps here res.status(403).json({ error: "Invalid or expired token." }); } };

---

## 7. Output Explanations

Look at Step 5 in the middleware: `req.user = decodedPayload;`.
Because middleware executes *before* the route, we can attach the user's ID to the `req` object. Now, inside `app.get('/api/dashboard')`, we can write `const userId = req.user.userId;` and use that ID to fetch their specific private data from MongoDB!

---

## 8. Common Mistakes

1. **Putting passwords in the payload:** The payload of a JWT is *Base64 Encoded*, not encrypted! Anyone can decode a JWT payload online. Never put passwords, credit cards, or sensitive secrets in the payload. Only use non-sensitive identifiers like the database `_id`.
2. **Hardcoding secrets:** Writing `const SECRET = "secret123"` in your code is extremely dangerous if you upload to GitHub. In Chapter 27, we will learn how to hide this in an `.env` file.
3. **Forgetting `Bearer `:** When testing with Postman, clients must send the token exactly formatted as `Bearer <token>`. If they just send `<token>`, the `.split(' ')[1]` logic in your middleware will break.

---

## 9. Best Practices

- **Expiration Times:** Always give your tokens an expiration time (`{ expiresIn: '1h' }`). If a hacker steals a token that lasts forever, they have permanent access.
- **Statelessness:** Avoid storing active tokens in your MongoDB database. The beauty of JWT is that the server mathematically verifies the token signature without having to do a slow database query.

---

## 10. Exercises

1. Go to [jwt.io](https://jwt.io). This is the official JWT debugger.
2. Look at the Encoded section on the left. Notice the three colors (Header, Payload, Signature) separated by dots.
3. Look at the Decoded section. Change the "name" in the payload and watch the encoded string change instantly!

---

## 11. Mini Project: Secure API authentication

**Objective:** Combine Chapter 23 and 24 to build a secure API where a user logs in, receives a token, and uses it to access a protected route.

**Step 1:** Installation
`npm install express jsonwebtoken`

**Step 2:** The Code (`jwtApp.js`)
*(We will skip MongoDB here to keep the code short and focus solely on JWT logic).*

javascript id="ch24-mini-project" const express = require('express'); const jwt = require('jsonwebtoken');

const app = express(); app.use(express.json());

const SECRET = "superSecret123";

// Mock Database User const dbUser = { id: 99, email: "user@test.com", password: "password123" };

// --- 1. LOGIN ROUTE --- app.post('/login', (req, res) => { const { email, password } = req.body;

// Simulate checking credentials if (email === dbUser.email && password === dbUser.password) { // Credentials match! Generate Token const token = jwt.sign({ userId: dbUser.id }, SECRET, { expiresIn: '15m' }); return res.json({ message: "Login Success", token: token }); } res.status(401).json({ error: "Invalid credentials" }); });

// --- 2. AUTH MIDDLEWARE --- const verifyToken = (req, res, next) => { const authHeader = req.header('Authorization'); if (!authHeader) return res.status(401).json({ error: "No token" });

const token = authHeader.split(' ')[1];

try { const decoded = jwt.verify(token, SECRET); req.user = decoded; // Attach { userId: 99 } to req next(); } catch (err) { res.status(403).json({ error: "Invalid token" }); } };

// --- 3. PROTECTED ROUTE --- // Must pass through verifyToken middleware first app.get('/profile', verifyToken, (req, res) => { // We have access to req.user because the middleware attached it! res.json({ message: "Welcome to your profile!", yourId: req.user.userId }); });

app.listen(3000, () => console.log("JWT Server Running")); ``

Challenge 1: Create a second protected route /settings. Apply the verifyToken middleware to it. Verify that a user cannot access it without a token.

Challenge 2: Modify the jwt.sign configuration to make the token expire in 5s (5 seconds). Log in, grab the token, wait 6 seconds, and try to access /profile. Observe the "Invalid token" error because it expired!

Q4: Where does the client typically place the JWT when sending a request to a protected API route? A) In the req.body B) In the URL parameters C) In the Authorization HTTP header D) In a hidden HTML input Answer: C

Q: Do I need to use cookies instead? A: You can! JWTs can be stored in LocalStorage (accessed via JS) or in HttpOnly Cookies (handled automatically by the browser). Storing JWTs in HttpOnly cookies is technically more secure against Cross-Site Scripting (XSS) attacks, but sending them via headers (as shown here) is standard practice for mobile app APIs and React Single Page Applications.

Q: How do I "logout" a user if I'm using JWT? A: Because JWTs are stateless, the server doesn't "remember" the token. To log a user out, you simply delete the token from the frontend (e.g., localStorage.removeItem('token')). If they don't have the token, they can't access protected routes anymore!

• Use jwt.sign() during login to generate a token containing the user's _id.

• The client sends the token back in the Authorization: Bearer <token> header.

• Custom Middleware intercepts the request and uses jwt.verify() to check the token.

• If valid, the middleware attaches the payload to req.user and calls next().

We can authenticate users and handle text data seamlessly. But what if a user wants to upload a profile picture? express.json` cannot handle image files! In Chapter 25: File Uploads with Multer, we will learn how to intercept incoming files, validate them, and save them to our server's hard drive!