🥺

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

2022/08/31に公開

JavaScript

Next.js

React

tech

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.`)
}

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

環境

Code

参考

Discussion