cauthy-auth 0.12.0 → 0.13.0

package/dist/react.d.mts

@@ -258,6 +258,13 @@ interface AuthMethods {
      * page that cannot, or a browser that refuses to here, sends the person.
      */
     passkeyOnCauthy: boolean;
+    /**
+     * The workspace's Cloudflare Turnstile site key, when it asks for the
+     * challenge: signing in, creating an account, and asking for a sign-in link
+     * or a new password then take its answer (`captchaToken`). The ready-made
+     * forms show it themselves.
+     */
+    captchaSiteKey?: string;
 }
 /** A passkey of the signed-in account. Moments are UTC. */
 interface Passkey {
@@ -299,6 +306,17 @@ interface LinkedIdentity {
     /** When it was linked, in UTC (ISO 8601). */
     linkedAt: string;
 }
+/** How an account takes its second step. */
+interface SecondStep {
+    totp: boolean;
+    /** The phone codes are sent to, masked (`+57 ••• ••• 4567`). */
+    phone: {
+        number: string;
+        channel: string;
+    } | null;
+    /** The ways the workspace sends codes to phones. */
+    phoneChannels: string[];
+}
 interface AccountClient {
     /** The account, or null when nobody is signed in. */
     get(): Promise<Account$1 | null>;
@@ -337,6 +355,30 @@ interface AccountClient {
         }): Promise<AuthResult<'renewed', {
             recoveryCodes: string[];
         }>>;
+        /**
+         * How the account takes its second step: an authenticator app, a phone
+         * (masked), and the ways the workspace sends codes to phones (`sms`,
+         * `whatsapp`; none when it has no Twilio account for it).
+         */
+        factors(): Promise<SecondStep | null>;
+        /** Adds a phone as the second step: a code is sent to it, for `verifyPhone`. */
+        addPhone(form: {
+            phone: string;
+            channel: 'sms' | 'whatsapp';
+            password: string;
+        }): Promise<AuthResult<'sent', {
+            sentTo: string;
+            channel: string;
+        }>>;
+        /** Proves the phone with the code it received. `recoveryCodes` come with a first second step, shown this once. */
+        verifyPhone(form: {
+            code: string;
+        }): Promise<AuthResult<'enabled', {
+            recoveryCodes: string[];
+        }>>;
+        removePhone(form: {
+            password: string;
+        }): Promise<AuthResult<'removed'>>;
     };
     /**
      * Asks to sign in with another address. Nothing changes yet: the new address
@@ -393,6 +435,7 @@ interface AuthClient {
         email(form: {
             email: string;
             password: string;
+            captchaToken?: string;
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }> | AuthResult<'mfa_required'>>;
@@ -402,9 +445,23 @@ interface AuthClient {
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }>>;
+        /** While the second step is asked for: whether the account has an authenticator app, and the phone (masked) a code can be sent to. */
+        mfaMethods(): Promise<AuthResult<'ok', {
+            totp: boolean;
+            phone: {
+                number: string;
+                channel: string;
+            } | null;
+        }>>;
+        /** Sends a code to the account's phone, by SMS or WhatsApp; `mfa` takes it. A few per sign-in. */
+        mfaSendCode(): Promise<AuthResult<'sent', {
+            sentTo: string;
+            channel: string;
+        }>>;
         /** Mails a link that signs the person in. The answer is the same whether or not the address has an account. */
         magicLink(form: {
             email: string;
+            captchaToken?: string;
         }): Promise<AuthResult<'sent'>>;
         /** Signs in with the token the mailed link opened the page with (`ml_token`). */
         magicLinkVerify(form: {
@@ -480,6 +537,7 @@ interface AuthClient {
             email: string;
             password: string;
             name?: string;
+            captchaToken?: string;
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }> | AuthResult<'verification_required', {
@@ -489,6 +547,7 @@ interface AuthClient {
     /** Mails a link to choose a new password. The answer is the same whether or not the address has an account. */
     forgotPassword(form: {
         email: string;
+        captchaToken?: string;
     }): Promise<AuthResult<'sent'>>;
     /** Sets the new password, with the token the mailed link opened the page with (`token`). */
     resetPassword(form: {
@@ -542,6 +601,20 @@ interface AuthTexts {
     sendLink: string;
     linkSent: string;
     codeHelp: string;
+    /** The second step when it is a phone only. */
+    codeHelpPhone: string;
+    /** "{to}" is the phone, masked. */
+    sendCodeSms: string;
+    sendCodeWhatsapp: string;
+    codeSent: string;
+    phone: string;
+    phoneHelp: string;
+    phoneOn: string;
+    phoneOff: string;
+    addPhone: string;
+    removePhone: string;
+    bySms: string;
+    byWhatsapp: string;
     verify: string;
     checkEmail: string;
     backToSignIn: string;
@@ -734,4 +807,4 @@ declare function useSession(): SessionContext;
  */
 declare function useAuth(): AuthClient & Pick<SessionContext, 'session' | 'status' | 'refresh'>;
 
-export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };
+export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SecondStep, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.d.ts

@@ -258,6 +258,13 @@ interface AuthMethods {
      * page that cannot, or a browser that refuses to here, sends the person.
      */
     passkeyOnCauthy: boolean;
+    /**
+     * The workspace's Cloudflare Turnstile site key, when it asks for the
+     * challenge: signing in, creating an account, and asking for a sign-in link
+     * or a new password then take its answer (`captchaToken`). The ready-made
+     * forms show it themselves.
+     */
+    captchaSiteKey?: string;
 }
 /** A passkey of the signed-in account. Moments are UTC. */
 interface Passkey {
@@ -299,6 +306,17 @@ interface LinkedIdentity {
     /** When it was linked, in UTC (ISO 8601). */
     linkedAt: string;
 }
+/** How an account takes its second step. */
+interface SecondStep {
+    totp: boolean;
+    /** The phone codes are sent to, masked (`+57 ••• ••• 4567`). */
+    phone: {
+        number: string;
+        channel: string;
+    } | null;
+    /** The ways the workspace sends codes to phones. */
+    phoneChannels: string[];
+}
 interface AccountClient {
     /** The account, or null when nobody is signed in. */
     get(): Promise<Account$1 | null>;
@@ -337,6 +355,30 @@ interface AccountClient {
         }): Promise<AuthResult<'renewed', {
             recoveryCodes: string[];
         }>>;
+        /**
+         * How the account takes its second step: an authenticator app, a phone
+         * (masked), and the ways the workspace sends codes to phones (`sms`,
+         * `whatsapp`; none when it has no Twilio account for it).
+         */
+        factors(): Promise<SecondStep | null>;
+        /** Adds a phone as the second step: a code is sent to it, for `verifyPhone`. */
+        addPhone(form: {
+            phone: string;
+            channel: 'sms' | 'whatsapp';
+            password: string;
+        }): Promise<AuthResult<'sent', {
+            sentTo: string;
+            channel: string;
+        }>>;
+        /** Proves the phone with the code it received. `recoveryCodes` come with a first second step, shown this once. */
+        verifyPhone(form: {
+            code: string;
+        }): Promise<AuthResult<'enabled', {
+            recoveryCodes: string[];
+        }>>;
+        removePhone(form: {
+            password: string;
+        }): Promise<AuthResult<'removed'>>;
     };
     /**
      * Asks to sign in with another address. Nothing changes yet: the new address
@@ -393,6 +435,7 @@ interface AuthClient {
         email(form: {
             email: string;
             password: string;
+            captchaToken?: string;
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }> | AuthResult<'mfa_required'>>;
@@ -402,9 +445,23 @@ interface AuthClient {
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }>>;
+        /** While the second step is asked for: whether the account has an authenticator app, and the phone (masked) a code can be sent to. */
+        mfaMethods(): Promise<AuthResult<'ok', {
+            totp: boolean;
+            phone: {
+                number: string;
+                channel: string;
+            } | null;
+        }>>;
+        /** Sends a code to the account's phone, by SMS or WhatsApp; `mfa` takes it. A few per sign-in. */
+        mfaSendCode(): Promise<AuthResult<'sent', {
+            sentTo: string;
+            channel: string;
+        }>>;
         /** Mails a link that signs the person in. The answer is the same whether or not the address has an account. */
         magicLink(form: {
             email: string;
+            captchaToken?: string;
         }): Promise<AuthResult<'sent'>>;
         /** Signs in with the token the mailed link opened the page with (`ml_token`). */
         magicLinkVerify(form: {
@@ -480,6 +537,7 @@ interface AuthClient {
             email: string;
             password: string;
             name?: string;
+            captchaToken?: string;
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }> | AuthResult<'verification_required', {
@@ -489,6 +547,7 @@ interface AuthClient {
     /** Mails a link to choose a new password. The answer is the same whether or not the address has an account. */
     forgotPassword(form: {
         email: string;
+        captchaToken?: string;
     }): Promise<AuthResult<'sent'>>;
     /** Sets the new password, with the token the mailed link opened the page with (`token`). */
     resetPassword(form: {
@@ -542,6 +601,20 @@ interface AuthTexts {
     sendLink: string;
     linkSent: string;
     codeHelp: string;
+    /** The second step when it is a phone only. */
+    codeHelpPhone: string;
+    /** "{to}" is the phone, masked. */
+    sendCodeSms: string;
+    sendCodeWhatsapp: string;
+    codeSent: string;
+    phone: string;
+    phoneHelp: string;
+    phoneOn: string;
+    phoneOff: string;
+    addPhone: string;
+    removePhone: string;
+    bySms: string;
+    byWhatsapp: string;
     verify: string;
     checkEmail: string;
     backToSignIn: string;
@@ -734,4 +807,4 @@ declare function useSession(): SessionContext;
  */
 declare function useAuth(): AuthClient & Pick<SessionContext, 'session' | 'status' | 'refresh'>;
 
-export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };
+export { Account, type AccountClient, type Account$1 as AccountDetails, type AccountProps, type AccountSession, type AuthClient, type AuthError, type AuthFormProps, type AuthMethods, type AuthResult, type AuthTexts, CauthyProvider, type CauthyProviderProps, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SecondStep, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.js

@@ -240,13 +240,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);
@@ -298,9 +298,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,
@@ -381,9 +383,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),
@@ -401,7 +403,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() {
@@ -519,6 +528,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",
@@ -586,6 +607,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."
@@ -608,6 +636,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",
@@ -675,6 +715,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."
@@ -719,6 +766,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 = (0, import_react.useRef)(null);
+  const widget = (0, import_react.useRef)(null);
+  const [token, setToken] = (0, import_react.useState)("");
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("div", { ref: box, className: "cauthy-challenge" }) : null;
+  return { node, token: token || void 0, renew };
+}
+function useMethods(auth) {
+  const [methods, setMethods] = (0, import_react.useState)(null);
+  (0, import_react.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}`;
@@ -791,6 +895,23 @@ function SignIn(props) {
   const [password, setPassword] = (0, import_react.useState)("");
   const [code, setCode] = (0, import_react.useState)("");
   const [step, setStep] = (0, import_react.useState)("password");
+  const challenge = useChallenge(methods?.captchaSiteKey, props.locale);
+  const [phoneWay, setPhoneWay] = (0, import_react.useState)(null);
+  const [phoneSent, setPhoneSent] = (0, import_react.useState)("");
+  (0, import_react.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 = (0, import_react.useRef)(null);
   const [offer, setOffer] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => {
@@ -825,8 +946,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);
@@ -849,8 +971,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");
   };
@@ -866,9 +989,11 @@ function SignIn(props) {
     ] });
   }
   if (step === "code") {
+    const to = phoneWay?.phone?.number ?? "";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: f.cx("notice"), children: f.t.codeHelp }),
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      phoneWay?.phone && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
     ] });
@@ -897,6 +1022,7 @@ function SignIn(props) {
         aside: props.links?.forgotPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: f.cx("link"), href: props.links.forgotPassword, children: f.t.forgotPassword }) : void 0
       }
     ),
+    challenge.node,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.signIn }),
     methods?.magicLink && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("p", { className: f.cx("footer"), children: [
@@ -928,12 +1054,14 @@ function SignUp(props) {
   const [email, setEmail] = (0, import_react.useState)("");
   const [password, setPassword] = (0, import_react.useState)("");
   const [sent, setSent] = (0, import_react.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();
@@ -950,6 +1078,7 @@ function SignUp(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.password, value: password, autoComplete: "new-password", required: true, onChange: setPassword }),
+    challenge.node,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.signUp }),
     props.links?.signIn && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: f.cx("footer"), children: [
       f.t.haveAccount,
@@ -963,12 +1092,14 @@ function ForgotPassword(props) {
   const f = useForm(props);
   const [email, setEmail] = (0, import_react.useState)("");
   const [sent, setSent] = (0, import_react.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);
   };
@@ -982,6 +1113,7 @@ function ForgotPassword(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
     general && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
+    challenge.node,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.sendLink }),
     props.links?.signIn && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: f.cx("footer"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn }) })
   ] });
@@ -1081,6 +1213,7 @@ function Account(props) {
     account.hasPassword && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasswordPart, { props }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkedPart, { props }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SecondStepPart, { props, account, onChanged: (mfaEnabled) => setAccount({ ...account, mfaEnabled }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhonePart, { props, account, onChanged: (mfaEnabled) => setAccount({ ...account, mfaEnabled }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasskeysPart, { props, account, accountUrl: accountUrl(), when }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: cx("section"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: cx("heading"), children: t.sessions }),
@@ -1310,6 +1443,77 @@ function SecondStepPart({ props, account, onChanged }) {
     account.mfaEnabled && /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react.useState)(null);
+  const [number, setNumber] = (0, import_react.useState)("");
+  const [channel, setChannel] = (0, import_react.useState)("sms");
+  const [password, setPassword] = (0, import_react.useState)("");
+  const [code, setCode] = (0, import_react.useState)("");
+  const [sentTo, setSentTo] = (0, import_react.useState)("");
+  const [codes, setCodes] = (0, import_react.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]);
+  });
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword });
+  if (sentTo) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: f.cx("section"), onSubmit: confirm, noValidate: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: f.cx("heading"), children: f.t.phone }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: f.cx("notice"), children: f.t.codeSent.replace("{to}", sentTo) }),
+      general && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: f.cx("section"), onSubmit: ways.phone ? remove : add, noValidate: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: f.cx("heading"), children: f.t.phone }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: f.cx("notice"), children: f.t.keepCodes }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: c }) }, c)) })
+    ] }),
+    general && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    !ways.phone && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("label"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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);