🥺

Next.jsのMiddleware(BASIC認証)をJavaScriptで

2022/08/31に公開

Vercelで構築中のNext.jsプロジェクトにてBASIC認証をかけることがあったので、メモ代わりに。
TypeScriptで書かれたものが多かったのでJS版です。

(※ Next.js初で、BASIC認証のかけ方が全然わからず泣きながら詰みに詰みまくって諦めかけたころに動いたものです。間違っていたらコメントで教えていただけると幸いです)

環境

  • Next.js@12.2.5
  • Vercel

Code

プロジェクトのrootにmiddleware.jsを作成

middleware.js
import { NextRequest, NextResponse} from 'next/server'

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

export function middleware(req) {
  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.jsを作成

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

参考

https://zenn.dev/a_da_chi/articles/52bc6954f95191
https://nextjs.org/docs/api-reference/next/server#why-does-redirect-use-307-and-308
https://github.com/vercel/examples/tree/main/edge-functions/basic-auth-password
https://qiita.com/memomaruRey/items/eb33d9d6226adcab070a
https://zenn.dev/nkzn/articles/vercel-plain-middleware-basic-auth

Discussion