🥺
Next.jsのMiddleware(BASIC認証)をJavaScriptで
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.`)
}
参考
Discussion