Next.Js App Router Private Route

Usage of Next.Js Private router will make the page render on the client side only, it eliminates the server-side rendering for the page. This is done purposefully to make sure no hydration error occurs.

Installation

To use Private Route with Next.Js, you need to install the next plugin for react auth kit.

To install and save in your package.json dependencies, run:

npm yarn pnpm

npm install --save @auth-kit/next

yarn add @auth-kit/next

pnpm install --save @auth-kit/next

Usage

To make a page private, react-auth-kit included a component NextAuth. By simply wrapping the page.jsx or layout.jsx into the NextAuth will make the page secure from unauthorized access. It works seamlessly on any number of pages.

Provide the fallbackPath prop in the NextAuth while using the component. If the user is not authorized, the page will be redirected to the fallback path.

layout.jsx

// Implement in the layout.jsx
import NextAuth from '@auth-kit/next/NextAuth';

export default function Layout({
    children,
}: {
    children: React.ReactNode
}) {
    return <NextAuth fallbackPath={'/login'}>{children}</NextAuth>
}

page.jsx

// Implement in the page.jsx
import NextAuth from '@auth-kit/next/NextAuth';

export default function Page() {
    return (
        <NextAuth fallbackPath={'/login'}>
            ...
        </NextAuth>
    );
}

Reference

NextAuth

— 🔑 —

React Auth Kit is Apache 2.0 License code