mevebu 2.1.0 → 2.3.0

package/mevebu/libs/js/tools/totp-verifier.js

@@ -0,0 +1,183 @@
+// Check a code against a secret, with a drift window. This is the other half of
+// the generator: a failing integration needs to know whether the secret or the
+// clock is wrong, and the drift count is the answer.
+import {
+  el, icon, bench, stack, panel, textInput, selectInput, numberInput, button,
+  actions, toolcard, notice, chipRow,
+} from "../core.js";
+import { base32Decode, parseOtpUri, totp } from "../totp.js";
+
+export function mount(slot) {
+  let result = null;
+
+  const secret = textInput({
+    placeholder: "JBSWY3DPEHPK3PXP or otpauth://totp/...",
+    "aria-label": "Secret",
+    class: "font-mono",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+  const codeInput = textInput({
+    placeholder: "123456",
+    "aria-label": "Code",
+    class: "font-mono tracking-[0.2em]",
+    inputmode: "numeric",
+    autocomplete: "off",
+  });
+  const digits = selectInput(
+    [
+      { value: "6", label: "6 digits" },
+      { value: "8", label: "8 digits" },
+    ],
+    { value: "6", "aria-label": "Digits" }
+  );
+  const period = numberInput({ min: "5", max: "300", step: "1", value: "30", "aria-label": "Period in seconds" });
+  const drift = numberInput({ min: "0", max: "10", step: "1", value: "1", "aria-label": "Drift steps" });
+
+  const at = el("input", {
+    class: "w-full min-h-[var(--ctl)] rounded-r1 border border-orbit bg-deck px-3 py-2.5 font-mono text-sm focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    type: "datetime-local",
+    "aria-label": "Timestamp",
+  });
+
+  const error = notice("warn");
+  const verdict = el("div", { class: "grid gap-1.5 rounded-r2 border border-orbit bg-deck-2 p-4" });
+  const verdictTitle = el("p", { class: "m-0 text-xl font-bold tracking-[-0.02em]" }, "Waiting");
+  const verdictBody = el("p", { class: "m-0 text-sm leading-[1.6] text-ink-2" }, "Paste a secret and a code.");
+  const candidates = el("div", { class: "grid gap-1.5" });
+  verdict.append(verdictTitle, verdictBody, candidates);
+
+  const check = button("Check code", { icon: "shield-check", kind: "fill" });
+
+  function readSecret() {
+    const raw = secret.value.trim();
+    if (!raw) return null;
+    const uri = parseOtpUri(raw);
+    if (uri) {
+      if (uri.secret) {
+        if (uri.digits) digits.value = String(uri.digits === 8 ? 8 : 6);
+        if (uri.period) period.value = String(uri.period);
+      }
+      return base32Decode(uri.secret);
+    }
+    return base32Decode(raw);
+  }
+
+  function paint(state, title, body, rows = []) {
+    const tone = state === "ok"
+      ? "border-jade bg-jade-soft text-jade"
+      : state === "bad"
+        ? "border-danger/40 bg-danger/10 text-danger"
+        : "border-orbit bg-deck-2 text-ink";
+    verdict.className = `grid gap-1.5 rounded-r2 border p-4 ${tone}`;
+    verdictTitle.textContent = title;
+    verdictBody.textContent = body;
+    verdictBody.className = state === "ok" || state === "bad" ? "m-0 text-sm leading-[1.6]" : "m-0 text-sm leading-[1.6] text-ink-2";
+    candidates.replaceChildren(
+      ...rows.map((row) =>
+        el("div", { class: "flex items-center justify-between gap-3 border-t border-current/15 pt-1.5 text-sm" },
+          el("span", { class: "font-mono text-2xs tabular-nums" }, row.code),
+          el("span", { class: "text-2xs font-semibold" }, row.label)))
+    );
+  }
+
+  async function run() {
+    error.write("");
+    candidates.replaceChildren();
+    try {
+      const bytes = readSecret();
+      if (!bytes) {
+        paint("idle", "Waiting", "Paste a secret and a code.");
+        return;
+      }
+      const typed = codeInput.value.replace(/\s+/g, "");
+      if (!/^\d{4,10}$/.test(typed)) {
+        paint("idle", "Waiting", "The code should be digits only.");
+        return;
+      }
+
+      const size = Number(digits.value) || 6;
+      const step = Math.max(5, Number(period.value) || 30);
+      const window = Math.max(0, Math.min(10, Number(drift.value) || 0));
+      const stamp = at.value ? new Date(at.value).getTime() : Date.now();
+      if (Number.isNaN(stamp)) throw new Error("That timestamp is not a date.");
+
+      const rows = [];
+      let match = null;
+      for (let offset = -window; offset <= window; offset++) {
+        const candidate = await totp(bytes, {
+          digits: size,
+          period: step,
+          timestamp: stamp + offset * step * 1000,
+        });
+        const label = offset === 0 ? "current step" : offset < 0 ? `${-offset} step earlier` : `${offset} step later`;
+        rows.push({ code: candidate, label });
+        if (candidate === typed && !match) match = { offset, code: candidate };
+      }
+
+      if (match) {
+        paint(
+          "ok",
+          "Match",
+          match.offset === 0
+            ? "The code is valid for the current step."
+            : `The code is valid, ${Math.abs(match.offset)} step${Math.abs(match.offset) === 1 ? "" : "s"} ${match.offset < 0 ? "earlier" : "later"} than the current one.`,
+          rows
+        );
+      } else {
+        paint(
+          "bad",
+          "No match",
+          `None of the ${rows.length} steps around that time produce ${typed}. Check the secret, the digits and the period.`,
+          rows
+        );
+      }
+    } catch (caught) {
+      paint("idle", "Waiting", "");
+      error.write(caught?.message || "That secret could not be read.");
+    }
+  }
+
+  check.addEventListener("click", run);
+  secret.addEventListener("input", run);
+  codeInput.addEventListener("input", run);
+  digits.addEventListener("change", run);
+  period.addEventListener("change", run);
+  drift.addEventListener("input", run);
+  at.addEventListener("change", run);
+
+  const useNow = button("Use now", {
+    icon: "clock",
+    kind: "quiet",
+    onclick: () => {
+      const now = new Date();
+      const local = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
+      at.value = local;
+      run();
+    },
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Secret", secret, "Base32, or a full otpauth:// URI."),
+        panel("Code to check", codeInput),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Digits", digits), panel("Period", period)),
+        panel("Drift window", drift, "How many steps either side to accept. One is the usual allowance."),
+        panel("Timestamp", at, "Leave empty to use the clock now."),
+        useNow,
+        error
+      ),
+      stack(verdict)
+    ),
+    foot: actions(check),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/totp.js

@@ -0,0 +1,117 @@
+// TOTP, the six digit code an authenticator app shows. RFC 6238 over RFC 4226,
+// with HMAC from Web Crypto, so the secret never leaves the tab.
+//
+// The secret is Base32, which is why this file carries a decoder: every
+// `otpauth://` URI and every authenticator export uses that alphabet.
+
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+
+/** Base32 to bytes. Case insensitive, spaces and padding ignored. */
+export function base32Decode(input) {
+  const clean = String(input).toUpperCase().replace(/[\s=-]/g, "");
+  if (!clean) throw new Error("The secret is empty.");
+  let bits = 0;
+  let value = 0;
+  const out = [];
+  for (const char of clean) {
+    const index = ALPHABET.indexOf(char);
+    if (index < 0) throw new Error(`"${char}" is not a Base32 character.`);
+    value = (value << 5) | index;
+    bits += 5;
+    if (bits >= 8) {
+      out.push((value >>> (bits - 8)) & 0xff);
+      bits -= 8;
+    }
+  }
+  if (!out.length) throw new Error("That secret decodes to no bytes.");
+  return new Uint8Array(out);
+}
+
+/** Parses an `otpauth://totp/...` URI into its parts, or returns null. */
+export function parseOtpUri(text) {
+  const clean = String(text).trim();
+  if (!clean.toLowerCase().startsWith("otpauth://")) return null;
+  let url;
+  try {
+    url = new URL(clean);
+  } catch {
+    throw new Error("That otpauth URI is not a valid URL.");
+  }
+  const params = url.searchParams;
+  const label = decodeURIComponent(url.pathname.replace(/^\/+/, ""));
+  return {
+    type: (url.hostname || "totp").toLowerCase(),
+    label,
+    issuer: params.get("issuer") ?? "",
+    secret: params.get("secret") ?? "",
+    digits: Number(params.get("digits") ?? 6),
+    period: Number(params.get("period") ?? 30),
+    algorithm: (params.get("algorithm") ?? "SHA1").toUpperCase().replace("-", ""),
+  };
+}
+
+const HASH = { SHA1: "SHA-1", SHA256: "SHA-256", SHA512: "SHA-512" };
+
+/** HOTP for one counter value, as a zero padded string. */
+export async function hotp(secret, counter, { digits = 6, algorithm = "SHA1" } = {}) {
+  const hash = HASH[algorithm] ?? "SHA-1";
+  const key = await crypto.subtle.importKey(
+    "raw",
+    secret,
+    { name: "HMAC", hash },
+    false,
+    ["sign"]
+  );
+  // The counter is an 8 byte big endian integer. JavaScript numbers lose
+  // precision above 2^53, so the high word is written separately.
+  const buffer = new ArrayBuffer(8);
+  const view = new DataView(buffer);
+  view.setUint32(0, Math.floor(counter / 2 ** 32));
+  view.setUint32(4, counter >>> 0);
+  const signature = new Uint8Array(await crypto.subtle.sign("HMAC", key, buffer));
+
+  // Dynamic truncation, RFC 4226 section 5.4.
+  const offset = signature[signature.length - 1] & 0x0f;
+  const binary =
+    ((signature[offset] & 0x7f) << 24) |
+    (signature[offset + 1] << 16) |
+    (signature[offset + 2] << 8) |
+    signature[offset + 3];
+  return String(binary % 10 ** digits).padStart(digits, "0");
+}
+
+/** The TOTP code for a timestamp in milliseconds. */
+export async function totp(secret, { digits = 6, period = 30, algorithm = "SHA1", timestamp = Date.now() } = {}) {
+  const counter = Math.floor(timestamp / 1000 / period);
+  return hotp(secret, counter, { digits, algorithm });
+}
+
+/** Seconds left in the current step, and how far through it we are. */
+export function stepProgress(period = 30, timestamp = Date.now()) {
+  const seconds = timestamp / 1000;
+  const left = period - (seconds % period);
+  return { left, ratio: left / period };
+}
+
+/** The secret as spaced groups, which is how authenticator apps show it. */
+export function formatSecret(text) {
+  return String(text).toUpperCase().replace(/[^A-Z2-7]/g, "").replace(/(.{4})/g, "$1 ").trim();
+}
+
+/** A random Base32 secret of the given byte length. */
+export function randomSecret(bytes = 20) {
+  const raw = crypto.getRandomValues(new Uint8Array(bytes));
+  let bits = 0;
+  let value = 0;
+  let out = "";
+  for (const byte of raw) {
+    value = (value << 8) | byte;
+    bits += 8;
+    while (bits >= 5) {
+      out += ALPHABET[(value >>> (bits - 5)) & 31];
+      bits -= 5;
+    }
+  }
+  if (bits > 0) out += ALPHABET[(value << (5 - bits)) & 31];
+  return out;
+}