cauthy-auth 0.10.0 → 0.12.0

package/dist/react.mjs

@@ -3,6 +3,82 @@
 // 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";
+}
+async function canAutofillPasskeys() {
+  if (!canUsePasskeys()) return false;
+  const pkc = window.PublicKeyCredential;
+  try {
+    return typeof pkc.isConditionalMediationAvailable === "function" && await pkc.isConditionalMediationAvailable() === true;
+  } catch {
+    return false;
+  }
+}
+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, how = {}) {
+  const publicKey = { ...options, challenge: bytes(options.challenge), allowCredentials: withId(options.allowCredentials) };
+  const cred = await navigator.credentials.get({ publicKey, ...how });
+  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 = {};
@@ -101,6 +177,24 @@ function firstProblem(...checks) {
 }
 
 // src/client.ts
+var googleScript = null;
+function loadGoogleIdentity() {
+  const ready = () => window.google?.accounts?.id;
+  if (ready()) return Promise.resolve(ready());
+  googleScript ??= new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://accounts.google.com/gsi/client";
+    script.async = true;
+    script.onload = () => ready() ? resolve(ready()) : reject(new Error("google identity services did not load"));
+    script.onerror = () => {
+      googleScript = null;
+      reject(new Error("google identity services did not load"));
+    };
+    document.head.appendChild(script);
+  });
+  return googleScript;
+}
+var PASSKEY_SECONDS = 300;
 var UNAVAILABLE = { code: "unavailable", message: "Sign-in is unavailable right now. Try again in a moment." };
 function createAuthClient(options = {}) {
   const base = (options.basePath ?? "/api/auth").replace(/\/+$/, "");
@@ -143,6 +237,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))),
@@ -151,8 +267,76 @@ 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" };
+      },
+      async passkeyAutofill(o = {}) {
+        const cancelled = { ok: false, error: { code: "cancelled", message: "No passkey was chosen." } };
+        const m = await methods();
+        if (!m.passkeyHere || !await canAutofillPasskeys()) return cancelled;
+        for (; ; ) {
+          if (o.signal?.aborted) return cancelled;
+          const begun = await post("/sign-in/passkey/begin", {}, null);
+          if (!begun.ok) return begun;
+          const renew = new AbortController();
+          const stop = () => renew.abort();
+          o.signal?.addEventListener("abort", stop, { once: true });
+          const timer = setTimeout(stop, (PASSKEY_SECONDS - 30) * 1e3);
+          let credential;
+          try {
+            credential = await getPasskey(begun.options, { mediation: "conditional", signal: renew.signal });
+          } catch (e) {
+            if (o.signal?.aborted) return cancelled;
+            if (renew.signal.aborted) continue;
+            return { ok: false, error: ceremonyError(e) };
+          } finally {
+            clearTimeout(timer);
+            o.signal?.removeEventListener("abort", stop);
+          }
+          return post("/sign-in/passkey/finish", { credential }, null);
+        }
+      },
+      async googleOneTap(o = {}) {
+        const cancelled = { ok: false, error: { code: "cancelled", message: "No Google account was chosen." } };
+        if (typeof window === "undefined" || o.signal?.aborted) return cancelled;
+        const begun = await post("/sign-in/google-one-tap/begin", {}, null);
+        if (!begun.ok) return begun;
+        let gis;
+        try {
+          gis = await loadGoogleIdentity();
+        } catch {
+          return { ok: false, error: { code: "unavailable", message: "Google could not be reached. Try again, or sign in another way." } };
+        }
+        const credential = await new Promise((done) => {
+          o.signal?.addEventListener("abort", () => {
+            gis.cancel();
+            done(null);
+          }, { once: true });
+          gis.initialize({
+            client_id: begun.clientId,
+            nonce: begun.nonce,
+            context: o.context ?? "signin",
+            callback: (r) => done(r.credential ?? null),
+            auto_select: false,
+            cancel_on_tap_outside: true,
+            itp_support: true,
+            use_fedcm_for_prompt: true
+          });
+          gis.prompt((moment) => {
+            if (moment.isNotDisplayed?.() || moment.isSkippedMoment?.()) done(null);
+            else if (moment.isDismissedMoment?.() && moment.getDismissedReason?.() !== "credential_returned") done(null);
+          });
+        });
+        if (credential === null) return cancelled;
+        return post("/sign-in/google-one-tap", { credential }, null);
       },
       socialUrl,
       social(provider, o) {
@@ -196,7 +380,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 {
@@ -211,14 +404,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
   };
 }
 
