【Next.js 12】basic認証を簡単に実装可能に！【検証】

2021-11-202024-03-23

当ページのリンクには広告が含まれています。

URLをコピーしました！

社内ツール用や、検索されたくないWebページなどセキュリティをそこまで気にしなくても良い場合にはベーシック認証は便利です。

今回は、Next.js 12で実装されたベーシック認証の方法を備忘として記載します。

ベーシック認証を知らない方は、下記が参考になります。

CyberSecurityTIMES

簡易的な認証方法、『Basic認証』について知ろう！ | セキュリティ対策 | CyberSecurityTIMES Basic認証はその名の通り、Webサイトに対して必要最低限の認証設定をかけることを指します。Webサイトを公開する前に、特定の人にだけアクセスができるようにしたい時など…

basic認証の追加方法

Next.js 公式サンプル

Next.jsのプロジェクト作成後、pagesディレクトリに_middleware.tsとして下記を配置します。

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
  const basicAuth = req.headers.get('authorization')

  if (basicAuth) {
    const auth = basicAuth.split(' ')[1]
    const [user, pwd] = Buffer.from(auth, 'base64').toString().split(':')

    if (user === '4dmin' && pwd === 'testpwd123') {
      return NextResponse.next()
    }
  }

  return new Response('Auth required', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  })
}

これだけです！

適宜usernameやpasswordなどは環境変数(.env.local)に入れるのも良いかと思います。

確認

ローカルサーバーを立ち上げて確認してみます。

いやー面倒な設定も不要で最高ですね！

参考記事

GitHub

examples/edge-functions/basic-auth-password at main · vercel/examples Enjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications. – vercel/examples