expressでライブラリを使わずBasic認証を簡単に導入する

Basic認証の実装

import { RequestHandler } from "express";
import { Secret } from "../Configs/Secret";

export const authBasic: RequestHandler = (req, res, next) => {
  const authValue = req.header("authorization") || "";

  const requestBasicAuthDialog = () => {
    res.setHeader("WWW-Authenticate", "Basic");
    res.sendStatus(401);
  };

  if (authValue.length == 0) return requestBasicAuthDialog();

  const basicValue = authValue.split("Basic ")[1];
  const basicString = Buffer.from(basicValue, "base64").toString();
  const splitedString = basicString.split(":");
  const userId = splitedString[0];
  const password = splitedString[1];

  if (
    userId == Secret.BASIC_AUTH.USER_ID &&
    password == Secret.BASIC_AUTH.PASSWORD
  )
    return next();
  else return requestBasicAuthDialog();
};

Response headerに WWW-Authenticate を含めるとブラウザから自動でBasic認証のダイアログが表示されます。
ダイアログが表示され、ログインするまでの流れは以下のようになっています。

1. 該当パスにアクセスし、authorizationヘッダの値が空なので上記のヘッダを返し、ダイアログを表示します
2. ダイアログにID, Passwordを入力して送信すると、同一のパスにリクエストが再び来て、今度はauthorizationヘッダに値が入っているので、それをみて正しければnext()でRouterに設定されたハンドラーを実行、正しくなければ再度ダイアログを表示します

使い方

import express from "express";
import { authBasic } from "../Middlewares/authBasic"

export const rootRouter = express.Router();

rootRouter.use("/", authBasic);

rootRouter.get("/", (req, res) => {
  res.send("Hi, owner!");
});