Cloud Run + Next.js 上で Basic 認証

こちらも情報が少なかったので書いてみました。
※ セキュリティのリスクがあるため、本番でのBasic認証は避けましょう...！

実装

src/middleware.tsを作成します

middleware.ts

export { default } from "next-auth/middleware";
import basicAuth from 'basic-auth';
import type { NextRequest } from 'next/server';

// ここに認証したいページを定義します
export const config = {
  matcher: [
    '/((?!api|static|.*\\..*|_next).*)',
  ],
};

export function middleware(req: NextRequest) {
  const credentials = basicAuth({ headers: { authorization: req.headers.get('authorization') || '' } });
  const username = process.env.BASIC_AUTH_USERNAME;
  const password = process.env.BASIC_AUTH_PASSWORD;

  if (
    !credentials ||
    !username ||
    !password ||
    credentials.name !== username ||
    credentials.pass !== password
  ) {
    return new Response('認証が必要です', {
      status: 401,
      headers: {
        'WWW-Authenticate': 'Basic realm="Protected Area"',
      },
    });
  }
}

あとは.envに下記の環境変数を設定するだけ！

BASIC_AUTH_USERNAME=<ユーザー名>
BASIC_AUTH_PASSWORD=<パスワード>

最後に

Basic認証は、簡単で便利ですがセキュリティとしてはリスクがあるため
長期運用する場合にはDigest認証、GCP の I AM 認証などを使うのをおすすめします。