RemixでBASIC認証を使う

import { HeadersFunction, json, LoaderFunction, useLoaderData } from "remix";

export const headers: HeadersFunction = () => ({
  "WWW-Authenticate": "Basic",
});

const isAuthorized = (request: Request) => {
  const header = request.headers.get("Authorization");

  if (!header) return false;

  const base64 = header.replace("Basic ", "");
  const [username, password] = Buffer.from(base64, "base64")
    .toString()
    .split(":");

  // 環境変数などでIDとパスワードを渡す
  return username === "admin" && password === "password";
};

export const loader: LoaderFunction = async ({ request }) => {
  if (!isAuthorized(request)) {
    return json({ authorized: false }, { status: 401 });
  }

  // 認証されたページで利用するデータ

  return json({
    authorized: true,
    // 認証されたページで利用するデータを送る
  });
};

export default function Download() {
  const data = useLoaderData();

  if (!data.authorized) {
    return <p>Unauthorized</p>;
  }

  return <div>Authorized</div>;
}

const isAuthorized = (
  request: Request,
+  auth: { username: string; password: string }
) => {
  const header = request.headers.get("Authorization");

  if (!header) return false;

  const base64 = header.replace("Basic ", "");
  const [username, password] = Buffer.from(base64, "base64")
    .toString()
    .split(":");

  // 環境変数などでIDとパスワードを渡す
+  return username === auth.username && password === auth.password;
};

export const loader: LoaderFunction = async ({ request }) => {
+  if (!isAuthorized(request, { username: "hoge", password: "fuga" })) {
    return json({ authorized: false }, { status: 401 });
  }

  // 認証されたページで利用するデータ

  return json({
    authorized: true,
    // 認証されたページで利用するデータを送る
  });
};