🍣

Next.js on Vercel / App RouterでAI駆動開発をするときのメモ

に公開

Basic認証

src/middleware.ts
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json(
    { error: 'Basic Auth Required' },
    {
      status: 401,
      headers: { 'WWW-Authenticate': "Basic realm='secure_area'" },
    },
  );
}
basic-auth.ts
import { NextRequest, NextResponse } from 'next/server';

export const config = {
  matcher: ['/:path*'], // すべてのページに適用
};

export function middleware(req: NextRequest) {
  // 環境変数が設定されていない場合は認証をスキップ
  if (!process.env.BASIC_AUTH_PASSWORD) {
    // console.log('BASIC_AUTH_PASSWORD が設定されていません。認証をスキップします。');
    return NextResponse.next();
  }

  const basicAuth = req.headers.get('authorization');
  const url = req.nextUrl;

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

    if (
      user === process.env.BASIC_AUTH_USERNAME &&
      pwd === process.env.BASIC_AUTH_PASSWORD
    ) {
      console.log('認証成功'); // ★★★ 認証成功ログ ★★★
      return NextResponse.next();
    } else {
       console.log('認証失敗: ユーザー名またはパスワードが一致しません'); // ★★★ 認証失敗ログ ★★★
    }
  } else {
    console.log('Authorizationヘッダーが見つかりません'); // ★★★ ヘッダーなしログ ★★★
  }
  url.pathname = '/api/basic-auth';

  return NextResponse.rewrite(url);
}

Discussion