Role-based access patterns in NextJS - Step-by-Step Execution

Concept Flow - Role-based access patterns

User Requests Page

↓

Check User Role

↓

Allow Admin

↓

Render Page

This flow shows how a Next.js app checks a user's role before allowing access to a page or redirecting them.

Execution Sample

NextJS

import { NextResponse } from 'next/server';

export function middleware(req) {
  const role = req.cookies.get('role')?.value || 'guest';
  if (role === 'admin') return NextResponse.next();
  return NextResponse.redirect(new URL('/login', req.url));
}

Middleware checks the user's role from cookies and allows or blocks access accordingly.

Execution Table

Step	Action	Role Value	Condition Checked	Result	Next Step
1	Read 'role' cookie	admin	role === 'admin'	True	Allow access
2	Allow access	admin	-	Access granted	Render page
3	User requests page	user	role === 'admin'	False	Redirect to /login
4	Redirect to /login	user	-	Access denied	Show login page
5	User requests page	guest	role === 'admin'	False	Redirect to /login
6	Redirect to /login	guest	-	Access denied	Show login page

💡 Execution stops after allowing access or redirecting based on role check.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5
role	undefined	admin	user	guest

Key Moments - 2 Insights

Why does the middleware redirect users who are not 'admin'?

Because the condition 'role === "admin"' is false for other roles, so the code redirects them to '/login' as shown in execution_table rows 3 and 5.

What happens if the 'role' cookie is missing?

The code assigns 'guest' as default role (see code line with '|| "guest"'), so the user is treated as guest and redirected, as in execution_table row 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the role value at Step 3?

A admin

B user

C guest

D undefined

💡 Hint

Check the 'Role Value' column in execution_table row for Step 3.

At which step does the middleware allow access to the page?

A Step 1

B Step 4

C Step 2

D Step 6

💡 Hint

Look for 'Access granted' in the 'Result' column of execution_table.

If the role cookie was 'admin', what would happen at Step 5?

A Allow access

B Redirect to /login

C Show error message

D Role becomes guest

💡 Hint

Refer to how 'admin' role is handled in execution_table rows 1 and 2.

Concept Snapshot

Role-based access in Next.js uses middleware to check user roles.
It reads the role from cookies or defaults to 'guest'.
If role matches allowed roles (e.g., 'admin'), access is granted.
Otherwise, user is redirected to login or error page.
This pattern protects pages based on user permissions.

Full Transcript

This visual execution trace shows how role-based access works in Next.js using middleware. When a user requests a page, the middleware reads the 'role' cookie. If the role is 'admin', the middleware allows access and the page renders. If the role is anything else or missing, the middleware redirects the user to the login page. Variables like 'role' change based on cookie values. Key moments include understanding why non-admin users are redirected and what happens if the role cookie is missing. The quiz questions help reinforce these points by referencing specific steps in the execution table.