Skip to main content

Securing Page

In a Next.js application, securing routes based on user authentication status is essential. This documentation outlines how to handle three types of routes: Public, Private, and Guest-only.

Public Routes or Shared Routes​

Public routes are accessible to all users, whether they are authenticated or not. By default, all pages within the src/app directory in a Next.js application are considered public.

src/app/about/page.tsx
export default function About() {
  return <h1>About Page - Accessible to everyone</h1>;
}

We have only some routes under the (blank-layout-pages) folder that are protected with GuestOnlyRoute and other routes will work as shared routes as they are not wrapped with AuthGuard or GuestOnlyRoute.

If user wants some shared route with our dashboard layout, they can create a layout.tsx file under the src/app/(dashboard)/(shared-dashboard) folder. User need to copy the layout.tsx file from the src/app/(dashboard)/(private) and paste it under the src/app/(dashboard)/(shared-dashboard) folder and remove the AuthGuard import and its usage.

Private Routes​

Private routes are restricted to authenticated users only. These routes typically contain sensitive information or functionality that should not be exposed to unauthenticated users. All the pages within the src/app/[lang]/(dashboard)/(private) (if translation (i18n) feature is implemented) or src/app/(dashboard)/(private) (if translation (i18n) feature is not implemented) directory are considered private.

src/app/[lang]/(dashboard)/(private)/profile/page.tsx
export default function Profile() {
  return <h1>Profile Page - Accessible to authenticated users only</h1>;
}

For making routes private, we have used a Higher Order Component (HOC) called AuthGuard, which is defined in the src/hocs directory. We wrap the private routes layout with this HOC to ensure that only authenticated users can access them.

Guest Routes​

Guest-only routes are for pages like Login, Registration, Forgot Password, etc., which should only be accessible to unauthenticated users as we don't want already logged in user to visit those pages.

All the pages within the src/app/[lang]/(blank-layout-pages)/(guest-only) (if translation (i18n) feature is implemented) or src/app/(blank-layout-pages)/(guest-only) (if translation (i18n) feature is not implemented) directory are considered guest-only.

src/app/[lang]/(blank-layout-pages)/(guest-only)/login/page.tsx
export default function Login() {
  return <h1>Login Page - Accessible to unauthenticated users only</h1>;
}

For making routes guest-only we have used HOC (Higher Order Component) GuestGuard, which is defined in the src/hocs directory. We wrap the guest routes layout with this HOC to ensure that only unauthenticated users can access them.

By following these guidelines, you can ensure that your Next.js application has clearly defined and secure public, private, and guest-only routes, enhancing the overall security and user experience.