主に次の記事を参照して、ベーシック認証の実装方法を紹介する。

Next.jsでBasic認証を設定する

zenn.dev

Next.js 13：Basic認証の実装方法とつまづいた点...

zenn.dev

middleware.tsファイルをプロジェクトに追加すると、Next.js が自動的に認識して処理を行ってくれる。

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

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

  const BASIC_USER = process.env.BASIC_USER;
  const BASIC_PASSWORD = process.env.BASIC_PASSWORD;

  if (!BASIC_USER || !BASIC_PASSWORD) {
    return NextResponse.next();
  }

  if (basicAuth) {
    const authValue = basicAuth.split(" ")[1];
    const [user, pwd] = Buffer.from(authValue, "base64").toString().split(":");

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

  return NextResponse.rewrite(url);
}

参照先の記事から少し変更した点は次のとおり。

• 環境変数BASIC_USERとBASIC_PASSWORDが設定されていない場合は認証を適用しない
  • 認証を適用したい環境だけに環境変数を設定すればよい
  • たとえばローカル開発中など、認証が不要な場合は容易に無効化できる

認証が通らない場合、リクエストは/api/authにリダイレクトされ、そこで認証処理が行われる。

import { NextApiRequest, NextApiResponse } from "next";

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