Authentication in middleware in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import NextResponse from Next.js.

NextJS

import { [1] } from 'next/server';

Drag options to blanks, or click blank then click option'

AauthMiddleware

BuseMiddleware

ChandleAuth

DNextResponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names like 'useMiddleware' or 'authMiddleware'.

Trying to import middleware from 'next/auth' instead of 'next/server'.

NextResponse is imported from 'next/server' and used to handle redirects and responses in Next.js middleware.

2fill in blank

medium

Complete the code to check if the user token exists in the request cookies.

NextJS

export function middleware(request) {
  const token = request.cookies.get('[1]');
  if (!token) {
    return Response.redirect(new URL('/login', request.url));
  }
}

Drag options to blanks, or click blank then click option'

Asession_id

Btoken

Cauth_token

Duser_token

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect cookie names like 'session_id' or 'user_token'.

Forgetting to access cookies via 'request.cookies.get'.

The cookie named 'token' is commonly used to store the authentication token.

3fill in blank

hard

Fix the error in the middleware to correctly redirect unauthenticated users.

NextJS

if (!token) {
  return [1].redirect(new URL('/login', request.url));
}

Drag options to blanks, or click blank then click option'

Aredirect

Bresponse

CResponse

DRedirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'response.redirect' which is undefined.

Trying to use 'Redirect' as a function or class.

The 'Response.redirect' method is used to redirect in Next.js middleware.

4fill in blank

hard

Fill both blanks to allow middleware to run only on protected routes and skip public ones.

NextJS

export const config = {
  matcher: ['/dashboard[1]', '/settings[2]']
};

Drag options to blanks, or click blank then click option'

A/*

B/

C?

D**

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/' which matches only the exact path, not subpaths.

Using '?' or '**' which are not valid in Next.js matcher patterns.

Using '/*' matches all subpaths under '/dashboard' and '/settings'.

5fill in blank

hard

Fill all three blanks to extract the token, verify it, and allow or redirect accordingly.

NextJS

import { jwtVerify } from 'jose';

export async function middleware(request) {
  const token = request.cookies.get('[1]');
  if (!token) return Response.redirect(new URL('/login', request.url));

  try {
    const { payload } = await jwtVerify(token.value, new TextEncoder().encode('[2]'));
    request.user = payload;
  } catch (error) {
    return Response.redirect(new URL('[3]', request.url));
  }
}

Drag options to blanks, or click blank then click option'

Atoken

Bsecret_key

C/login

Dauth_token

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong cookie names like 'auth_token'.

Using incorrect secret key names or values.

Redirecting to wrong URLs on verification failure.

The cookie name is 'token', the secret key is 'secret_key', and redirect on error goes to '/login'.

Practice

1. What is the main purpose of using middleware for authentication in Next.js?

easy

A. To fetch data from an external API before rendering

B. To check if a user is logged in before allowing access to certain pages

C. To style the pages dynamically based on user preferences

D. To optimize images for faster loading

Solution

1. Step 1: Understand middleware role

   Middleware runs before page rendering to control access.

2. Step 2: Identify authentication use

   Middleware checks if user is logged in to allow or block access.

3. Final Answer:

   To check if a user is logged in before allowing access to certain pages -> Option B

4. Quick Check:

   Middleware controls access = C [OK]

Hint: Middleware runs before pages to check login [OK]

Common Mistakes:

• Thinking middleware styles pages
• Confusing middleware with data fetching
• Assuming middleware optimizes images

2. Which of the following is the correct way to import middleware in Next.js 14+ for authentication?

easy

A. import { NextResponse } from 'next/server';

B. import { middleware } from 'next/auth';

C. import middleware from 'next/middleware';

D. import { useMiddleware } from 'next/hooks';

Solution

1. Step 1: Check Next.js middleware import

   Next.js middleware uses 'next/server' for NextResponse and request handling.

2. Step 2: Identify correct import

   Only 'import { NextResponse } from "next/server";' is valid for middleware response.

3. Final Answer:

   import { NextResponse } from 'next/server'; -> Option A

4. Quick Check:

   Middleware uses NextResponse from next/server [OK]

Hint: Middleware uses NextResponse from 'next/server' [OK]

Common Mistakes:

• Importing middleware from 'next/auth' which doesn't exist
• Using default import from 'next/middleware' which is invalid
• Trying to import hooks for middleware

3. Given this middleware code snippet, what happens when a user is not authenticated?

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

medium

A. The middleware throws an error

B. The user stays on the current page without changes

C. The user is redirected to the /login page

D. The user is redirected to the homepage

Solution

1. Step 1: Check token presence

   The code checks if 'token' cookie exists; if not, it redirects.

2. Step 2: Understand redirect behavior

   Without token, middleware returns redirect to '/login' URL.

3. Final Answer:

   The user is redirected to the /login page -> Option C

4. Quick Check:

   No token means redirect to /login [OK]

Hint: No token cookie triggers redirect to /login [OK]

Common Mistakes:

• Assuming user stays on page without token
• Thinking middleware throws error on missing token
• Confusing redirect to homepage instead of /login

4. Identify the error in this Next.js middleware code for authentication:

import { NextResponse } from 'next/server';
export function middleware(request) {
  const token = request.cookies.token;
  if (!token) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

medium

A. Accessing cookies should use request.cookies.get('token') instead of request.cookies.token

B. NextResponse.redirect requires a full URL, not just '/login'

C. Middleware function must be async

D. NextResponse.next() should be replaced with NextResponse.continue()

Solution

1. Step 1: Check cookie access method

   In Next.js middleware, cookies are accessed with request.cookies.get('token'), not as a property.

2. Step 2: Verify redirect argument

   NextResponse.redirect accepts a URL object or string, but string '/login' is allowed; full URL preferred but not mandatory.

3. Final Answer:

   Accessing cookies should use request.cookies.get('token') instead of request.cookies.token -> Option A

4. Quick Check:

   Use cookies.get('token') to read cookie [OK]

Hint: Use cookies.get('token') to read cookies in middleware [OK]

Common Mistakes:

• Accessing cookies as properties instead of using get()
• Thinking redirect needs full URL always
• Assuming middleware must be async
• Confusing NextResponse.next() with continue()

5. You want to protect only the /dashboard and /profile pages using middleware authentication. Which matcher configuration correctly applies middleware only to these paths?

export const config = {
  matcher: ???
};

hard

A. ['/dashboard', '/profile']

B. '/dashboard|/profile'

C. '/dashboard/*,/profile/*'

D. ['/dashboard*', '/profile*']

Solution

1. Step 1: Understand matcher syntax

   Matcher accepts array of path patterns; '*' matches subpaths.

2. Step 2: Choose correct pattern for pages

   Using ['/dashboard*', '/profile*'] matches both exact and nested routes under these paths.

3. Final Answer:

   ['/dashboard*', '/profile*'] -> Option D

4. Quick Check:

   Use array with wildcard for matcher [OK]

Hint: Use array with '*' wildcard for matcher paths [OK]

Common Mistakes:

• Using string with pipe '|' instead of array
• Omitting '*' wildcard to match subpaths
• Using comma-separated string instead of array