cauthy-auth 0.9.0 → 0.11.0

package/dist/react.mjs

@@ -3,6 +3,73 @@
 // src/react.tsx
 import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
+// src/passkey.ts
+function canUsePasskeys() {
+  return typeof window !== "undefined" && typeof window.PublicKeyCredential === "function" && typeof navigator !== "undefined" && typeof navigator.credentials?.get === "function";
+}
+function bytes(text2) {
+  const b64 = text2.replace(/-/g, "+").replace(/_/g, "/").padEnd(Math.ceil(text2.length / 4) * 4, "=");
+  const bin = atob(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out.buffer;
+}
+function text(buf) {
+  if (!buf) return null;
+  const view = new Uint8Array(buf);
+  let bin = "";
+  for (let i = 0; i < view.byteLength; i++) bin += String.fromCharCode(view[i]);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+var withId = (list) => (list ?? []).map((c) => ({ ...c, id: bytes(c.id) }));
+async function getPasskey(options) {
+  const publicKey = { ...options, challenge: bytes(options.challenge), allowCredentials: withId(options.allowCredentials) };
+  const cred = await navigator.credentials.get({ publicKey });
+  if (cred === null) throw new DOMException("No passkey was chosen.", "NotAllowedError");
+  const r = cred.response;
+  return {
+    id: cred.id,
+    rawId: text(cred.rawId),
+    type: cred.type,
+    response: {
+      authenticatorData: text(r.authenticatorData),
+      clientDataJSON: text(r.clientDataJSON),
+      signature: text(r.signature),
+      userHandle: text(r.userHandle)
+    },
+    clientExtensionResults: cred.getClientExtensionResults?.() ?? {}
+  };
+}
+async function makePasskey(options) {
+  const publicKey = {
+    ...options,
+    challenge: bytes(options.challenge),
+    user: { ...options.user, id: bytes(options.user.id) },
+    excludeCredentials: withId(options.excludeCredentials)
+  };
+  const cred = await navigator.credentials.create({ publicKey });
+  if (cred === null) throw new DOMException("No passkey was made.", "NotAllowedError");
+  const r = cred.response;
+  return {
+    id: cred.id,
+    rawId: text(cred.rawId),
+    type: cred.type,
+    response: {
+      clientDataJSON: text(r.clientDataJSON),
+      attestationObject: text(r.attestationObject),
+      transports: typeof r.getTransports === "function" ? r.getTransports() : []
+    },
+    clientExtensionResults: cred.getClientExtensionResults?.() ?? {}
+  };
+}
+function ceremonyError(e) {
+  const name = e instanceof Error || e instanceof DOMException ? e.name : "";
+  if (name === "NotAllowedError" || name === "AbortError") return { code: "cancelled", message: "The passkey was not used. Try again when you are ready." };
+  if (name === "InvalidStateError") return { code: "passkey_exists", message: "This device already has a passkey for this account." };
+  if (name === "SecurityError") return { code: "passkey_unavailable", message: "Passkeys cannot be used on this page." };
+  return { code: "passkey_failed", message: "The passkey could not be used. Try again, or sign in another way." };
+}
+
 // src/theme.ts
 function themeVariables(theme) {
   const vars = {};
@@ -105,13 +172,17 @@ var UNAVAILABLE = { code: "unavailable", message: "Sign-in is unavailable right
 function createAuthClient(options = {}) {
   const base = (options.basePath ?? "/api/auth").replace(/\/+$/, "");
   const doFetch = (...args) => (options.fetch ?? fetch)(...args);
+  const locale = () => {
+    const said = typeof options.locale === "function" ? options.locale() : options.locale;
+    return (said ?? (typeof document === "undefined" ? "" : document.documentElement?.lang) ?? "").trim();
+  };
   async function post(path, form, bad) {
     if (bad) return { ok: false, error: { code: bad.code, message: bad.message, field: bad.field } };
     try {
       const res = await doFetch(`${base}${path}`, {
         method: "POST",
         credentials: "same-origin",
-        headers: { "content-type": "application/json", accept: "application/json" },
+        headers: { "content-type": "application/json", accept: "application/json", ...locale() ? { "x-cauthy-locale": locale() } : {} },
         body: JSON.stringify(form)
       });
       const body = await res.json().catch(() => null);
@@ -139,6 +210,28 @@ function createAuthClient(options = {}) {
     if (o.locale) q.set("locale", o.locale);
     return `${base}/login?${q}`;
   };
+  async function methods() {
+    try {
+      const res = await doFetch(`${base}/methods`, { credentials: "same-origin", headers: { accept: "application/json" } });
+      if (res.ok) {
+        const m = await res.json();
+        return { providers: [], signUp: true, magicLink: false, passkey: false, ...m, passkeyHere: m.passkeyHere === true, passkeyOnCauthy: m.passkeyOnCauthy ?? m.passkey === true };
+      }
+    } catch {
+    }
+    return { providers: [], signUp: true, magicLink: false, passkey: false, passkeyHere: false, passkeyOnCauthy: false };
+  }
+  async function ceremony(begin, finish, form, run, more = {}) {
+    const begun = await post(begin, form, null);
+    if (!begun.ok) return begun;
+    let credential;
+    try {
+      credential = await run(begun.options);
+    } catch (e) {
+      return { ok: false, error: ceremonyError(e) };
+    }
+    return post(finish, { credential, ...more }, null);
+  }
   return {
     signIn: {
       email: (f) => post("/sign-in/email", { email: f.email, password: f.password }, firstProblem(checkEmail(f.email), checkPassword(f.password))),
@@ -147,8 +240,16 @@ function createAuthClient(options = {}) {
       magicLinkVerify: (f) => post("/sign-in/magic-link/verify", { token: f.token }, null),
       emailCode: (f) => post("/sign-in/email-code", { code: f.code }, checkCode(f.code)),
       passkeyUrl,
-      passkey(o) {
+      async passkey(o) {
+        const m = await methods();
+        if (m.passkeyHere && canUsePasskeys()) {
+          const r = await ceremony("/sign-in/passkey/begin", "/sign-in/passkey/finish", {}, getPasskey);
+          if (r.ok || r.error.code !== "passkey_unavailable" || !m.passkeyOnCauthy) return r;
+        } else if (!m.passkeyOnCauthy) {
+          return { ok: false, error: { code: "passkey_unavailable", message: "Passkeys cannot be used here." } };
+        }
         window.location.assign(passkeyUrl(o));
+        return { ok: true, status: "redirected" };
       },
       socialUrl,
       social(provider, o) {
@@ -192,7 +293,16 @@ function createAuthClient(options = {}) {
         const body = await read("/me/sessions");
         return body && Array.isArray(body.sessions) ? body.sessions : [];
       },
-      signOutEverywhere: () => post("/me/sessions/end", {}, null)
+      signOutEverywhere: () => post("/me/sessions/end", {}, null),
+      async passkeys() {
+        const body = await read("/me/passkeys");
+        return body && Array.isArray(body.passkeys) ? body.passkeys : [];
+      },
+      addPasskey(f = {}) {
+        if (!canUsePasskeys()) return Promise.resolve({ ok: false, error: { code: "passkey_unavailable", message: "This browser cannot make passkeys." } });
+        return ceremony("/me/passkeys/add/begin", "/me/passkeys/add/finish", { password: f.password ?? "" }, makePasskey, { name: f.name ?? "" });
+      },
+      removePasskey: (id) => post("/me/passkeys/remove", { id }, null)
     },
     async getSession() {
       try {
@@ -207,14 +317,7 @@ function createAuthClient(options = {}) {
       looked ??= read("/look").then((wire) => wire && typeof wire === "object" ? fromWire(wire) : null);
       return looked;
     },
-    async methods() {
-      try {
-        const res = await doFetch(`${base}/methods`, { credentials: "same-origin", headers: { accept: "application/json" } });
-        if (res.ok) return await res.json();
-      } catch {
-      }
-      return { providers: [], signUp: true, magicLink: false, passkey: false };
-    }
+    methods
   };
 }
 
@@ -321,6 +424,13 @@ var TEXTS = {
     keepCodes: "Keep these codes somewhere safe. Each works once, and they are not shown again.",
     passkeys: "Passkeys",
     managePasskeys: "Add or remove a passkey",
+    passkeysHelp: "Sign in with your fingerprint, your face or your device's lock, without a password.",
+    noPasskeys: "No passkey yet.",
+    passkeyName: "A name for this device (optional)",
+    addPasskey: "Add a passkey on this device",
+    removePasskey: "Remove",
+    passkeyAdded: "The passkey was added. Next time, sign in with it.",
+    passkeyUnnamed: "Passkey",
     sessions: "Where you are signed in",
     signOutEverywhere: "Sign out everywhere",
     unknownDevice: "Unknown device",
@@ -351,7 +461,10 @@ var TEXTS = {
       wrong_password: "The current password is not right.",
       step_up_required: "Enter your current password.",
       weak_password: "Choose a stronger password.",
-      unauthenticated: "Sign in first."
+      unauthenticated: "Sign in first.",
+      passkey_failed: "The passkey could not be used. Try again, or sign in another way.",
+      passkey_exists: "This device already has a passkey for your account.",
+      passkey_unavailable: "Passkeys cannot be used here."
     }
   },
   es: {
@@ -400,6 +513,13 @@ var TEXTS = {
     keepCodes: "Guarda estos c\xF3digos en un lugar seguro. Cada uno sirve una vez y no se vuelven a mostrar.",
     passkeys: "Llaves de acceso",
     managePasskeys: "Agregar o quitar una llave de acceso",
+    passkeysHelp: "Entra con tu huella, tu rostro o el bloqueo de tu dispositivo, sin contrase\xF1a.",
+    noPasskeys: "Todav\xEDa no tienes llaves de acceso.",
+    passkeyName: "Un nombre para este dispositivo (opcional)",
+    addPasskey: "Agregar una llave en este dispositivo",
+    removePasskey: "Quitar",
+    passkeyAdded: "La llave de acceso qued\xF3 agregada. La pr\xF3xima vez, entra con ella.",
+    passkeyUnnamed: "Llave de acceso",
     sessions: "D\xF3nde tienes la sesi\xF3n abierta",
     signOutEverywhere: "Cerrar sesi\xF3n en todas partes",
     unknownDevice: "Dispositivo desconocido",
@@ -430,7 +550,10 @@ var TEXTS = {
       wrong_password: "La contrase\xF1a actual no es correcta.",
       step_up_required: "Escribe tu contrase\xF1a actual.",
       weak_password: "Elige una contrase\xF1a m\xE1s fuerte.",
-      unauthenticated: "Inicia sesi\xF3n primero."
+      unauthenticated: "Inicia sesi\xF3n primero.",
+      passkey_failed: "No se pudo usar la llave de acceso. Intenta de nuevo o entra de otra forma.",
+      passkey_exists: "Este dispositivo ya tiene una llave de acceso de tu cuenta.",
+      passkey_unavailable: "Aqu\xED no se pueden usar llaves de acceso."
     }
   }
 };
@@ -568,6 +691,15 @@ function SignIn(props) {
     if (r.status === "mfa_required") return setStep("code");
     f.done();
   };
+  const usePasskey = async () => {
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.signIn.passkey({ returnTo: props.returnTo, locale: props.locale });
+    if (r.ok && r.status === "redirected") return;
+    f.setBusy(false);
+    if (!r.ok) return r.error.code === "cancelled" ? void 0 : f.setError(r.error);
+    f.done();
+  };
   const sendLink = async () => {
     f.setBusy(true);
     f.setError(null);
@@ -602,7 +734,7 @@ function SignIn(props) {
       " ",
       p.name
     ] }, p.id)),
-    methods?.passkey && /* @__PURE__ */ jsx(f.Button, { type: "button", className: f.cx("providerButton"), onClick: () => auth.signIn.passkey({ returnTo: props.returnTo, locale: props.locale }), children: f.t.usePasskey }),
+    methods?.passkey && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void usePasskey(), children: f.t.usePasskey }),
     ((methods?.providers.length ?? 0) > 0 || methods?.passkey) && /* @__PURE__ */ jsx("p", { className: f.cx("separator"), children: f.t.orWithEmail }),
     /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
     /* @__PURE__ */ jsx(
@@ -788,10 +920,7 @@ function Account(props) {
     account.hasPassword && /* @__PURE__ */ jsx(PasswordPart, { props }),
     /* @__PURE__ */ jsx(LinkedPart, { props }),
     /* @__PURE__ */ jsx(SecondStepPart, { props, account, onChanged: (mfaEnabled) => setAccount({ ...account, mfaEnabled }) }),
-    /* @__PURE__ */ jsxs("section", { className: cx("section"), children: [
-      /* @__PURE__ */ jsx("h2", { className: cx("heading"), children: t.passkeys }),
-      /* @__PURE__ */ jsx("a", { className: cx("link"), href: accountUrl(), children: t.managePasskeys })
-    ] }),
+    /* @__PURE__ */ jsx(PasskeysPart, { props, account, accountUrl: accountUrl(), when }),
     /* @__PURE__ */ jsxs("section", { className: cx("section"), children: [
       /* @__PURE__ */ jsx("h2", { className: cx("heading"), children: t.sessions }),
       /* @__PURE__ */ jsx("ul", { className: cx("sessions"), children: sessions.map((s, i) => /* @__PURE__ */ jsxs("li", { className: cx("session"), children: [
@@ -805,6 +934,60 @@ function Account(props) {
     ] })
   ] });
 }
+function PasskeysPart({ props, account, accountUrl, when }) {
+  const auth = useAuth();
+  const { f, done, setDone, run, general } = useSection(props);
+  const [here, setHere] = useState(null);
+  const [list, setList] = useState([]);
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  useEffect(() => {
+    void auth.methods().then((m) => {
+      const can2 = m.passkeyHere && canUsePasskeys();
+      setHere(can2);
+      if (can2) void auth.account.passkeys().then(setList);
+    });
+  }, []);
+  if (here === null) return null;
+  if (!here) {
+    return /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.passkeys }),
+      /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: accountUrl, children: f.t.managePasskeys })
+    ] });
+  }
+  const add = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.addPasskey({ name, password }));
+    if (!r.ok) {
+      if (r.error.code === "cancelled") f.setError(null);
+      return;
+    }
+    setList([...list, r.passkey]);
+    setName("");
+    setPassword("");
+    setDone(f.t.passkeyAdded);
+  };
+  const remove = async (id) => {
+    const r = await run(() => auth.account.removePasskey(id));
+    if (r.ok) setList(list.filter((p) => p.id !== id));
+  };
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: add, noValidate: true, children: [
+    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.passkeys }),
+    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.passkeysHelp }),
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    list.length === 0 ? /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.noPasskeys }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: list.map((p) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
+      p.name || f.t.passkeyUnnamed,
+      " \xB7 ",
+      when(p.createdAt),
+      " ",
+      /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void remove(p.id), children: f.t.removePasskey })
+    ] }, p.id)) }),
+    /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.passkeyName, value: name, autoComplete: "off", onChange: setName }),
+    account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.addPasskey }),
+    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+  ] });
+}
 function ProfilePart({ props, account, onSaved }) {
   const auth = useAuth();
   const { f, done, setDone, run, general } = useSection(props);
@@ -1093,6 +1276,7 @@ export {
   SignUp,
   VerifyEmail,
   can,
+  canUsePasskeys,
   createAuthClient,
   definePolicy,
   useAuth,