Zenn
🍨

Next.js 12 で、Basic認証を試してみた

2022/08/12に公開
Next.js
Node.js
tech

概要:

next.js 12で、basic認証を追加するメモとなります。

  • vercel等に、個人CMSを設置する際。firebaseライブラリ等追加準備が。
    毎回面倒とか思ってましたので。basic認証を試してみました。

  • ブラウザを閉じると認証情報が保存されずに、
    再起動時に毎回 認証ダイアログが開くのが面倒でしたが。使えそうでした

構成

  • next.js : 12

関連

参考のコード

https://gist.github.com/kuc-arc-f/459e28df0d4e87396dbf94133a41a458

  • 導入
npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/basic-auth-password basic-auth-password

middlewareの設定

  • .envから、USER/PASS を取得する例になります。
middleware.ts
// nextjs12_16basic_auth
// Next.js 12 で、Basic認証
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 === process.env.NEXT_PUBLIC_USER && pwd === process.env.NEXT_PUBLIC_PASS
      ) {
      return NextResponse.next()
    }
  }
  url.pathname = '/api/auth'

  return NextResponse.rewrite(url)
}
  • .env の参考
NEXT_PUBLIC_USER=hoge
NEXT_PUBLIC_PASS=fuga
  • basic認証の画面(ダイアログ)

....

Discussion