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.
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.
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.
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.