@@ -325,6 +511,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",
@@ -355,7 +548,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: {
@@ -404,6 +600,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",
@@ -434,7 +637,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."
     }
   }
 };
@@ -548,6 +754,8 @@ function SignIn(props) {
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
   const [step, setStep] = useState("password");
+  const autofill = useRef(null);
+  const [offer, setOffer] = useState(0);
   useEffect(() => {
     void auth.methods().then(setMethods);
     const back = returnedError();
@@ -562,17 +770,46 @@ function SignIn(props) {
       setStep("password");
     });
   });
+  useEffect(() => {
+    if (step !== "password" || !methods?.passkeyHere) return;
+    const ctl = new AbortController();
+    autofill.current = ctl;
+    void auth.signIn.passkeyAutofill({ signal: ctl.signal }).then((r) => {
+      if (ctl.signal.aborted) return;
+      if (r.ok) return f.done();
+      if (r.error.code === "cancelled") return;
+      f.setError(r.error);
+      if (r.error.code === "passkey_failed" || r.error.code === "step_expired") setOffer((n) => n + 1);
+    });
+    return () => ctl.abort();
+  }, [step, methods, offer]);
   const submit = async (e) => {
     e.preventDefault();
+    autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
     const r = step === "code" ? await auth.signIn.mfa({ code }) : step === "sent" ? await auth.signIn.emailCode({ code }) : await auth.signIn.email({ email, password });
     f.setBusy(false);
-    if (!r.ok) return f.setError(r.error);
+    if (!r.ok) {
+      setOffer((n) => n + 1);
+      return f.setError(r.error);
+    }
     if (r.status === "mfa_required") return setStep("code");
     f.done();
   };
+  const usePasskey = async () => {
+    autofill.current?.abort();
+    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) setOffer((n) => n + 1);
+    if (!r.ok) return r.error.code === "cancelled" ? void 0 : f.setError(r.error);
+    f.done();
+  };
   const sendLink = async () => {
+    autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
     const r = await auth.signIn.magicLink({ email });
@@ -606,9 +843,9 @@ 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(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: methods?.passkeyHere ? "username webauthn" : "username", required: true, onChange: setEmail }),
     /* @__PURE__ */ jsx(
       Field,
       {
@@ -632,6 +869,21 @@ function SignIn(props) {
     ] })
   ] });
 }
+function GoogleOneTap(props) {
+  const auth = useAuth();
+  const unauthenticated = auth.status === "unauthenticated";
+  useEffect(() => {
+    if (!unauthenticated) return;
+    const ctl = new AbortController();
+    void auth.signIn.googleOneTap({ signal: ctl.signal, context: props.context }).then((r) => {
+      if (!r.ok || ctl.signal.aborted) return;
+      if (props.onSuccess) props.onSuccess();
+      else if (props.returnTo) window.location.assign(props.returnTo);
+    });
+    return () => ctl.abort();
+  }, [unauthenticated]);
+  return null;
+}
 function SignUp(props) {
   const auth = useAuth();
   const f = useForm(props);
@@ -792,10 +1044,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: [
@@ -809,6 +1058,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);
@@ -1072,7 +1375,16 @@ function useAuth() {
     };
     return {
       ...client,
-      signIn: { ...client.signIn, email: (f) => then(client.signIn.email(f)), mfa: (f) => then(client.signIn.mfa(f)), magicLinkVerify: (f) => then(client.signIn.magicLinkVerify(f)), emailCode: (f) => then(client.signIn.emailCode(f)) },
+      signIn: {
+        ...client.signIn,
+        email: (f) => then(client.signIn.email(f)),
+        mfa: (f) => then(client.signIn.mfa(f)),
+        magicLinkVerify: (f) => then(client.signIn.magicLinkVerify(f)),
+        emailCode: (f) => then(client.signIn.emailCode(f)),
+        passkey: (o) => then(client.signIn.passkey(o)),
+        passkeyAutofill: (o) => then(client.signIn.passkeyAutofill(o)),
+        googleOneTap: (o) => then(client.signIn.googleOneTap(o))
+      },
       signUp: { email: (f) => then(client.signUp.email(f)) },
       signOut: () => then(client.signOut()),
       account: {
@@ -1092,11 +1404,14 @@ export {
   Account,
   CauthyProvider,
   ForgotPassword,
+  GoogleOneTap,
   ResetPassword,
   SignIn,
   SignUp,
   VerifyEmail,
   can,
+  canAutofillPasskeys,
+  canUsePasskeys,
   createAuthClient,
   definePolicy,
   useAuth,