Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

Question

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

I'm currently using nextjs 14 and I am working on developing a website similar to a property app. It will have an admin dashboard and a user side. How can I ensure the security of both the admin and user sides, and what should my folder structure look like?

I know that middleware can be used for this purpose, but I need detailed guidance on how to implement it.

I have attempted having two layouts - one for authentication, one for the dashboard, and one for the user side. My goal is to restrict access so that when a user is logged in, they can only see pages related to the user side. Similarly, when an admin is logged in, they should have access to all admin dashboard pages.

If no one is logged in, the user should be redirected straight to the login page without being able to access any other pages. Unfortunately, I am facing challenges implementing this functionality.

javascript next.js next.js13

Answer 1

Answer №1

If you're unfamiliar with how authentication and authorization function in Next.js, I recommend checking out the dashboard app for detailed insights. The adding authentication section provides specific guidance on this topic.

If you're struggling to grasp the concept, I've outlined some basics below to help you understand how to achieve your desired outcome,

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  
  // Assuming you have a function to verify the user's role
  const userRole = getUserRole(request);

  // Define routes that require admin access
  const adminRoutes = ['/admin/dashboard', '/admin/settings'];
  // Define routes that require user access
  const userRoutes = ['/user/profile', '/user/settings'];

  // Redirect to login if not authenticated
  if (!userRole && pathname.startsWith('/admin/') || pathname.startsWith('/user/')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Redirect if user does not have admin access
  if (userRole !== 'admin' && adminRoutes.includes(pathname)) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  // Redirect if user does not have user access
  if (userRole !== 'user' && userRoutes.includes(pathname)) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  return NextResponse.next();
}

// Mock function to get user role from the request
function getUserRole(request: NextRequest): string | null {
  // Implement your logic to retrieve user role from cookies, JWT, etc.
  return null; // Placeholder return
}

You can explore examples of Role-Based Authorization or Role-Based Access Control for more information and implementation ideas.

Answer 2

If you're unfamiliar with how authentication and authorization function in Next.js, I recommend checking out the dashboard app for detailed insights. The adding authentication section provides specific guidance on this topic.

If you're struggling to grasp the concept, I've outlined some basics below to help you understand how to achieve your desired outcome,

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  
  // Assuming you have a function to verify the user's role
  const userRole = getUserRole(request);

  // Define routes that require admin access
  const adminRoutes = ['/admin/dashboard', '/admin/settings'];
  // Define routes that require user access
  const userRoutes = ['/user/profile', '/user/settings'];

  // Redirect to login if not authenticated
  if (!userRole && pathname.startsWith('/admin/') || pathname.startsWith('/user/')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Redirect if user does not have admin access
  if (userRole !== 'admin' && adminRoutes.includes(pathname)) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  // Redirect if user does not have user access
  if (userRole !== 'user' && userRoutes.includes(pathname)) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  return NextResponse.next();
}

// Mock function to get user role from the request
function getUserRole(request: NextRequest): string | null {
  // Implement your logic to retrieve user role from cookies, JWT, etc.
  return null; // Placeholder return
}

You can explore examples of Role-Based Authorization or Role-Based Access Control for more information and implementation ideas.

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

Answer №1

Similar questions

Guide for implementing onclick event for info boxes in push pins on Bing Maps using ReactJS

Enhance the Header component by incorporating a logout button that seamlessly navigates with the NextJS App

Clearing hoverIntent using jQuery

Verify if the connection to MongoDB Atlas has been established for MongoDB

If the href attribute is set to "#" or the target attribute is set to "_blank", then the <a> request cannot be prevented

Sending a reference to the event object within a JavaScript function

With Ionic, you can use one single codebase for both iPad and iPhone

Unable to connect Dropzone to dynamically loaded DIV using AJAX

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

The API successfully completed its operation without issuing a response while attempting to retrieve information from a different page

When using `require('backbone')`, the returned object can vary depending on the file it is called in

The version of caniuse-lite in Browserslist is no longer current. To update, please execute the following command: `y

Retrieving data from a remote source repeatedly based on user selections on a single page

Where is the appropriate location to incorporate Vue.config.devtools = true?

What is preventing obj from being iterable?

What is the best method to create random coordinates that fall outside of the circle located within a rectangular area?

How can we efficiently generate ReactJS Router for Links and seamlessly display a unique page for each Link?

Tips for managing and identifying canceled requests in an Angular HTTP interceptor

The media parameter seems to be malfunctioning when attempting to send it to the Kaleyra API using code

How to clear a particular select option in react-bootstrap