🔒 next-protect

Protect your Next.js app with a password. A drop-in solution to keep your deployments protected with a basic password system.

✨ Features

• App Router support out of the box.
• Supports Next.js Middleware, Edge runtime, RSC and SSR.
• Protect just a specific page or the entire app.
• Use one or more passwords.
• Customizable form and styles.

Check-out a NextJS example or view the Demo.

📡 Install

1npm install next-protect
2
3yarn add next-protect
4
5pnpm add next-protect

👋 Hello there! Follow me @linesofcode or visit linesofcode.dev for more cool projects like this one.

🚀 Getting started

First, modify your .env file to include a new environment variable: NEXT_PROTECT_PASSWORD="password-goes-here".

Next we need to instantiate the NextProtect class. This instance provides the core functionality of the package. Create a new file src/app/api/next-protect/index.ts and export the NextProtect class.

1/* src/app/api/next-protect/index.ts */
2import { NextProtect } from 'next-protect/server';
3
4export const np = new NextProtect();

Now we need to expose a POST route to our Next.js app. Create a new file src/app/api/next-protect/route.ts and export the POST method.

1/* src/app/api/next-protect/route.ts */
2import { NextRequest } from 'next/server';
3import { np } from '.';
4
5export const POST = (req: NextRequest) => np.POST(req);

The server-side code is now ready to go, but we still need to render a password form to the user and protect the page.

Create a src/middleware.ts file and export the middleware function. This middleware will be called before every request to your app, checks if the user is authenticated, and redirects them into the app or to a login page.

1/* src/middleware.ts */
2import { NextRequest } from 'next/server';
3import { np } from './app/api/next-protect';
4
5export const middleware = async (req: NextRequest) => np.middleware(req);

The final step is to create a Next.js page that will render a password form to the user.

Create a src/app/next-protect/page.tsx file and simply re-export the NextProtect component.

1/* src/app/next-protect/page.tsx */
2import 'next-protect/styles.css';
3import { NextProtect } from 'next-protect/react';
4
5const Page = () => <NextProtect />;
6
7export default Page;

Done! Now open your browser and navigate to http://localhost:3000. You will be redirected to a password form. After entering the correct password, you will be granted access to the entire app. Simple as that! Now you can clear your cookies and refresh the page to see the password form again.

🙌 Want to see a fully working codebase? Check out the NextJS example or view the Demo.

💪 Advanced usage

Server side rendering (without middleware)

If you are using React Server Components (RSC), you can call await np.isProtected() in your async React component to check if the user is authenticated.

❗ Important note: just because a layout component is protected does not mean that its child pages are protected.

1/* src/app/page.tsx */
2import 'next-protect/styles.css';
3import { NextProtect } from 'next-protect/react';
4
5const Page = async () => {
6  const isProtected = await np.isProtected();
7
8  return (
9    <NextProtect isProtected={isProtected}>
10      <p>This content is only visible to authenticated users.</p>
11    </NextProtect>
12  );
13};

Client side rendering (without middleware)

If you are using React Client Components, simply render a NextProtect component without any props. Internally the logic will fall-back to sending a request to /api/next-protect to check if the user is authenticated.

1/* src/app/page.tsx */
2import 'next-protect/styles.css';
3import { NextProtect } from 'next-protect/react';
4
5const Page = () => {
6  return (
7    <NextProtect>
8      <p>This content is only visible to authenticated users.</p>
9    </NextProtect>
10  );
11};
12
13export default Page;

Multiple Passwords

You can configure multiple passwords to be used for authentication by passing an array of passwords to the NextProtect component.

1/* src/app/api/next-protect/index.ts */
2import { NextProtect } from 'next-protect/server';
3
4export const np = new NextProtect({
5  password: ['password', 'another-password'],
6});

Customizing and Styling the Form

The NextProtect component accepts a number of props that allow you to customize the form. Here are some examples:

1/* src/app/next-protect/page.tsx */
2import 'next-protect/styles.css';
3import { NextProtect } from 'next-protect/react';
4
5const Page = () => (
6  <NextProtect
7    slotProps={{
8      passwordInput: {
9        placeholder: 'The password is password',
10      },
11    }}
12    header={<h1>Custom Header</h1>}
13    footer={<p>Custom Footer</p>}
14  />
15);
16
17export default Page;

Custom redirects and rewrites

You can customize the redirect and rewrite behavior of the NextProtect component by passing the following options to the NextProtect constructor.

• redirectTo: Redirect the user to a specific URL.
• rewriteTo: Rewrite the URL to a specific URL.

1/* src/app/api/next-protect/index.ts */
2import { NextProtect } from 'next-protect/server';
3
4export const np = new NextProtect({
5  redirectTo: '/dashboard',
6});

⌨Custom API endpoint

By default, the NextProtect component will use the /api/next-protect endpoint to check if the user is authenticated. You can customize this endpoint by passing the api prop to the NextProtect component.

1/* src/app/api/next-protect/index.ts */
2import { NextProtect } from 'next-protect/server';
3
4export const np = new NextProtect({
5  api: '/api/my-custom-endpoint',
6});

1/* src/app/next-protect/page.tsx */
2import 'next-protect/styles.css';
3import { NextProtect } from 'next-protect/react';
4
5const Page = () => <NextProtect api="/api/my-custom-endpoint" />;
6
7export default Page;

📚 TSDoc

:toolbox: Functions

• NextProtect
• NextProtectForm
• useNextProtect

:gear: NextProtect

Function	Type
NextProtect	(props: NextProtectProps) => string or number or bigint or boolean or Iterable<ReactNode> or Promise<AwaitedReactNode> or Element or null or undefined

:gear: NextProtectForm

Function	Type
NextProtectForm	(props: NextProtectFormProps) => Element

:gear: useNextProtect

Function	Type
useNextProtect	(props: NextProtectHookProps) => { isProtected: boolean or undefined; }

:wrench: Constants

• defaultOptions
• defaultNextProtectEndpoint

:gear: defaultOptions

Constant	Type
defaultOptions	NextProtectOptions

:gear: defaultNextProtectEndpoint

Constant	Type
defaultNextProtectEndpoint	"/api/next-protect"

:factory: NextProtect

Methods

• isProtected
• middleware
• GET
• POST

:gear: isProtected

Method	Type
isProtected	() => Promise<boolean>

:gear: middleware

Method	Type
middleware	(req: Request) => Promise<NextResponse<unknown>>

:gear: GET

Method	Type
GET	(req?: Request or undefined) => Promise<NextResponse<{ isProtected: boolean; }>>

:gear: POST

Method	Type
POST	(req: Request) => Promise<NextResponse<unknown>>