honoBasicAuthMiddleware

You should use https://hono.dev/middleware/builtin/basic-auth instead.

Used to authenticate your HTTP vals build with Hono behind a username/password challenge. Browsers store this information alongside your other passwords.

In basicAuthButton, I secure two routes (one for viewing a value, one for updating it) behind a username/password combo stores in my Env variables.

Create val
/** @jsxImportSource npm:hono@3/jsx */
import { honoBasicAuthMiddleware } from "https://esm.town/v/jdan/honoBasicAuthMiddleware";
import { blob } from "https://esm.town/v/std/blob?v=12";
import { Hono } from "npm:hono";

/** Authenticate the URL */
const secretUsername = Deno.env.get("BUTTON_USERNAME");
const secretPassword = Deno.env.get("BUTTON_PASSWORD");
app.use(honoBasicAuthMiddleware(secretUsername, secretPassword));

app.get("/", async (c) => {
  const lastPressed = await blob.getJSON(blobStorageKey) || "Never";

  return c.html(
    <div>
      <h1>Last Pressed: {lastPressed}</h1>
      <form method="POST" action="/press">
        <input type="submit" />
      </form>
    </div>,
  );
});