【NextJS】Basic認証の導入

こんにちは投資ロウトです。

背景

まだ正式に公開したくないですが、画面デザイン等の確認で、Basic認証の導入が必要と求められることがあると思います。
※NextJSの環境にて

実装方法

以下の実装を行えば、Basic認証を導入できます。

// src配下に以下のソースを導入
// ファイル名はmiddleware.tsで導入

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

export function middleware(req: NextRequest) {
  const url = req.nextUrl;
  if (!url.pathname.startsWith("/")) return;

  const basicAuth = req.headers.get("authorization");

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

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

  return NextResponse.rewrite(url);
}

// プロジェクト名/src/app/api/auth/route.tsに配置

import { NextResponse } from "next/server";

export function GET() {
  const response = new NextResponse("Basic Auth Required", { status: 401 });
  response.headers.set("WWW-authenticate", 'Basic realm="Secure Area"');
  return response;
}

パスワードの設定場所

# .envはルートディレクトリに配置

BASIC_AUTH_ID=設定したいID
BASIC_AUTH_PASSWORD=設定したいパスワード

以上です。