Session management in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Next.js server component with session check?

Consider this Next.js 14 server component that checks for a user session and renders accordingly.

import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = cookies();
  const session = cookieStore.get('session-token');

  if (!session) {
    return <h1>Please log in</h1>;
  }

  return <h1>Welcome back!</h1>;
}

What will this component render if the 'session-token' cookie is missing?

NextJS

import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = cookies();
  const session = cookieStore.get('session-token');

  if (!session) {
    return <h1>Please log in</h1>;
  }

  return <h1>Welcome back!</h1>;
}

A <h1>Welcome back!</h1>

B Renders nothing (empty page)

C <h1>Please log in</h1>

D Throws a runtime error because cookies() is undefined

💡 Hint

Think about what happens when the cookie named 'session-token' is not found.

If the cookie 'session-token' is missing, cookieStore.get('session-token') returns undefined. The condition !session becomes true, so the component returns <h1>Please log in</h1>.

❓ state_output

intermediate

What is the value of the session state after this client component runs?

Given this Next.js client component using useState and useEffect to fetch session data:

import { useState, useEffect } from 'react';

export default function SessionStatus() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    fetch('/api/session')
      .then(res => res.json())
      .then(data => setSession(data.session));
  }, []);

  return <div>{session ? 'Logged in' : 'Not logged in'}</div>;
}

If the API returns {"session": "user123"}, what will be displayed after the fetch completes?

NextJS

import { useState, useEffect } from 'react';

export default function SessionStatus() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    fetch('/api/session')
      .then(res => res.json())
      .then(data => setSession(data.session));
  }, []);

  return <div>{session ? 'Logged in' : 'Not logged in'}</div>;
}

A Logged in

B Not logged in

C Displays 'null'

D Throws a fetch error

💡 Hint

Consider what happens when session state is updated with a non-null string.

Initially, session is null, so it shows 'Not logged in'. After fetch completes, session becomes 'user123', which is truthy, so it shows 'Logged in'.

📝 Syntax

advanced

Which option correctly sets a cookie with HttpOnly and Secure flags in Next.js API route?

In a Next.js API route, you want to set a cookie named 'session-token' with value 'abc123' that is HttpOnly and Secure. Which code snippet is correct?

NextJS

export default function handler(req, res) {
  // set cookie here
  res.status(200).json({ success: true });
}

A res.setHeader('Set-Cookie', 'session-token=abc123; HttpOnly; Secure; Path=/');

B res.cookie('session-token', 'abc123', { httpOnly: true, secure: true });

C res.setCookie('session-token', 'abc123', { httpOnly: true, secure: true });

D res.headers.set('Set-Cookie', 'session-token=abc123; HttpOnly; Secure');

💡 Hint

Remember that Next.js API routes use Node.js res object and setting headers directly is common.

Option A uses res.setHeader to set the cookie string with correct flags. Option A and C use methods not available on res. Option A uses wrong method headers.set.

🔧 Debug

advanced

Why does this Next.js middleware fail to read the session cookie?

Examine this Next.js middleware code:

import { NextResponse } from 'next/server';

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

It always redirects to '/login' even when the cookie exists. Why?

NextJS

import { NextResponse } from 'next/server';

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

A The cookie is HttpOnly and cannot be read in middleware

B The cookie name is case-sensitive and should be 'Session-Token' instead

C The 'request.cookies' API is only available in API routes, not middleware

D Middleware runs before cookies are parsed; use 'request.headers.get("cookie")' instead

💡 Hint

Think about how cookies are accessed in Next.js middleware.

In Next.js middleware, request.cookies is not always populated. You should parse cookies manually from request.headers.get('cookie'). So option D explains the issue correctly.

🧠 Conceptual

expert

Which statement best explains why storing session data in client-side cookies is risky?

Why is it generally unsafe to store sensitive session data directly in client-side cookies?

A Cookies expire immediately after the browser closes, so data is lost too soon

B Cookies can be easily read and modified by the user, risking data tampering and theft

C Cookies are encrypted by default, so storing sensitive data is safe

D Cookies cannot be sent with HTTPS requests, so session data is exposed

💡 Hint

Consider who can access cookies stored on the client side.

Cookies stored on the client can be read and changed by users or attackers if not protected. This risks session hijacking or data tampering. Cookies are not encrypted by default (option B is false). Cookies can be set to persist beyond browser close (option B false). Cookies are sent with HTTPS requests if Secure flag is set (option B false).