Doesn't work with App Router #83

billsbooth · 2023-12-11T20:20:49Z

Next.js updated their routing to app router which is not compatible with this version.

Jamedjo · 2024-02-23T19:48:58Z

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",
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work with App Router #83

Doesn't work with App Router #83

billsbooth commented Dec 11, 2023

Jamedjo commented Feb 23, 2024

Doesn't work with App Router #83

Doesn't work with App Router #83

Comments

billsbooth commented Dec 11, 2023

Jamedjo commented Feb 23, 2024

src/app/layout.tsx

checkAuthenticated

export default async function RootLayout

src/app/components/login/index.tsx

src/pages/api/login.ts