Role-based access patterns in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a role-based access pattern in web applications?

It is a way to control what users can see or do based on their assigned roles, like admin, user, or guest. This helps keep parts of the app safe and organized.

intermediate

How does Next.js support role-based access control?

Next.js can use middleware and server-side logic to check user roles before showing pages or API data. It can redirect users or block access if they don't have the right role.

intermediate

Why use server-side checks for role-based access in Next.js?

Server-side checks keep your app secure because they run before the page loads. This stops unauthorized users from even seeing protected content or data.

intermediate

What is a common pattern to protect API routes based on roles in Next.js?

You check the user's role inside the API route handler. If the role is not allowed, you return a 403 Forbidden response to block access.

intermediate

How can you redirect users without the right role in Next.js?

Use Next.js middleware or server-side functions like getServerSideProps to check roles and redirect users to a login or error page if they lack permission.

In Next.js, where is a good place to check user roles for page access?

A Only in client-side React components

B Inside getServerSideProps or middleware

C In CSS files

D In static HTML files

Checking roles in getServerSideProps or middleware runs on the server, keeping access control secure.

What HTTP status code should you return when a user is forbidden from accessing an API route?

A 403 Forbidden

B 200 OK

C 404 Not Found

D 500 Internal Server Error

403 Forbidden means the user is authenticated but not allowed to access the resource.

Which Next.js feature helps redirect users based on their role before rendering a page?

A useEffect hook

B getStaticProps

C getServerSideProps

D CSS modules

getServerSideProps runs on the server before rendering and can redirect users based on roles.

Why should role checks not rely only on client-side code?

A Client-side checks can be bypassed by users

B Client-side code cannot access roles

C Client-side code is more secure

D Client-side code is faster

Client-side checks can be changed or bypassed by users, so server-side checks are needed for security.

What is a benefit of using middleware for role-based access in Next.js?

A It runs after the page loads

B It styles the page

C It replaces API routes

D It can block or redirect requests early

Middleware runs before the page or API route, so it can block or redirect unauthorized users early.

Explain how you would implement role-based access control in a Next.js app.

Think about where and how to check roles securely before showing content.

Describe why server-side role checks are important compared to client-side checks.

Consider what happens if checks only run in the browser.

Practice

1. What is the main purpose of role-based access control in a Next.js application?

easy

A. To improve the app's loading speed by caching user data

B. To restrict or allow users to see or perform actions based on their assigned roles

C. To style components differently for each user

D. To automatically generate user profiles

Solution

1. Step 1: Understand role-based access control concept

   Role-based access control means controlling what users can do or see based on their roles.

2. Step 2: Identify the purpose in Next.js apps

   In Next.js, this means showing or hiding parts of the app depending on user roles to protect sensitive data.

3. Final Answer:

   To restrict or allow users to see or perform actions based on their assigned roles -> Option B

4. Quick Check:

   Role-based access controls user permissions = B [OK]

Hint: Role-based access controls user permissions and visibility [OK]

Common Mistakes:

• Confusing access control with styling or caching
• Thinking it automatically creates user profiles
• Assuming it improves app speed

2. Which of the following is the correct way to check a user's role in a Next.js component using session data?

easy

A. if (session.user.role === 'admin') { /* allow access */ }

B. if (user.role == 'admin') { /* allow access */ }

C. if (session.role === 'admin') { /* allow access */ }

D. if (session.user.roles.includes('admin')) { /* allow access */ }

Solution

1. Step 1: Identify session structure in Next.js

   Session data usually stores user info under session.user, including role as session.user.role.

2. Step 2: Check correct syntax for role comparison

   The correct check is session.user.role === 'admin' to compare role string exactly.

3. Final Answer:

   if (session.user.role === 'admin') { /* allow access */ } -> Option A

4. Quick Check:

   Use session.user.role for role check = C [OK]

Hint: Access role via session.user.role for correct check [OK]

Common Mistakes:

