JWT vs session strategy in NextJS - Hands-On Comparison

Implementing JWT vs Session Strategy in Next.js

📖 Scenario: You are building a simple Next.js app that needs user authentication. You want to compare two common ways to keep users logged in: using JSON Web Tokens (JWT) stored in cookies, and using server-side sessions.This project will guide you through setting up both strategies step-by-step so you can see how each works in a real app.

🎯 Goal: Build a Next.js app with two authentication methods: JWT stored in cookies and server-side sessions. You will create the data, configure settings, implement the core logic for each method, and complete the setup to handle user login state.

📋 What You'll Learn

Create initial user data and basic Next.js API routes

Add configuration variables for JWT secret and session options

Implement JWT token creation and verification logic

Implement session creation and retrieval logic

Complete API routes to handle login and authentication using both strategies

💡 Why This Matters

🌍 Real World

Web apps often need to keep users logged in securely. JWT and session strategies are two popular ways to do this. This project shows how to implement both in Next.js.

💼 Career

Understanding authentication methods is essential for web developers building secure applications. Knowing how to implement JWT and sessions is a common job requirement.

1

DATA SETUP: Create initial user data and API route

Create a constant users as an array with one user object: { id: 1, username: 'user1', password: 'pass123' }. Then create a Next.js API route handler function handler that accepts req and res parameters.

NextJS

# Create the users array and API route handler function

// Your code here

Need a hint?

Think of users as a small database of one user. The handler function will be your API endpoint.

2

CONFIGURATION: Add JWT secret and session options

Add a constant JWT_SECRET with the value 'mysecretkey'. Also add a constant sessionOptions as an object with a property cookieName set to 'nextjs-session'.

NextJS

const users = [{ id: 1, username: 'user1', password: 'pass123' }];

const JWT_SECRET = 'mysecretkey';
const sessionOptions = { cookieName: 'nextjs-session' };

export default function handler(req, res) {
  // Your code here
}

Need a hint?

The JWT_SECRET is used to sign tokens. The sessionOptions will hold session cookie settings.

3

CORE LOGIC: Implement JWT token creation and session handling

Inside the handler function, write code to check if req.method is 'POST'. If so, find the user in users matching req.body.username and req.body.password. If user is found, create a JWT token signed with JWT_SECRET containing the user's id. Also create a session object with the user's id. Set a cookie named sessionOptions.cookieName with the session id. Return a JSON response with the token and a success message.

NextJS

const users = [{ id: 1, username: 'user1', password: 'pass123' }];

const JWT_SECRET = 'mysecretkey';
const sessionOptions = { cookieName: 'nextjs-session' };

export default function handler(req, res) {
  // Check if POST method
  // Find user by username and password
  // If user found, create JWT token and session
  // Set session cookie
  // Return JSON with token and message
  // Your code here
}

Need a hint?

Use jsonwebtoken to create the token. Store sessions in a simple object. Set the cookie with HttpOnly for security.

4

COMPLETION: Finalize API route to verify JWT and session

Extend the handler function to handle GET requests. For GET, check for a JWT token in the Authorization header. Verify it using jwt.verify with JWT_SECRET. Also check for a session cookie named sessionOptions.cookieName and verify it exists in sessions. Return JSON with authenticated: true and the user id if either JWT or session is valid. Otherwise, return authenticated: false.

NextJS

import jwt from 'jsonwebtoken';

const users = [{ id: 1, username: 'user1', password: 'pass123' }];

const JWT_SECRET = 'mysecretkey';
const sessionOptions = { cookieName: 'nextjs-session' };

const sessions = {};

export default function handler(req, res) {
  if (req.method === 'POST') {
    // POST login logic
  } else if (req.method === 'GET') {
    // Your code here to verify JWT and session
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

Need a hint?

Check the Authorization header for a Bearer token. Also parse cookies to find the session cookie. Verify both to authenticate the user.