cauthy-auth 0.12.0 → 0.13.0

package/dist/react.mjs

@@ -203,13 +203,13 @@ function createAuthClient(options = {}) {
     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) {
+  async function post(path, form, bad, captchaToken) {
     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", ...locale() ? { "x-cauthy-locale": locale() } : {} },
+        headers: { "content-type": "application/json", accept: "application/json", ...locale() ? { "x-cauthy-locale": locale() } : {}, ...captchaToken ? { "x-cauthy-captcha": captchaToken } : {} },
         body: JSON.stringify(form)
       });
       const body = await res.json().catch(() => null);
@@ -261,9 +261,11 @@ function createAuthClient(options = {}) {
   }
   return {
     signIn: {
-      email: (f) => post("/sign-in/email", { email: f.email, password: f.password }, firstProblem(checkEmail(f.email), checkPassword(f.password))),
+      email: (f) => post("/sign-in/email", { email: f.email, password: f.password }, firstProblem(checkEmail(f.email), checkPassword(f.password)), f.captchaToken),
       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)),
+      mfaMethods: () => post("/sign-in/mfa/methods", {}, null),
+      mfaSendCode: () => post("/sign-in/mfa/send", {}, null),
+      magicLink: (f) => post("/sign-in/magic-link", { email: f.email }, checkEmail(f.email), f.captchaToken),
       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,
@@ -344,9 +346,9 @@ function createAuthClient(options = {}) {
       }
     },
     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)))
+      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)), f.captchaToken)
     },
-    forgotPassword: (f) => post("/forgot-password", { email: f.email }, checkEmail(f.email)),
+    forgotPassword: (f) => post("/forgot-password", { email: f.email }, checkEmail(f.email), f.captchaToken),
     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),
@@ -364,7 +366,14 @@ function createAuthClient(options = {}) {
         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)
