Next.js に Basic 認証を追加する

2024-07-18

はじめに

Next.js の Middleware を利用して Basic 認証を追加します。

Basic 認証追加

既存のプロジェクトへ /middleware.ts を追加します。

Middleware を定義するには、プロジェクトのルートにある middleware.ts（または.js）ファイルを使用します。例えば、pages や app と同じレベルか、存在する場合は src の中です。

コード

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export const config = {
  matcher: ['/']
}

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get('authorization')

  if (basicAuth) {
    const authValue = basicAuth.split(' ')[1]
    const [user, password] = atob(authValue).split(':')

    const validUser = process.env['BASIC_AUTH_USER']
    const validPwd = process.env['BASIC_AUTH_PASSWORD']

    if (user === validUser && password === validPwd) {
      return NextResponse.next()
    }
  }

  return new NextResponse('Unauthorized', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"'
    }
  })
}

コード詳細

matcher: ['/'] でサイトの全ての url を対象にします
req.headers.get('authorization') に認証情報が含まれるかチェックします
process.env['BASIC_AUTH_USER'] で環境変数から取得した値を利用します
NextResponse.next() で元々の指定先 URL へ転送します
認証 NG の場合は、 'WWW-Authenticate': 'Basic realm="Secure Area"' を返却し、ブラウザへ Basic 認証方式を使用していることを伝えます。

参考 URL

Next.js - Middleware