Vercel による Basic 認証

(2024-04-06)

ブログのある部分にアクセス制限をかけたいと思って、いろいろ試してみたのですが最終的に Vercel の BASIC 認証を設定することにしました。

lucia による認証ではタグ検索ができない

おそらく上級者にはできると思いますが、私の現在の実力では lucia 実装まではなんとかできましたが、検索機能を付けようとするとエラーで動かなくなりました。

少なくともタグ検索は必要だと思っているので、lucia の実装を諦めることにしました。

Vercel における BASIC 認証

これはネット情報で割と簡単に実装できました。

以下の 3 つを設定すればできます。

1. @vercel/edge のインストール
2. middleware.tsの設置
3. Vercelで環境変数を設定

@vercel/edge のインストール

npm install @vercel/edge

middleware.tsの設置

ルートディレクトリに middleware.ts を設置します。

middleware.ts
import { next } from "@vercel/edge";


export const config = {
  matcher: "/",
};


export default function middleware(request: Request) {
  const authorizationHeader = request.headers.get("authorization");


  if (authorizationHeader) {
    const basicAuth = authorizationHeader.split(" ")[1];
    const [user, password] = atob(basicAuth).toString().split(":");


    if (user === process.env.BASIC_AUTH_USER && password === process.env.BASIC_AUTH_PASSWORD) {
      return next();
    }
  }


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

Vercelで環境変数を設定

Vercel にログインして、「Settings」→「Environment Variables」で、 「Key」に「BASIC_AUTH_USER」と「BASIC_AUTH_PASSWORD」を設定します。

もし反映されない場合は、ReDeploy します。

これはほとんど、

https://note.com/valagfare/n/n1f05bc721f2c

のコピーです。

自分で考えてできるものではないですね。