Rough outline of what I've used to get this working:

src/app/layout.tsx

checkAuthenticated

import { cookies } from 'next/headers'
import jwt from 'jsonwebtoken'
import { password } from "../consts"

async function checkAuthenticated(cookieName = 'next-password-protect'): Promise<boolean> {
  try {
    const authCookie = cookies().get(cookieName)

    if(!authCookie) {
      return false
    }

    /* NOTE: It's not usual to use the password as JWT secret, but since you already
     * have access to the environment when you know the password, in this specific
     * use case it doesn't add any value for an intruder if the secret is known.
     */
    jwt.verify(authCookie.value, password);

    return true
  } catch (e) {
    return false
  }
}

export default async function RootLayout

  const authenticated = await checkAuthenticated()

  if (!authenticated) {
    return (<html><body><Login/></body></html>)
  }

src/app/components/login/index.tsx

'use client';
import { LoginComponent } from 'next-password-protect/dist/esm/src/hoc/LoginComponent';

export default LoginComponent;

src/pages/api/login.ts

import { loginHandler } from "next-password-protect";
import { password } from "../../consts"

export default loginHandler(password, {
  cookieName: "next-password-protect",
});

Uh oh!

Doesn't work with App Router #83

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions