Role-based access patterns in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js component render for a user with role 'editor'?

Consider this Next.js functional component that shows different content based on user roles.

import { useState } from 'react';

export default function Dashboard() {
  const [userRole] = useState('editor');

  if (userRole === 'admin') {
    return <h1>Admin Panel</h1>;
  } else if (userRole === 'editor') {
    return <h1>Editor Workspace</h1>;
  } else {
    return <h1>Viewer Page</h1>;
  }
}

NextJS

import { useState } from 'react';

export default function Dashboard() {
  const [userRole] = useState('editor');

  if (userRole === 'admin') {
    return <h1>Admin Panel</h1>;
  } else if (userRole === 'editor') {
    return <h1>Editor Workspace</h1>;
  } else {
    return <h1>Viewer Page</h1>;
  }
}

A <h1>Editor Workspace</h1>

B <h1>Admin Panel</h1>

C <h1>Viewer Page</h1>

D Component throws an error

💡 Hint

Check the value of userRole and which condition matches.

The userRole is set to 'editor', so the component returns the <h1>Editor Workspace</h1> element.

❓ state_output

intermediate

What is the value of accessLevel after this code runs?

Given this React state update in a Next.js component, what will accessLevel be?

import { useState } from 'react';

export default function AccessControl() {
  const [role] = useState('guest');
  const [accessLevel, setAccessLevel] = useState('none');

  if (role === 'admin') {
    setAccessLevel('full');
  } else if (role === 'editor') {
    setAccessLevel('partial');
  } else {
    setAccessLevel('read-only');
  }

  return <div>Access: {accessLevel}</div>;
}

NextJS

import { useState } from 'react';

export default function AccessControl() {
  const [role] = useState('guest');
  const [accessLevel, setAccessLevel] = useState('none');

  if (role === 'admin') {
    setAccessLevel('full');
  } else if (role === 'editor') {
    setAccessLevel('partial');
  } else {
    setAccessLevel('read-only');
  }

  return <div>Access: {accessLevel}</div>;
}

A Access: none

B Component causes infinite loop

C Access: full

D Access: read-only

💡 Hint

Think about what happens when you call setAccessLevel inside the component body.

Calling setAccessLevel directly in the component body causes a state update on every render, leading to an infinite loop.

📝 Syntax

advanced

Which option correctly implements role-based access using Next.js middleware?

Choose the correct Next.js middleware code snippet that restricts access to '/admin' pages only to users with role 'admin'.

A

export function middleware(request) {
  const role = request.cookies.get('role');
  if (role !== 'admin') {
    return Response.redirect('/login');
  }
  return NextResponse.next();
}

B

export function middleware(request) {
  const role = request.cookies.get('role');
  if (role !== 'admin') {
    return NextResponse.redirect('/login', 302);
  }
  return NextResponse.next();
}

C

export function middleware(request) {
  const role = request.cookies.get('role');
  if (role !== 'admin') {
    return redirect('/login');
  }
  return NextResponse.next();
}

D

import { NextResponse } from 'next/server';

export function middleware(request) {
  const role = request.cookies.get('role');
  if (role !== 'admin') {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

💡 Hint

Check the correct usage of Next.js NextResponse.redirect method.

Option D correctly uses NextResponse.redirect to redirect unauthorized users. Option D uses a non-existent Response.redirect. Option D uses an undefined redirect function. Option D passes an invalid second argument to NextResponse.redirect.

🔧 Debug

advanced

Why does this role check fail to protect the page?

Examine this Next.js page component that tries to restrict access to admins only. Why does it fail?

export default function AdminPage({ user }) {
  if (user.role !== 'admin') {
    return <p>Access Denied</p>;
  }
  return <h1>Welcome Admin</h1>;
}

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  return { props: { user } };
}

NextJS

export default function AdminPage({ user }) {
  if (user.role !== 'admin') {
    return <p>Access Denied</p>;
  }
  return <h1>Welcome Admin</h1>;
}

export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  return { props: { user } };
}

A The component does not redirect unauthorized users, so they still see the page content.

B The role check is case-sensitive and user.role is 'Admin' with uppercase A, so the check fails.

C The user object is undefined because getUserFromSession returns null for unauthenticated users, causing a runtime error.

D getServerSideProps does not run on the server, so user data is missing.

💡 Hint

Consider what happens if user is null or undefined.

If getUserFromSession returns null for unauthenticated users, then user is null. Accessing user.role causes a runtime error. The component should check if user exists before accessing properties.

🧠 Conceptual

expert

Which approach best secures role-based access in a Next.js app?

Choose the most secure and scalable approach to enforce role-based access control in a Next.js application.

A Implement role checks in API routes and server-side rendering functions, returning 403 or redirecting unauthorized users.

B Use client-side role checks in React components only, hiding UI elements based on user role stored in local state.

C Store user roles in cookies and rely on client-side JavaScript to block access to pages by checking cookie values.

D Use static site generation with role-based content filtering at build time to serve different pages per role.

💡 Hint

Think about where security checks must happen to prevent unauthorized access.

Client-side checks (B and C) can be bypassed by users. Static generation (D) cannot adapt per user at runtime. Server-side checks in API routes and SSR (A) ensure unauthorized users cannot access protected data or pages.