• Using user.role without session prefix
• Checking session.role directly (wrong path)
• Using == instead of === for strict comparison
• Assuming roles is an array when it's a string

3. Given this Next.js code snippet, what will be rendered if the user role is 'editor'?

function Dashboard({ session }) {
  if (session.user.role === 'admin') {
    return <div>Admin Panel</div>;
  } else if (session.user.role === 'editor') {
    return <div>Editor Workspace</div>;
  } else {
    return <div>Access Denied</div>;
  }
}

medium

A. Nothing will render due to error

B. <div>Admin Panel</div>

C. <div>Access Denied</div>

D. <div>Editor Workspace</div>

Solution

1. Step 1: Check user role conditionals

   The code checks if role is 'admin', then 'editor', else denies access.

2. Step 2: Match role 'editor' to conditional

   Since role is 'editor', the second condition matches and returns <div>Editor Workspace</div>.

3. Final Answer:

   <div>Editor Workspace</div> -> Option D

4. Quick Check:

   Role 'editor' matches editor condition = A [OK]

Hint: Match user role to if-else branches to find output [OK]

Common Mistakes:

• Choosing admin panel for editor role
• Assuming access denied for editor
• Thinking code has syntax errors

4. Identify the error in this Next.js role check code snippet:

function Page({ session }) {
  if (session.user.role = 'admin') {
    return <div>Admin Access</div>;
  }
  return <div>No Access</div>;
}

medium

A. session.user.role should be session.role

B. Missing else block after if statement

C. Using single equals (=) instead of triple equals (===) for comparison

D. Return statements are not allowed inside if

Solution

1. Step 1: Check the if condition syntax

   The code uses single equals (=) which assigns value instead of comparing.

2. Step 2: Identify correct comparison operator

   For comparison, triple equals (===) should be used to check equality without assignment.

3. Final Answer:

   Using single equals (=) instead of triple equals (===) for comparison -> Option C

4. Quick Check:

   Use === for comparison, not = [OK]

Hint: Use === for comparison, not = assignment [OK]

Common Mistakes:

• Confusing assignment (=) with comparison (===)
• Thinking else block is mandatory
• Incorrect session property path assumptions
• Believing return inside if is invalid

5. You want to protect a Next.js API route so only users with role 'admin' or 'manager' can access it. Which code snippet correctly implements this role-based access check?

hard

A. if (['admin', 'manager'].includes(session.user.role)) { /* allow */ } else { /* deny */ }

B. if (session.user.role === ['admin', 'manager']) { /* allow */ } else { /* deny */ }

C. if (session.user.role == 'admin' && session.user.role == 'manager') { /* allow */ } else { /* deny */ }

D. if (session.user.role === 'admin' && session.user.role === 'manager') { /* allow */ } else { /* deny */ }

Solution

1. Step 1: Understand role check for multiple roles

   We want to allow access if role is either 'admin' or 'manager'.

2. Step 2: Evaluate each option's logic

   if (session.user.role === 'admin' && session.user.role === 'manager') { /* allow */ } else { /* deny */ } uses && which requires the role to be both simultaneously (impossible); if (session.user.role === ['admin', 'manager']) { /* allow */ } else { /* deny */ } compares role to array directly (wrong); if (['admin', 'manager'].includes(session.user.role)) { /* allow */ } else { /* deny */ } uses includes() on array which is clean and correct; if (session.user.role == 'admin' && session.user.role == 'manager') { /* allow */ } else { /* deny */ } uses && which requires role to be both roles simultaneously (impossible).

3. Final Answer:

   if (['admin', 'manager'].includes(session.user.role)) { /* allow */ } else { /* deny */ } -> Option A

4. Quick Check:

   Use includes() to check multiple roles = D [OK]

Hint: Use array.includes(role) to check multiple roles easily [OK]

Common Mistakes:

• Comparing role directly to an array
• Using && instead of || for multiple roles
• Not using includes() for clean checks
• Assuming || is always better than includes()