Is there a way to protect specific pages?

[kobe651jp]

For example, limited document disclosure for logged-in users only.

Regarding private documents, search keywords are also excluded from unlogged-in users.

[VinylmastersLtd]

I would like this too

[fyfirman]

Hello,
I just figure it out the solution using basic-auth template that Vercel provided here. I wrote the journey in my personal documentation here. I put the summary here:

---

We will use the middleware, so every request that matches it will run the function to check whether the auth is provided or not. The first thing we need to do is add middleware.ts at the root of projects, which contains these code:

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: [
    '/private/(.*)',
    '/_next/static/chunks/pages/private/(.*)'
  ],
}

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get("authorization");
  const url = req.nextUrl;

  if (basicAuth) {
    const authValue = basicAuth.split(" ")[1];
    const [user, pwd] = atob(authValue).split(":");

    if (user === "user" && pwd === "password") {
      return NextResponse.next();
    }
  }
  url.pathname = "/api/auth";

  return NextResponse.rewrite(url);
}

That code will redirect to the endpoint /api/auth if the authentication is not provided. The API just showing 401 because the authorization will happen on the above file. Then, for the API we can create at /pages/api/auth.ts

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(_: NextApiRequest, res: NextApiResponse) {
  res.setHeader("WWW-authenticate", 'Basic realm="Secure Area"');
  res.statusCode = 401;
  res.end(`Auth Required.`);
}

[abenhamdine]

I confirm that this solution works perfectly, thx !

[ChiaYuSu]

is there any logout method