主に次の記事を参照して、ベーシック認証の実装方法を紹介する。
middleware.tsファイルをプロジェクトに追加すると、Next.js が自動的に認識して処理を行ってくれる。
middleware.ts
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にリダイレクトされ、そこで認証処理が行われる。
pages/api/auth.ts
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.`);
}
