はじめに
Next.jsでBasic認証を導入しようと思いましたが、TypeScriptで記載されたサンプルしか見つけられなかったため、JavaScript版を作成しました。
Next.jsでBasic認証を導入する方法
以下をpages
フォルダ配下に作成する
import { NextRequest, NextResponse } from 'next/server'
export function middleware(req) {
const basicAuth = req.headers.get('authorization')
if (basicAuth) {
const auth = basicAuth.split(' ')[1]
const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')
if (user === process.env.NEXT_PUBLIC_USER && pwd === process.env.NEXT_PUBLIC_PASS) {
return NextResponse.next()
}
}
return new Response('Auth required', {
status: 401,
headers: {
'WWW-Authenticate': 'Basic realm="Secure Area"',
},
})
}
Buffer.fromでエラーが出た場合は、以下コマンドでbufferを導入する
npm install buffer
ユーザ名やパスワードは環境変数で定義する
NEXT_PUBLIC_USER=hoge
NEXT_PUBLIC_PASS=fuga
検証
環境変数を更新したので、サーバを再起動する
npm run dev
npm run devでpackage.jsonに記載のnext dev
が動作する
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"buffer": "^6.0.3",
"next": "latest",
"react": "17.0.2",
"react-dom": "17.0.2"
}
}
http://localhost:3000 にアクセスすると、ベーシック認証画面が表示される。
ユーザ名にhoge, パスワードにfugaと入れると認証される。
キャンセルを押下すると、以下のAuth requiredが表示される。
この文言は_middleware.js
で変更できる
参考
https://github.com/vercel/examples/tree/main/edge-functions/basic-auth-password
https://tech.012grp.co.jp/entry/2021/11/08/083809
https://stackoverflow.com/questions/70169772/how-to-unprotect-route-in-next-js-middleware