ミドルウェアを使ってVercelにデプロイしたNext.js製のウェブサイトにBasic認証を設定する 🔐

追記

Next.js 13以降での設定方法をまとめました。

blog.kimizuka.org

Next.js 12から導入されたミドルウェアを使って、Basic認証を設定するサンプルを見つけたので試してみました。

nextjs.org

github.com

_middleware.ts

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

const USER_NAME = 'user';
const PASSWORD = 'password';

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

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

    if (user === USER_NAME && password === PASSWORD) {
      return NextResponse.next();
    }
  }

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

本当はユーザー名、パスワードは外部化した方が良いのですが、今回はスピード重視でファイルに書き込んでいます。

使い方

_middleware.tsを/pages直下に置けば、すべてのページでミドルウェアが実行され、Basic認証が掛かります。
/pages/articles/直下に置くなど、特定のディレクトリ以下のみBasic認証を掛けることも可能です。

localhost、Vercelで検証

ミドルウェアでBasic認証を設定したサイトですが、localhostでもVercelでも動作を確認できました。
なのでNext.jsでつくったサイトでは、以前調べた方法ではなく、ミドルウェアを活用していこうと思います。