Authentication in middleware in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an unauthenticated user accesses a protected route?

Consider a Next.js middleware that checks for a valid authentication token in cookies. If the token is missing, the middleware redirects the user to the login page.

What will the user experience when trying to access /dashboard without a token?

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();
}

export const config = { matcher: ['/dashboard'] };

A The user sees a blank page because the middleware blocks rendering.

B The dashboard loads but shows an error message about missing authentication.

C The user is redirected to the login page before the dashboard loads.

D The user can access the dashboard without any interruption.

💡 Hint

Think about what the middleware does when the token is missing.

The middleware checks for the token cookie. If it is missing, it immediately redirects the user to the login page, preventing access to the protected route.

📝 Syntax

intermediate

Identify the syntax error in this Next.js middleware for authentication

Which option contains a syntax error that will prevent the middleware from running?

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();
}

export const config = { matcher: ['/profile'] };

A No syntax error; the code runs correctly.

B Missing semicolon after getting the token cookie.

C Missing parentheses in the 'middleware' function declaration.

D Using 'request.cookies.get' instead of 'request.cookies.get()'.

💡 Hint

Check if JavaScript requires semicolons and if the method calls are correct.

JavaScript does not require semicolons strictly, and the method call 'request.cookies.get('authToken')' is correct. The function declaration syntax is also correct.

🔧 Debug

advanced

Why does this middleware fail to redirect unauthenticated users?

The middleware is intended to redirect users without a valid token to the login page. However, unauthenticated users can still access protected pages. What is the likely cause?

NextJS

import { NextResponse } from 'next/server';

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

export const config = { matcher: ['/settings'] };

A The matcher pattern does not include the protected route.

B The check should be for falsy value (!token), not only undefined.

C The middleware is missing an async keyword.

D The redirect URL is incorrect and causes a silent failure.

💡 Hint

Consider what values request.cookies.get() returns when the cookie is missing.

If the cookie is missing, request.cookies.get() returns null, not undefined. Checking only for undefined misses this case, so unauthenticated users are not redirected.

❓ state_output

advanced

What is the value of the response status after middleware redirect?

In Next.js middleware, when redirecting unauthenticated users, what HTTP status code does the response have?

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();
}

export const config = { matcher: ['/account'] };

A 200 (OK)

B 301 (Moved Permanently)

C 404 (Not Found)

D 307 (Temporary Redirect)

💡 Hint

Think about the common status code used for temporary redirects.

NextResponse.redirect uses status code 307 by default, which means a temporary redirect.

🧠 Conceptual

expert

Why use middleware for authentication instead of client-side checks in Next.js?

Which reason best explains why authentication is often handled in Next.js middleware rather than only on client-side components?

A Middleware runs on the server edge, preventing unauthorized page rendering and reducing data exposure.

B Middleware allows faster client-side rendering by skipping authentication checks.

C Client-side checks are more secure because they run after the page loads.

D Middleware can modify React component state directly before rendering.

💡 Hint

Consider where middleware runs and what it can prevent before the page loads.

Middleware runs on the server edge before the page renders, so it can block unauthorized access early, protecting sensitive data and improving security.