Authentication in middleware in NextJS - Step-by-Step Execution

Concept Flow - Authentication in middleware

Request arrives

↓

Middleware runs

↓

Check for auth token

↓

Validate

↓

Allow

↓

request

The middleware checks each request for an authentication token. If found, it validates it and allows the request. If not, it redirects to login.

Execution Sample

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('authToken');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

Middleware checks for 'authToken' cookie; if missing, redirects to login; otherwise, allows request to continue.

Execution Table

Step	Action	Token Present?	Result	Response
1	Request arrives with cookies	Yes	Token found	Continue request
2	Middleware reads cookies	Yes	Token valid	NextResponse.next()
3	Request proceeds to page	Yes	Access granted	Page rendered
4	Request arrives without cookies	No	Token missing	Redirect to /login
5	Middleware redirects	No	No token to validate	NextResponse.redirect(new URL('/login', request.url))
6	Request stops	No	Access denied	Login page shown

💡 Execution stops when token is missing and redirect happens, or continues if token is valid.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	After Step 5
token	undefined	'abc123' (present)	'abc123' (valid)	undefined (missing)	undefined (redirect)

Key Moments - 2 Insights

Why does the middleware redirect instead of allowing the request when the token is missing?

Because the middleware checks if the token exists (see execution_table row 4). If it doesn't, it immediately returns a redirect response to '/login' (row 5), stopping the request from continuing.

What happens if the token is present but invalid?

In this simple example, the middleware only checks presence, not validity. To handle invalid tokens, you would add validation logic after step 2 before allowing the request.

Visual Quiz - 3 Questions

Look at the execution table, what is the response at Step 2 when the token is present?

A NextResponse.redirect('/login')

B NextResponse.next() to continue

C Request stops with error

D No response sent

💡 Hint

Check the 'Response' column at Step 2 in the execution_table.

At which step does the middleware decide to redirect the user to the login page?

A Step 5

B Step 3

C Step 1

D Step 6

💡 Hint

Look for 'NextResponse.redirect' in the 'Response' column.

If the token variable was always undefined, what would happen according to the variable_tracker?

A Requests always continue

B Requests sometimes continue

C Requests always redirect to login

D Middleware crashes

💡 Hint

See variable_tracker values for 'token' and how missing token triggers redirect in execution_table.

Concept Snapshot

Authentication in Next.js middleware:
- Middleware runs on every request
- Check for auth token in cookies
- If token missing, redirect to login
- If token present, allow request
- Use NextResponse.next() to continue
- Use NextResponse.redirect() to redirect

Full Transcript

In Next.js, middleware runs on every incoming request. It checks if the request has an authentication token in its cookies. If the token is missing, the middleware redirects the user to the login page, stopping the request from continuing. If the token is present, the middleware allows the request to proceed to the requested page. This process helps protect pages by ensuring only authenticated users can access them. The key steps are reading the token, deciding based on its presence, and responding with either a redirect or continuation.