Next.jsでBasic認証を設定する

Next.jsで作成したアプリケーションにBasic認証を設定します。
今回はこちらのサンプルコードを使用しました。

https://github.com/vercel/examples/tree/main/edge-middleware/basic-auth-password

middleware.ts

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

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

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

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

    if (user === 'username' && pwd === 'password') {
      return NextResponse.next()
    }
  }
  url.pathname = '/api/auth'

  return NextResponse.rewrite(url)
}

pages/api/auth.ts

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(_: NextApiRequest, res: NextApiResponse) {
  res.setHeader('WWW-authenticate', 'Basic realm="Secure Area"')
  res.statusCode = 401
  res.end(`Auth Required.`)
}

実際の運用では環境変数に置き換える等が必要になるかもしれませんが、今回はこのまま進めました。

その他

公式のドキュメントによるとMiddlewareはNext.js 12.2.0からstableとなったらしく、その時に実装上の破壊的変更(Breaking changes）がありました。そのため、Basic認証の設定について調べていた時に、以前のバージョンを使用していたいくつかの記事と現在では実装方法が異なりました。

変更箇所については以下の記事が参考になります。

https://nextjs.org/docs/advanced-features/middleware#using-middleware

https://nextjs.org/docs/messages/middleware-upgrade-guide