cauthy-auth 0.5.2 → 0.8.0

package/dist/react.mjs

@@ -1,5 +1,211 @@
+'use client';
+
 // src/react.tsx
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/theme.ts
+function themeVariables(theme) {
+  const vars = {};
+  const put = (name, v) => {
+    if (v === void 0 || v === "") return;
+    vars[`--cauthy-${name}`] = typeof v === "number" ? `${v}px` : v;
+  };
+  put("surface", theme.surface);
+  put("text", theme.text);
+  put("text-muted", theme.textMuted);
+  put("border", theme.border);
+  put("input-background", theme.inputBackground);
+  put("input-border", theme.inputBorder);
+  put("primary", theme.primary);
+  put("primary-text", theme.primaryText);
+  put("accent", theme.accent);
+  put("error", theme.error);
+  put("error-background", theme.errorBackground);
+  put("success", theme.success);
+  put("success-background", theme.successBackground);
+  put("radius", theme.radius);
+  put("button-radius", theme.buttonRadius);
+  put("font", theme.fontFamily);
+  return vars;
+}
+function fromWire(wire) {
+  const names = {
+    background: "background",
+    surface: "surface",
+    text: "text",
+    text_muted: "textMuted",
+    border: "border",
+    primary: "primary",
+    primary_text: "primaryText",
+    accent: "accent",
+    error: "error",
+    error_background: "errorBackground",
+    success: "success",
+    success_background: "successBackground",
+    radius: "radius",
+    button_radius: "buttonRadius",
+    font_family: "fontFamily",
+    logo_url: "logoUrl",
+    fonts: "fonts",
+    layout: "layout",
+    panel_colors: "panelColors",
+    panel_text: "panelText",
+    panel_icon_url: "panelIconUrl",
+    texts: "texts",
+    input_background: "inputBackground",
+    input_border: "inputBorder",
+    tokens: "tokens"
+  };
+  const theme = {};
+  for (const [k, v] of Object.entries(wire ?? {})) if (names[k] && v !== void 0 && v !== null && v !== "") theme[names[k]] = v;
+  return theme;
+}
+
+// src/validate.ts
+var MIN_PASSWORD = 8;
+var MAX_PASSWORD = 256;
+var MAX_NAME = 120;
+var EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function checkEmail(value) {
+  const v = typeof value === "string" ? value.trim() : "";
+  if (v === "") return { field: "email", code: "required", message: "Enter your email address." };
+  if (v.length > 254 || !EMAIL.test(v)) return { field: "email", code: "invalid_email", message: "That does not look like an email address." };
+  return null;
+}
+function checkPassword(value) {
+  if (typeof value !== "string" || value === "") return { field: "password", code: "required", message: "Enter your password." };
+  if (value.length > MAX_PASSWORD) return { field: "password", code: "too_long", message: "That password is too long." };
+  return null;
+}
+function checkNewPassword(value) {
+  const basic = checkPassword(value);
+  if (basic) return basic;
+  if (value.length < MIN_PASSWORD) {
+    return { field: "password", code: "too_short", message: `Use at least ${MIN_PASSWORD} characters.` };
+  }
+  return null;
+}
+function checkName(value) {
+  if (value === void 0 || value === null || value === "") return null;
+  if (typeof value !== "string" || value.trim().length > MAX_NAME) return { field: "name", code: "too_long", message: `Use at most ${MAX_NAME} characters.` };
+  return null;
+}
+function checkCode(value) {
+  const v = typeof value === "string" ? value.trim() : "";
+  if (v === "") return { field: "code", code: "required", message: "Enter the code." };
+  if (v.length > 40) return { field: "code", code: "too_long", message: "That is not a code." };
+  return null;
+}
+function firstProblem(...checks) {
+  return checks.find((c) => c !== null) ?? null;
+}
+
+// src/client.ts
+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(/\/+$/, "");
+  const doFetch = (...args) => (options.fetch ?? fetch)(...args);
+  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" },
+        body: JSON.stringify(form)
+      });
+      const body = await res.json().catch(() => null);
+      if (res.ok && body && typeof body.status === "string") return { ok: true, ...body };
+      const e = body?.error;
+      return { ok: false, error: e && typeof e.code === "string" ? { code: e.code, message: String(e.message ?? ""), ...e.field ? { field: e.field } : {} } : UNAVAILABLE };
+    } catch {
+      return { ok: false, error: UNAVAILABLE };
+    }
+  }
+  let looked;
+  async function read(path) {
+    try {
+      const res = await doFetch(`${base}${path}`, { credentials: "same-origin", headers: { accept: "application/json" } });
+      return res.ok ? await res.json() : null;
+    } catch {
+      return null;
+    }
+  }
+  const socialUrl = (provider, o = {}) => `${base}/sign-in/social/${encodeURIComponent(provider)}${o.returnTo ? `?return_to=${encodeURIComponent(o.returnTo)}` : ""}`;
+  const passkeyUrl = (o = {}) => {
+    const q = new URLSearchParams({ method: "passkey" });
+    if (o.returnTo) q.set("return_to", o.returnTo);
+    if (o.locale) q.set("locale", o.locale);
+    return `${base}/login?${q}`;
+  };
+  return {
+    signIn: {
+      email: (f) => post("/sign-in/email", { email: f.email, password: f.password }, firstProblem(checkEmail(f.email), checkPassword(f.password))),
+      mfa: (f) => post("/sign-in/mfa", { code: f.code }, checkCode(f.code)),
+      magicLink: (f) => post("/sign-in/magic-link", { email: f.email }, checkEmail(f.email)),
+      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) {
+        window.location.assign(passkeyUrl(o));
+      },
+      socialUrl,
+      social(provider, o) {
+        window.location.assign(socialUrl(provider, o));
+      }
+    },
+    signUp: {
+      email: (f) => post("/sign-up/email", { email: f.email, password: f.password, name: f.name }, firstProblem(checkName(f.name), checkEmail(f.email), checkNewPassword(f.password)))
+    },
+    forgotPassword: (f) => post("/forgot-password", { email: f.email }, checkEmail(f.email)),
+    resetPassword: (f) => post("/reset-password", { token: f.token, password: f.password }, checkNewPassword(f.password)),
+    verifyEmail: (f) => post("/verify-email", { token: f.token }, null),
+    signOut: () => post("/sign-out", {}, null),
+    account: {
+      async get() {
+        const body = await read("/me");
+        return body && typeof body.account === "object" ? body.account : null;
+      },
+      update: (f) => post("/me", { name: f.name }, checkName(f.name)),
+      changePassword: (f) => {
+        const bad = checkNewPassword(f.newPassword);
+        return post("/me/password", { password: f.password, newPassword: f.newPassword }, bad ? { ...bad, field: "newPassword" } : null);
+      },
+      mfa: {
+        setup: (f) => post("/me/mfa/setup", { password: f.password }, null),
+        verify: (f) => post("/me/mfa/verify", { code: f.code }, checkCode(f.code)),
+        disable: (f) => post("/me/mfa/disable", { password: f.password }, null),
+        recoveryCodes: (f) => post("/me/mfa/recovery-codes", { password: f.password }, null)
+      },
+      async sessions() {
+        const body = await read("/me/sessions");
+        return body && Array.isArray(body.sessions) ? body.sessions : [];
+      },
+      signOutEverywhere: () => post("/me/sessions/end", {}, null)
+    },
+    async getSession() {
+      try {
+        const res = await doFetch(`${base}/session`, { credentials: "same-origin", headers: { accept: "application/json" } });
+        if (!res.ok) return null;
+        return (await res.json()).session;
+      } catch {
+        return null;
+      }
+    },
+    look() {
+      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 };
+    }
+  };
+}
 
 // src/permissions.ts
 function matches(entry, resource, action) {
@@ -14,18 +220,678 @@ function can(organization, resource, action) {
   if ((organization.denied ?? []).some((d) => matches(d, resource, action))) return false;
   return organization.permissions.some((p) => matches(p, resource, action));
 }
+function definePolicy(roles) {
+  const entry = (p) => `${p.resource}:${p.action}`;
+  const byName = new Map(roles.map((r) => [r.role, r]));
+  const split = (permission) => {
+    const i = permission.lastIndexOf(":");
+    return i < 0 ? [permission, ""] : [permission.slice(0, i), permission.slice(i + 1)];
+  };
+  return {
+    roles: roles.map((r) => ({
+      role: r.role,
+      ...r.name !== void 0 ? { name: r.name } : {},
+      ...r.description !== void 0 ? { description: r.description } : {},
+      ...r.inherits ? { inherits: [...r.inherits] } : {},
+      ...r.permissions ? { permissions: r.permissions.map((p) => ({ ...p })) } : {}
+    })),
+    roleNames: roles.map((r) => r.role),
+    permissions: [...new Set(roles.flatMap((r) => (r.permissions ?? []).map(entry)))],
+    can(organization, permission) {
+      const [resource, action] = split(permission);
+      return can(organization, resource, action);
+    },
+    hasRole(organization, ...wanted) {
+      return organization != null && wanted.includes(organization.role);
+    },
+    permissionsOf(role) {
+      const seen = /* @__PURE__ */ new Set();
+      const out = /* @__PURE__ */ new Set();
+      const walk = (name) => {
+        if (seen.has(name)) return;
+        seen.add(name);
+        const r = byName.get(name);
+        for (const p of r?.permissions ?? []) out.add(entry(p));
+        for (const parent of r?.inherits ?? []) walk(parent);
+      };
+      walk(role);
+      return [...out];
+    }
+  };
+}
+
+// src/components.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TEXTS = {
+  en: {
+    email: "Email",
+    password: "Password",
+    name: "Name",
+    code: "Code",
+    signIn: "Sign in",
+    signUp: "Create account",
+    continueWith: "Continue with",
+    orWithEmail: "or with your email",
+    forgotPassword: "Forgot your password?",
+    noAccount: "No account yet?",
+    createAccount: "Create one",
+    haveAccount: "Already have an account?",
+    sendLink: "Send the link",
+    linkSent: "If that address has an account, a link to choose a new password is on its way.",
+    codeHelp: "Enter the code from your authenticator app, or a recovery code.",
+    verify: "Verify",
+    checkEmail: "Almost there: open the link we sent to confirm your address, then sign in.",
+    backToSignIn: "Back to sign in",
+    emailMeALink: "Email me a sign-in link",
+    usePasskey: "Sign in with a passkey",
+    codeFromMail: "Reading it on another device? Enter the code from the email.",
+    signInLinkSent: "If that address has an account, a link to sign in is on its way.",
+    newPassword: "New password",
+    savePassword: "Save the password",
+    passwordChanged: "Your password was changed. You can sign in with it now.",
+    confirming: "Confirming your address\u2026",
+    emailConfirmed: "Your address is confirmed. You can sign in now.",
+    profile: "Profile",
+    save: "Save",
+    saved: "Saved.",
+    currentPassword: "Current password",
+    changePassword: "Change password",
+    passwordChangedHere: "Your password was changed. Every other session of your account was signed out.",
+    secondStep: "Second step",
+    secondStepOn: "On: signing in also asks for a code from your authenticator app.",
+    secondStepOff: "Off: signing in asks only for your password.",
+    turnOn: "Turn on",
+    turnOff: "Turn off",
+    addToApp: "Add this key to your authenticator app, then enter the code it shows.",
+    openInApp: "Open in an authenticator app",
+    recoveryCodes: "Recovery codes",
+    newRecoveryCodes: "New recovery codes",
+    keepCodes: "Keep these codes somewhere safe. Each works once, and they are not shown again.",
+    passkeys: "Passkeys",
+    managePasskeys: "Add or remove a passkey",
+    sessions: "Where you are signed in",
+    signOutEverywhere: "Sign out everywhere",
+    unknownDevice: "Unknown device",
+    errors: {
+      required: "This is required.",
+      invalid_email: "That does not look like an email address.",
+      too_short: "Use at least 8 characters.",
+      invalid_credentials: "The address or the password is not right.",
+      unavailable: "Sign-in is unavailable right now. Try again in a moment.",
+      state_mismatch: "That sign-in could not be completed. Try again.",
+      cancelled: "The sign-in was cancelled.",
+      invalid_token: "This link is not valid, or it has expired. Ask for a new one.",
+      invalid_code: "That code is not right, or it has expired.",
+      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."
+    }
+  },
+  es: {
+    email: "Correo",
+    password: "Contrase\xF1a",
+    name: "Nombre",
+    code: "C\xF3digo",
+    signIn: "Entrar",
+    signUp: "Crear cuenta",
+    continueWith: "Continuar con",
+    orWithEmail: "o con tu correo",
+    forgotPassword: "\xBFOlvidaste tu contrase\xF1a?",
+    noAccount: "\xBFNo tienes cuenta?",
+    createAccount: "Crear una",
+    haveAccount: "\xBFYa tienes cuenta?",
+    sendLink: "Enviar el enlace",
+    linkSent: "Si ese correo tiene una cuenta, ya va en camino un enlace para elegir una contrase\xF1a nueva.",
+    codeHelp: "Escribe el c\xF3digo de tu aplicaci\xF3n de autenticaci\xF3n, o un c\xF3digo de recuperaci\xF3n.",
+    verify: "Verificar",
+    checkEmail: "Ya casi: abre el enlace que te enviamos para confirmar tu correo y luego entra.",
+    backToSignIn: "Volver a entrar",
+    emailMeALink: "Env\xEDame un enlace para entrar",
+    usePasskey: "Entrar con una llave de acceso",
+    codeFromMail: "\xBFLo est\xE1s leyendo en otro dispositivo? Escribe el c\xF3digo que trae el correo.",
+    signInLinkSent: "Si ese correo tiene una cuenta, ya va en camino un enlace para entrar.",
+    newPassword: "Contrase\xF1a nueva",
+    savePassword: "Guardar la contrase\xF1a",
+    passwordChanged: "Tu contrase\xF1a se cambi\xF3. Ya puedes entrar con ella.",
+    confirming: "Confirmando tu correo\u2026",
+    emailConfirmed: "Tu correo qued\xF3 confirmado. Ya puedes entrar.",
+    profile: "Perfil",
+    save: "Guardar",
+    saved: "Guardado.",
+    currentPassword: "Contrase\xF1a actual",
+    changePassword: "Cambiar contrase\xF1a",
+    passwordChangedHere: "Tu contrase\xF1a se cambi\xF3. Se cerraron todas las dem\xE1s sesiones de tu cuenta.",
+    secondStep: "Segundo paso",
+    secondStepOn: "Activo: al entrar tambi\xE9n se pide un c\xF3digo de tu aplicaci\xF3n de autenticaci\xF3n.",
+    secondStepOff: "Inactivo: al entrar solo se pide tu contrase\xF1a.",
+    turnOn: "Activar",
+    turnOff: "Desactivar",
+    addToApp: "Agrega esta clave a tu aplicaci\xF3n de autenticaci\xF3n y escribe el c\xF3digo que muestra.",
+    openInApp: "Abrir en una aplicaci\xF3n de autenticaci\xF3n",
+    recoveryCodes: "C\xF3digos de recuperaci\xF3n",
+    newRecoveryCodes: "Nuevos c\xF3digos de recuperaci\xF3n",
+    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",
+    sessions: "D\xF3nde tienes la sesi\xF3n abierta",
+    signOutEverywhere: "Cerrar sesi\xF3n en todas partes",
+    unknownDevice: "Dispositivo desconocido",
+    errors: {
+      required: "Este dato es obligatorio.",
+      invalid_email: "Eso no parece un correo.",
+      too_short: "Usa al menos 8 caracteres.",
+      invalid_credentials: "El correo o la contrase\xF1a no son correctos.",
+      unavailable: "No se puede entrar en este momento. Intenta de nuevo en un momento.",
+      state_mismatch: "No se pudo completar el ingreso. Intenta de nuevo.",
+      cancelled: "El ingreso se cancel\xF3.",
+      invalid_token: "Este enlace no es v\xE1lido o ya venci\xF3. Pide uno nuevo.",
+      invalid_code: "Ese c\xF3digo no es correcto o ya venci\xF3.",
+      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."
+    }
+  }
+};
+var PlainButton = (p) => /* @__PURE__ */ jsx("button", { ...p });
+var PlainInput = (p) => /* @__PURE__ */ jsx("input", { ...p });
+var looks = /* @__PURE__ */ new Map();
+var loaded = /* @__PURE__ */ new Set();
+function loadFonts(fonts) {
+  if (typeof document === "undefined" || typeof FontFace === "undefined") return;
+  for (const f of fonts ?? []) {
+    const key = `${f.family}|${f.url}|${f.weight ?? ""}|${f.style ?? ""}`;
+    if (loaded.has(key) || !/^[A-Za-z0-9][A-Za-z0-9 _-]*$/.test(f.family) || !/^https:\/\/[^\s"'()]+\.woff2$/i.test(f.url)) continue;
+    loaded.add(key);
+    const face = new FontFace(f.family, `url("${f.url}") format("woff2")`, { weight: String(f.weight ?? "400"), style: f.style === "italic" ? "italic" : "normal", display: "swap" });
+    void face.load().then((ready) => document.fonts.add(ready), () => loaded.delete(key));
+  }
+}
+function useRoot(props) {
+  const { basePath } = useSession();
+  const [vars, setVars] = useState({});
+  const wanted = !props.unstyled && props.workspaceLook !== false;
+  useEffect(() => {
+    if (!wanted) return;
+    let live = true;
+    let look = looks.get(basePath);
+    if (!look) {
+      look = createAuthClient({ basePath }).look();
+      looks.set(basePath, look);
+    }
+    void look.then((theme) => {
+      if (!live || !theme) return;
+      setVars(themeVariables(theme));
+      loadFonts(theme.fonts);
+    });
+    return () => {
+      live = false;
+    };
+  }, [basePath, wanted]);
+  if (props.unstyled) return {};
+  return { "data-cauthy": "", style: vars };
+}
+function useForm(props) {
+  const t = { ...TEXTS[props.locale ?? "en"], ...props.texts, errors: { ...TEXTS[props.locale ?? "en"].errors, ...props.texts?.errors } };
+  const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
+  const Button = props.components?.Button ?? PlainButton;
+  const Input = props.components?.Input ?? PlainInput;
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const say = (e) => t.errors[e.code] ?? e.message;
+  const done = () => {
+    if (props.onSuccess) props.onSuccess();
+    else window.location.assign(props.returnTo ?? "/");
+  };
+  const root = useRoot(props);
+  return { t, cx, Button, Input, error, setError, busy, setBusy, say, done, root };
+}
+function Field(p) {
+  const id = useId();
+  const { f } = p;
+  const bad = f.error?.field === p.name ? f.error : null;
+  return /* @__PURE__ */ jsxs("div", { className: f.cx("field"), children: [
+    /* @__PURE__ */ jsxs("label", { className: f.cx("label"), htmlFor: id, children: [
+      p.label,
+      p.aside
+    ] }),
+    /* @__PURE__ */ jsx(
+      f.Input,
+      {
+        id,
+        name: p.name,
+        type: p.type,
+        value: p.value,
+        autoComplete: p.autoComplete,
+        required: p.required,
+        className: f.cx("input"),
+        "aria-invalid": bad ? true : void 0,
+        "aria-describedby": bad ? `${id}-error` : void 0,
+        onChange: (e) => p.onChange(e.target.value)
+      }
+    ),
+    bad && /* @__PURE__ */ jsx("span", { id: `${id}-error`, role: "alert", className: f.cx("fieldError"), children: f.say(bad) })
+  ] });
+}
+function returnedError() {
+  if (typeof window === "undefined") return null;
+  const code = new URLSearchParams(window.location.search).get("auth_error");
+  return code ? { code, message: "That sign-in could not be completed. Try again." } : null;
+}
+function takeToken(name) {
+  if (typeof window === "undefined") return null;
+  const url = new URL(window.location.href);
+  const token = url.searchParams.get(name);
+  if (token === null) return null;
+  url.searchParams.delete(name);
+  window.history.replaceState(window.history.state, "", url.pathname + url.search + url.hash);
+  return token;
+}
+function useMailedToken(name, open) {
+  const opened = useRef(false);
+  useEffect(() => {
+    if (opened.current) return;
+    opened.current = true;
+    open(takeToken(name));
+  }, []);
+}
+function SignIn(props) {
+  const auth = useAuth();
+  const f = useForm(props);
+  const [methods, setMethods] = useState(null);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [step, setStep] = useState("password");
+  useEffect(() => {
+    void auth.methods().then(setMethods);
+    const back = returnedError();
+    if (back) f.setError(back);
+  }, []);
+  useMailedToken("ml_token", (token) => {
+    if (!token) return;
+    setStep("opening");
+    void auth.signIn.magicLinkVerify({ token }).then((r) => {
+      if (r.ok) return f.done();
+      f.setError(r.error);
+      setStep("password");
+    });
+  });
+  const submit = async (e) => {
+    e.preventDefault();
+    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.status === "mfa_required") return setStep("code");
+    f.done();
+  };
+  const sendLink = async () => {
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.signIn.magicLink({ email });
+    f.setBusy(false);
+    if (!r.ok) return f.setError(r.error);
+    setStep("sent");
+  };
+  const general = f.error && !f.error.field ? f.error : null;
+  if (step === "opening") return /* @__PURE__ */ jsx("div", { className: f.cx("form"), ...f.root, "aria-busy": "true" });
+  if (step === "sent") {
+    return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.signInLinkSent }),
+      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.codeFromMail }),
+      /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+    ] });
+  }
+  if (step === "code") {
+    return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.codeHelp }),
+      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    (methods?.providers ?? []).map((p) => /* @__PURE__ */ jsxs(f.Button, { type: "button", className: f.cx("providerButton"), onClick: () => auth.signIn.social(p.id, { returnTo: props.returnTo }), children: [
+      f.t.continueWith,
+      " ",
+      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?.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: "password",
+        type: "password",
+        label: f.t.password,
+        value: password,
+        autoComplete: "current-password",
+        required: true,
+        onChange: setPassword,
+        aside: props.links?.forgotPassword ? /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.forgotPassword, children: f.t.forgotPassword }) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.signIn }),
+    methods?.magicLink && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendLink(), children: f.t.emailMeALink }),
+    methods?.signUp !== false && props.links?.signUp && /* @__PURE__ */ jsxs("p", { className: f.cx("footer"), children: [
+      f.t.noAccount,
+      " ",
+      /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signUp, children: f.t.createAccount })
+    ] })
+  ] });
+}
+function SignUp(props) {
+  const auth = useAuth();
+  const f = useForm(props);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [sent, setSent] = useState(false);
+  const submit = async (e) => {
+    e.preventDefault();
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.signUp.email({ name, email, password });
+    f.setBusy(false);
+    if (!r.ok) return f.setError(r.error);
+    if (r.status === "verification_required") return setSent(true);
+    f.done();
+  };
+  const general = f.error && !f.error.field ? f.error : null;
+  if (sent) {
+    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.checkEmail }),
+      props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
+    /* @__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: "password", type: "password", label: f.t.password, value: password, autoComplete: "new-password", required: true, onChange: setPassword }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.signUp }),
+    props.links?.signIn && /* @__PURE__ */ jsxs("p", { className: f.cx("footer"), children: [
+      f.t.haveAccount,
+      " ",
+      /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.signIn })
+    ] })
+  ] });
+}
+function ForgotPassword(props) {
+  const auth = useAuth();
+  const f = useForm(props);
+  const [email, setEmail] = useState("");
+  const [sent, setSent] = useState(false);
+  const submit = async (e) => {
+    e.preventDefault();
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.forgotPassword({ email });
+    f.setBusy(false);
+    if (!r.ok) return f.setError(r.error);
+    setSent(true);
+  };
+  const general = f.error && !f.error.field ? f.error : null;
+  if (sent) {
+    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.linkSent }),
+      props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.sendLink }),
+    props.links?.signIn && /* @__PURE__ */ jsx("p", { className: f.cx("footer"), children: /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn }) })
+  ] });
+}
+function ResetPassword(props) {
+  const auth = useAuth();
+  const f = useForm(props);
+  const [token, setToken] = useState(null);
+  const [password, setPassword] = useState("");
+  const [changed, setChanged] = useState(false);
+  useMailedToken("token", (t) => {
+    setToken(t ?? "");
+    if (!t) f.setError({ code: "invalid_token", message: "This link is not valid, or it has expired." });
+  });
+  const submit = async (e) => {
+    e.preventDefault();
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.resetPassword({ token: token ?? "", password });
+    f.setBusy(false);
+    if (!r.ok) return f.setError(r.error);
+    setChanged(true);
+  };
+  const general = f.error && !f.error.field ? f.error : null;
+  const back = props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn });
+  if (changed) {
+    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.passwordChanged }),
+      back
+    ] });
+  }
+  if (token === "") {
+    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      props.links?.forgotPassword && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.forgotPassword, children: f.t.forgotPassword })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.newPassword, value: password, autoComplete: "new-password", required: true, onChange: setPassword }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy || token === null, className: f.cx("button"), children: f.t.savePassword })
+  ] });
+}
+function VerifyEmail(props) {
+  const auth = useAuth();
+  const f = useForm(props);
+  const [state, setState] = useState("confirming");
+  useMailedToken("token", (token) => {
+    if (!token) {
+      f.setError({ code: "invalid_token", message: "This link is not valid, or it has expired." });
+      return setState("failed");
+    }
+    void auth.verifyEmail({ token }).then((r) => {
+      if (r.ok) return setState("confirmed");
+      f.setError(r.error);
+      setState("failed");
+    });
+  });
+  return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, "aria-busy": state === "confirming", children: [
+    state === "confirming" && /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.confirming }),
+    state === "confirmed" && /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.emailConfirmed }),
+    state === "failed" && f.error && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(f.error) }),
+    state !== "confirming" && props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn })
+  ] });
+}
+function useSection(props) {
+  const f = useForm({ ...props, unstyled: true });
+  const [done, setDone] = useState(null);
+  const run = async (action) => {
+    f.setBusy(true);
+    f.setError(null);
+    setDone(null);
+    const r = await action();
+    f.setBusy(false);
+    if (!r.ok) f.setError(r.error);
+    return r;
+  };
+  const general = f.error && !f.error.field ? f.error : null;
+  return { f, done, setDone, run, general };
+}
+function Account(props) {
+  const auth = useAuth();
+  const { accountUrl } = useSession();
+  const { t, root } = useForm(props);
+  const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
+  const [account, setAccount] = useState(null);
+  const [sessions, setSessions] = useState([]);
+  useEffect(() => {
+    void auth.account.get().then(setAccount);
+    void auth.account.sessions().then(setSessions);
+  }, []);
+  if (account === null) return /* @__PURE__ */ jsx("div", { className: cx("account"), ...root, "aria-busy": "true" });
+  const when = props.formatDate ?? ((iso) => new Date(iso).toLocaleString());
+  return /* @__PURE__ */ jsxs("div", { className: cx("account"), ...root, children: [
+    /* @__PURE__ */ jsx(ProfilePart, { props, account, onSaved: setAccount }),
+    account.hasPassword && /* @__PURE__ */ jsx(PasswordPart, { 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__ */ 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: [
+        s.device || t.unknownDevice,
+        " \xB7 ",
+        s.ip,
+        " \xB7 ",
+        when(s.createdAt)
+      ] }, i)) }),
+      /* @__PURE__ */ jsx(SignOutEverywhere, { props })
+    ] })
+  ] });
+}
+function ProfilePart({ props, account, onSaved }) {
+  const auth = useAuth();
+  const { f, done, setDone, run, general } = useSection(props);
+  const [name, setName] = useState(account.name);
+  const submit = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.update({ name }));
+    if (!r.ok) return;
+    onSaved(r.account);
+    setDone(f.t.saved);
+  };
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: submit, noValidate: true, children: [
+    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.profile }),
+    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: account.email }),
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.save }),
+    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+  ] });
+}
+function PasswordPart({ props }) {
+  const auth = useAuth();
+  const { f, done, setDone, run, general } = useSection(props);
+  const [password, setPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const submit = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.changePassword({ password, newPassword }));
+    if (!r.ok) return;
+    setPassword("");
+    setNewPassword("");
+    setDone(f.t.passwordChangedHere);
+  };
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: submit, noValidate: true, children: [
+    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.changePassword }),
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
+    /* @__PURE__ */ jsx(Field, { f, name: "newPassword", type: "password", label: f.t.newPassword, value: newPassword, autoComplete: "new-password", required: true, onChange: setNewPassword }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.changePassword }),
+    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+  ] });
+}
+function SecondStepPart({ props, account, onChanged }) {
+  const auth = useAuth();
+  const { f, run, general } = useSection(props);
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [setup, setSetup] = useState(null);
+  const [codes, setCodes] = useState(null);
+  const start = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.mfa.setup({ password }));
+    if (r.ok) setSetup({ secret: r.secret, otpauthUri: r.otpauthUri });
+  };
+  const confirm = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.mfa.verify({ code }));
+    if (!r.ok) return;
+    setSetup(null);
+    setCode("");
+    setPassword("");
+    setCodes(r.recoveryCodes);
+    onChanged(true);
+  };
+  const turnOff = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.mfa.disable({ password }));
+    if (!r.ok) return;
+    setPassword("");
+    setCodes(null);
+    onChanged(false);
+  };
+  const renew = async () => {
+    const r = await run(() => auth.account.mfa.recoveryCodes({ password }));
+    if (r.ok) setCodes(r.recoveryCodes);
+  };
+  const passwordField = account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword });
+  const shown = codes && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.keepCodes }),
+    /* @__PURE__ */ jsx("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: c }) }, c)) })
+  ] });
+  if (setup) {
+    return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: confirm, noValidate: true, children: [
+      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.secondStep }),
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.addToApp }),
+      /* @__PURE__ */ jsx("code", { className: f.cx("secret"), children: setup.secret }),
+      /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: setup.otpauthUri, children: f.t.openInApp }),
+      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: account.mfaEnabled ? turnOff : start, noValidate: true, children: [
+    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.secondStep }),
+    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: account.mfaEnabled ? f.t.secondStepOn : f.t.secondStepOff }),
+    shown,
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    passwordField,
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: account.mfaEnabled ? f.t.turnOff : f.t.turnOn }),
+    account.mfaEnabled && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void renew(), children: f.t.newRecoveryCodes })
+  ] });
+}
+function SignOutEverywhere({ props }) {
+  const auth = useAuth();
+  const { f, run, general } = useSection(props);
+  const end = async () => {
+    const r = await run(() => auth.account.signOutEverywhere());
+    if (!r.ok) return;
+    if (props.onSignedOut) props.onSignedOut();
+    else window.location.assign("/");
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("button"), onClick: () => void end(), children: f.t.signOutEverywhere })
+  ] });
+}
 
 // src/react.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Ctx = createContext(null);
 var AHEAD_MS = 6e4;
 function CauthyProvider({ children, basePath = "/api/auth", initialSession }) {
   const base = basePath.replace(/\/+$/, "");
-  const [session, setSession] = useState(initialSession ?? null);
-  const [status, setStatus] = useState(
+  const [session, setSession] = useState2(initialSession ?? null);
+  const [status, setStatus] = useState2(
     initialSession === void 0 ? "loading" : initialSession === null ? "unauthenticated" : "authenticated"
   );
-  const asking = useRef(null);
+  const asking = useRef2(null);
   const refresh = useCallback(() => {
     asking.current ??= (async () => {
       try {
@@ -46,16 +912,16 @@ function CauthyProvider({ children, basePath = "/api/auth", initialSession }) {
     })();
     return asking.current;
   }, [base]);
-  useEffect(() => {
+  useEffect2(() => {
     if (initialSession === void 0) void refresh();
   }, [initialSession, refresh]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!session) return;
     const wait = Math.max(new Date(session.expiresAt).getTime() - Date.now() - AHEAD_MS, 5e3);
     const timer = setTimeout(() => void refresh(), wait);
     return () => clearTimeout(timer);
   }, [session, refresh]);
-  useEffect(() => {
+  useEffect2(() => {
     const onVisible = () => {
       if (document.visibilityState === "visible") void refresh();
     };
@@ -79,20 +945,57 @@ function CauthyProvider({ children, basePath = "/api/auth", initialSession }) {
       accountUrl(returnTo) {
         const back = returnTo ?? (typeof window === "undefined" ? "/" : window.location.pathname + window.location.search);
         return `${base}/account?return_to=${encodeURIComponent(back)}`;
-      }
+      },
+      basePath: base
     }),
     [session, status, refresh, base]
   );
-  return /* @__PURE__ */ jsx(Ctx.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(Ctx.Provider, { value, children });
 }
 function useSession() {
   const ctx = useContext(Ctx);
   if (ctx === null) throw new Error("cauthy-auth: useSession needs <CauthyProvider> above it");
   return ctx;
 }
+function useAuth() {
+  const { session, status, refresh, basePath } = useSession();
+  return useMemo(() => {
+    const client = createAuthClient({ basePath });
+    const then = async (running) => {
+      const r = await running;
+      await refresh();
+      return r;
+    };
+    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)) },
+      signUp: { email: (f) => then(client.signUp.email(f)) },
+      signOut: () => then(client.signOut()),
+      account: {
+        ...client.account,
+        // What is on screen says the new name, and knows when the session ended.
+        update: (f) => then(client.account.update(f)),
+        changePassword: (f) => then(client.account.changePassword(f)),
+        signOutEverywhere: () => then(client.account.signOutEverywhere())
+      },
+      session,
+      status,
+      refresh
+    };
+  }, [basePath, refresh, session, status]);
+}
 export {
+  Account,
   CauthyProvider,
+  ForgotPassword,
+  ResetPassword,
+  SignIn,
+  SignUp,
+  VerifyEmail,
   can,
+  createAuthClient,
+  definePolicy,
+  useAuth,
   useSession
 };
 //# sourceMappingURL=react.mjs.map