+        recoveryCodes: (f) => post("/me/mfa/recovery-codes", { password: f.password }, null),
+        async factors() {
+          const body = await read("/me/mfa/factors");
+          return body && typeof body.totp === "boolean" ? body : null;
+        },
+        addPhone: (f) => post("/me/mfa/phone", { phone: f.phone, channel: f.channel, password: f.password }, null),
+        verifyPhone: (f) => post("/me/mfa/phone/verify", { code: f.code }, checkCode(f.code)),
+        removePhone: (f) => post("/me/mfa/phone/remove", { password: f.password }, null)
       },
       changeEmail: (f) => post("/me/email", { email: f.email, password: f.password }, checkEmail(f.email)),
       async identities() {
@@ -482,6 +491,18 @@ var TEXTS = {
     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",
+    codeHelpPhone: "We send a code to your phone. Ask for it, then type it here, or use a recovery code.",
+    sendCodeSms: "Send a code by SMS to {to}",
+    sendCodeWhatsapp: "Send a code by WhatsApp to {to}",
+    codeSent: "We sent a code to {to}. Type it here.",
+    phone: "Phone, with its country code",
+    phoneHelp: "Get your codes by SMS or WhatsApp instead of an app.",
+    phoneOn: "Codes go to {to}.",
+    phoneOff: "No phone yet.",
+    addPhone: "Add phone",
+    removePhone: "Remove phone",
+    bySms: "SMS",
+    byWhatsapp: "WhatsApp",
     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",
@@ -549,6 +570,13 @@ var TEXTS = {
       step_up_required: "Enter your current password.",
       weak_password: "Choose a stronger password.",
       unauthenticated: "Sign in first.",
+      phone_refused: "The code could not be sent to that number.",
+      too_many_codes: "Enough codes were sent. Use the last one, or sign in again.",
+      phone_unavailable: "Codes cannot be sent that way here.",
+      phone_already_set: "Remove the phone you have first.",
+      phone_codes_unavailable: "Codes cannot be sent right now. Try again in a moment.",
+      captcha_required: "Complete the check that you are not a bot, then try again.",
+      captcha_failed: "The check that you are not a bot did not pass. Try it again.",
       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."
@@ -571,6 +599,18 @@ var TEXTS = {
     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",
+    codeHelpPhone: "Te enviamos un c\xF3digo a tu tel\xE9fono. P\xEDdelo y escr\xEDbelo aqu\xED, o usa un c\xF3digo de recuperaci\xF3n.",
+    sendCodeSms: "Enviar un c\xF3digo por SMS a {to}",
+    sendCodeWhatsapp: "Enviar un c\xF3digo por WhatsApp a {to}",
+    codeSent: "Te enviamos un c\xF3digo a {to}. Escr\xEDbelo aqu\xED.",
+    phone: "Tel\xE9fono, con su c\xF3digo de pa\xEDs",
+    phoneHelp: "Recibe tus c\xF3digos por SMS o WhatsApp en vez de una app.",
+    phoneOn: "Los c\xF3digos van a {to}.",
+    phoneOff: "Todav\xEDa no tienes un tel\xE9fono.",
+    addPhone: "Agregar tel\xE9fono",
+    removePhone: "Quitar tel\xE9fono",
+    bySms: "SMS",
+    byWhatsapp: "WhatsApp",
     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",
@@ -638,6 +678,13 @@ var TEXTS = {
       step_up_required: "Escribe tu contrase\xF1a actual.",
       weak_password: "Elige una contrase\xF1a m\xE1s fuerte.",
       unauthenticated: "Inicia sesi\xF3n primero.",
+      phone_refused: "No se pudo enviar el c\xF3digo a ese n\xFAmero.",
+      too_many_codes: "Ya se enviaron suficientes c\xF3digos. Usa el \xFAltimo o vuelve a entrar.",
+      phone_unavailable: "Aqu\xED no se pueden enviar c\xF3digos de esa forma.",
+      phone_already_set: "Primero quita el tel\xE9fono que tienes.",
+      phone_codes_unavailable: "Ahora no se pueden enviar c\xF3digos. Int\xE9ntalo en un momento.",
+      captcha_required: "Completa la verificaci\xF3n de que no eres un robot y vuelve a intentarlo.",
+      captcha_failed: "La verificaci\xF3n de que no eres un robot no pas\xF3. Int\xE9ntalo de nuevo.",
       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."
@@ -682,6 +729,63 @@ function useRoot(props) {
   if (props.unstyled) return {};
   return { "data-cauthy": "", style: vars };
 }
+var turnstileScript = null;
+function loadTurnstile() {
+  const ready = () => window.turnstile;
+  if (ready()) return Promise.resolve(ready());
+  turnstileScript ??= new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+    script.async = true;
+    script.onload = () => ready() ? resolve(ready()) : reject(new Error("turnstile did not load"));
+    script.onerror = () => {
+      turnstileScript = null;
+      reject(new Error("turnstile did not load"));
+    };
+    document.head.appendChild(script);
+  });
+  return turnstileScript;
+}
+function useChallenge(siteKey, locale) {
+  const box = useRef(null);
+  const widget = useRef(null);
+  const [token, setToken] = useState("");
+  useEffect(() => {
+    if (!siteKey || !box.current) return;
+    let gone = false;
+    void loadTurnstile().then((api) => {
+      if (gone || !box.current) return;
+      const id = api.render(box.current, {
+        sitekey: siteKey,
+        language: locale ?? "auto",
+        size: "flexible",
+        callback: (t) => setToken(t),
+        "expired-callback": () => setToken(""),
+        "error-callback": () => setToken("")
+      });
+      widget.current = { api, id };
+    }).catch(() => {
+    });
+    return () => {
+      gone = true;
+      if (widget.current) widget.current.api.remove(widget.current.id);
+      widget.current = null;
+    };
+  }, [siteKey, locale]);
+  const renew = () => {
+    setToken("");
+    if (widget.current) widget.current.api.reset(widget.current.id);
+  };
+  const node = siteKey ? /* @__PURE__ */ jsx("div", { ref: box, className: "cauthy-challenge" }) : null;
+  return { node, token: token || void 0, renew };
+}
+function useMethods(auth) {
+  const [methods, setMethods] = useState(null);
+  useEffect(() => {
+    void auth.methods().then(setMethods);
+  }, []);
+  return methods;
+}
 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}`;
@@ -754,6 +858,23 @@ function SignIn(props) {
   const [password, setPassword] = useState("");
   const [code, setCode] = useState("");
   const [step, setStep] = useState("password");
+  const challenge = useChallenge(methods?.captchaSiteKey, props.locale);
+  const [phoneWay, setPhoneWay] = useState(null);
+  const [phoneSent, setPhoneSent] = useState("");
+  useEffect(() => {
+    if (step !== "code") return;
+    void auth.signIn.mfaMethods().then((r) => {
+      if (r.ok) setPhoneWay({ totp: r.totp, phone: r.phone });
+    });
+  }, [step]);
+  const sendCode = async () => {
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.signIn.mfaSendCode();
+    f.setBusy(false);
+    if (!r.ok) return f.setError(r.error);
+    setPhoneSent(r.sentTo);
+  };
   const autofill = useRef(null);
   const [offer, setOffer] = useState(0);
   useEffect(() => {
@@ -788,8 +909,9 @@ function SignIn(props) {
     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 });
+    const r = step === "code" ? await auth.signIn.mfa({ code }) : step === "sent" ? await auth.signIn.emailCode({ code }) : await auth.signIn.email({ email, password, captchaToken: challenge.token });
     f.setBusy(false);
+    if (step === "password") challenge.renew();
     if (!r.ok) {
       setOffer((n) => n + 1);
       return f.setError(r.error);
@@ -812,8 +934,9 @@ function SignIn(props) {
     autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
-    const r = await auth.signIn.magicLink({ email });
+    const r = await auth.signIn.magicLink({ email, captchaToken: challenge.token });
     f.setBusy(false);
+    challenge.renew();
     if (!r.ok) return f.setError(r.error);
     setStep("sent");
   };
@@ -829,9 +952,11 @@ function SignIn(props) {
     ] });
   }
   if (step === "code") {
+    const to = phoneWay?.phone?.number ?? "";
     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 }),
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: phoneSent ? f.t.codeSent.replace("{to}", phoneSent) : phoneWay?.phone && !phoneWay.totp ? f.t.codeHelpPhone : f.t.codeHelp }),
       general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      phoneWay?.phone && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendCode(), children: (phoneWay.phone.channel === "whatsapp" ? f.t.sendCodeWhatsapp : f.t.sendCodeSms).replace("{to}", to) }),
       /* @__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 })
     ] });
@@ -860,6 +985,7 @@ function SignIn(props) {
         aside: props.links?.forgotPassword ? /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.forgotPassword, children: f.t.forgotPassword }) : void 0
       }
     ),
+    challenge.node,
     /* @__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: [
@@ -891,12 +1017,14 @@ function SignUp(props) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [sent, setSent] = useState(false);
+  const challenge = useChallenge(useMethods(auth)?.captchaSiteKey, props.locale);
   const submit = async (e) => {
     e.preventDefault();
     f.setBusy(true);
     f.setError(null);
-    const r = await auth.signUp.email({ name, email, password });
+    const r = await auth.signUp.email({ name, email, password, captchaToken: challenge.token });
     f.setBusy(false);
+    challenge.renew();
     if (!r.ok) return f.setError(r.error);
     if (r.status === "verification_required") return setSent(true);
     f.done();
@@ -913,6 +1041,7 @@ function SignUp(props) {
     /* @__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 }),
+    challenge.node,
     /* @__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,
@@ -926,12 +1055,14 @@ function ForgotPassword(props) {
   const f = useForm(props);
   const [email, setEmail] = useState("");
   const [sent, setSent] = useState(false);
+  const challenge = useChallenge(useMethods(auth)?.captchaSiteKey, props.locale);
   const submit = async (e) => {
     e.preventDefault();
     f.setBusy(true);
     f.setError(null);
-    const r = await auth.forgotPassword({ email });
+    const r = await auth.forgotPassword({ email, captchaToken: challenge.token });
     f.setBusy(false);
+    challenge.renew();
     if (!r.ok) return f.setError(r.error);
     setSent(true);
   };
@@ -945,6 +1076,7 @@ function ForgotPassword(props) {
   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 }),
+    challenge.node,
     /* @__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 }) })
   ] });
@@ -1044,6 +1176,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__ */ jsx(PhonePart, { props, account, onChanged: (mfaEnabled) => setAccount({ ...account, mfaEnabled }) }),
     /* @__PURE__ */ jsx(PasskeysPart, { props, account, accountUrl: accountUrl(), when }),
     /* @__PURE__ */ jsxs("section", { className: cx("section"), children: [
       /* @__PURE__ */ jsx("h2", { className: cx("heading"), children: t.sessions }),
@@ -1273,6 +1406,77 @@ function SecondStepPart({ props, account, onChanged }) {
     account.mfaEnabled && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void renew(), children: f.t.newRecoveryCodes })
   ] });
 }
+function PhonePart({ props, account, onChanged }) {
+  const auth = useAuth();
+  const { f, run, general } = useSection(props);
+  const [ways, setWays] = useState(null);
+  const [number, setNumber] = useState("");
+  const [channel, setChannel] = useState("sms");
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [sentTo, setSentTo] = useState("");
+  const [codes, setCodes] = useState(null);
+  const load = () => auth.account.mfa.factors().then((w) => {
+    setWays(w);
+    if (w && w.phoneChannels.length > 0 && !w.phoneChannels.includes(channel)) setChannel(w.phoneChannels[0]);
+  });
+  useEffect(() => {
+    void load();
+  }, []);
+  if (!ways || ways.phoneChannels.length === 0) return null;
+  const add = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.mfa.addPhone({ phone: number, channel, password }));
+    if (r.ok) setSentTo(r.sentTo);
+  };
+  const confirm = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.mfa.verifyPhone({ code }));
+    if (!r.ok) return;
+    setSentTo("");
+    setCode("");
+    setPassword("");
+    if (r.recoveryCodes.length > 0) setCodes(r.recoveryCodes);
+    onChanged(true);
+    await load();
+  };
+  const remove = async (e) => {
+    e.preventDefault();
+    const r = await run(() => auth.account.mfa.removePhone({ password }));
+    if (!r.ok) return;
+    setPassword("");
+    await load();
+    const left = await auth.account.mfa.factors();
+    onChanged(Boolean(left?.totp));
+  };
+  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 });
+  if (sentTo) {
+    return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: confirm, noValidate: true, children: [
+      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.phone }),
+      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.codeSent.replace("{to}", sentTo) }),
+      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: ways.phone ? remove : add, noValidate: true, children: [
+    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.phone }),
+    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: ways.phone ? f.t.phoneOn.replace("{to}", ways.phone.number) : `${f.t.phoneOff} ${f.t.phoneHelp}` }),
+    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)) })
+    ] }),
+    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    !ways.phone && /* @__PURE__ */ jsx(Field, { f, name: "phone", type: "tel", label: f.t.phone, value: number, autoComplete: "tel", required: true, onChange: setNumber }),
+    !ways.phone && ways.phoneChannels.length > 1 && /* @__PURE__ */ jsx("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ jsxs("label", { className: f.cx("label"), children: [
+      /* @__PURE__ */ jsx("input", { type: "radio", name: "channel", value: c, checked: channel === c, onChange: () => setChannel(c) }),
+      " ",
+      c === "whatsapp" ? f.t.byWhatsapp : f.t.bySms
+    ] }, c)) }),
+    passwordField,
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: ways.phone ? f.t.removePhone : f.t.addPhone })
+  ] });
+}
 function SignOutEverywhere({ props }) {
   const auth = useAuth();
   const { f, run, general } = useSection(props);