Securing nested routes in NextJs with authentication

Question

Securing nested routes in NextJs with authentication

Is there a way to authenticate all nested routes in my project? Some routes require authentication, while others can be accessed without it. For example:
/admin => requires authentication
/admin/posts => requires authentication
/admin/posts/1 => requires authentication
/admin/users => requires authentication
and so on...
/view => can be accessed without authentication
/view/songs => can be accessed without authentication
/view/posts => can be accessed without authentication
Things I have tried:
HOC: need to include it in every route inside admin. Is there a way to do it in a common place?
getServerSideProps: same as above

Is there a way to achieve this in one common file?

javascript next.js

Answer 1

Answer №1

To achieve the desired outcome, there are various approaches you can take with just a few inputs:

If you're utilizing nextJS version 13 or above and adopting the new app directory routing system, you can make use of the layout.js file located in the root of the /admin folder:

 export default function RootLayout({ children }) {
      // Your logic to verify user login status
      if(/* user is logged in */){
          return (
            <html>
              <head></head>
              <body>{children}</body>
            </html>
          )
      }else{
          return <p>Authentication Required</p> // Display Login Form
      }
    }

Alternatively, a similar approach can be implemented within the _App.js:

import { useRouter } from 'next/router';
import {MyAuthComponent} from 'auth/path' // your authentication component

export default function MyApp({ Component, pageProps }) {
    const router = useRouter();
    const currentPath = router.asPath
    const isPublicRoute = currentPath.includes('view') // Logic for public route check
    if(isPublicRoute ){
        return  <Component {...pageProps} />
    }else{
      return (
          <MyAuthComponent>
              <Component {...pageProps} />
          </MyAuthComponent>
      )
    }
}

Lastly, include the MyAuthComponent.js:

 export default function MyAuthComponent({ children }) {
      // Your logic to verify user login status
      if(/* user is logged in */){
          return (
            <html>
              <head></head>
              <body>{children}</body>
            </html>
          )
      }else{
          return <p>Authentication Required</p> // Display Login Form
      }
    }

Answer 2

To achieve the desired outcome, there are various approaches you can take with just a few inputs:

If you're utilizing nextJS version 13 or above and adopting the new app directory routing system, you can make use of the layout.js file located in the root of the /admin folder:

 export default function RootLayout({ children }) {
      // Your logic to verify user login status
      if(/* user is logged in */){
          return (
            <html>
              <head></head>
              <body>{children}</body>
            </html>
          )
      }else{
          return <p>Authentication Required</p> // Display Login Form
      }
    }

Alternatively, a similar approach can be implemented within the _App.js:

import { useRouter } from 'next/router';
import {MyAuthComponent} from 'auth/path' // your authentication component

export default function MyApp({ Component, pageProps }) {
    const router = useRouter();
    const currentPath = router.asPath
    const isPublicRoute = currentPath.includes('view') // Logic for public route check
    if(isPublicRoute ){
        return  <Component {...pageProps} />
    }else{
      return (
          <MyAuthComponent>
              <Component {...pageProps} />
          </MyAuthComponent>
      )
    }
}

Lastly, include the MyAuthComponent.js:

 export default function MyAuthComponent({ children }) {
      // Your logic to verify user login status
      if(/* user is logged in */){
          return (
            <html>
              <head></head>
              <body>{children}</body>
            </html>
          )
      }else{
          return <p>Authentication Required</p> // Display Login Form
      }
    }

Securing nested routes in NextJs with authentication

Answer №1

Similar questions

What is preventing me from renaming a file in PHP when passed through jQuery?

The combination of useSWR with graphql-request appears to trigger a continuous loop of requests being sent, even

Troubleshooting ASP.NET Ajax Error Code 0

Guide to accessing child prop reference in Vue 3 using Element Plus UI library

Guide on properly defining typed props in Next.js using TypeScript

Encountering an issue with the Bootstrap modal popup not functioning properly within a JSP file, implemented alongside the Apache Tiles framework

Ways to identify when a specific react component has been clicked

What exactly does form.getHeaders(); mean?

How to retrieve a single user using server-side props in Next.js

Utilizing Server-Sent Events to display a interactive navigation button

Is it possible that .focus() does not function on a duplicated object?

Production environment causing VueJs components to not update their style accordingly

Tips for importing a JavaScript file from a URL and initializing a class in a React component

What are the best practices for implementing Laravel and Vue together?

Converting HTML/Javascript codes for Android Application use in Eclipse: A Step-by-Step Guide

Optimally displaying extensive lists on a webpage using HTML

Getting a 401 error when using the Companies House API with jQuery and ajax

Sorting elements to the beginning of each nested array

Display a single submenu on mouseover using Javascript

AngularJS JQ Widgets Chart Display Issue