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

lamngo255 · 2024-08-08T06:29:36Z

@Jamedjo Awesome, thank you! I think we can save the password in .env.local file so that nosy people can't inspect the source code too 😄

// .env.local
NEXT_PUBLIC_PASSWORD_PROTECT=1234

Hope the maintainer can work on the official update for App Router soon, this is the best workaround for now.

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

lamngo255 commented Aug 8, 2024 •

edited

Loading

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

lamngo255 commented Aug 8, 2024 • edited Loading

lamngo255 commented Aug 8, 2024 •

edited

Loading