cauthy-auth 0.9.0 → 0.11.0

package/dist/react.d.mts

@@ -210,6 +210,9 @@ interface PublicSession {
 
 type AuthField = 'email' | 'password' | 'newPassword' | 'name' | 'code';
 
+/** Whether this browser can use a passkey at all. */
+declare function canUsePasskeys(): boolean;
+
 /** What went wrong, in a form the screen can show. */
 interface AuthError {
     /** Stable, for translating: `invalid_credentials`, `invalid_email`, `too_short`, `email_taken`, `unavailable`… */
@@ -235,8 +238,29 @@ interface AuthMethods {
     /** Whether people may create an account themselves. */
     signUp: boolean;
     magicLink: boolean;
-    /** Whether to offer a passkey. It is asked for on Cauthy's page: the person goes there for that step and comes back signed in. */
+    /** Whether to offer a passkey. */
     passkey: boolean;
+    /**
+     * Whether the passkey is used on this page itself. False: `signIn.passkey`
+     * sends the person to Cauthy's page for that step alone, and they come back
+     * signed in. That happens only when this page is outside the domain the
+     * workspace's passkeys belong to.
+     */
+    passkeyHere: boolean;
+    /**
+     * Whether Cauthy's page can use the passkey, for that step alone: where a
+     * page that cannot, or a browser that refuses to here, sends the person.
+     */
+    passkeyOnCauthy: boolean;
+}
+/** A passkey of the signed-in account. Moments are UTC. */
+interface Passkey {
+    id: string;
+    /** What the person called it ("My laptop"), or "". */
+    name: string;
+    createdAt: string;
+    /** When it last signed the person in, or null. */
+    lastUsedAt: string | null;
 }
 /** A person's own account, as their account screen shows it. */
 interface Account$1 {
@@ -340,6 +364,22 @@ interface AccountClient {
     sessions(): Promise<AccountSession[]>;
     /** Signs the account out everywhere, here too. */
     signOutEverywhere(): Promise<AuthResult<'signed_out'>>;
+    /** The account's passkeys. */
+    passkeys(): Promise<Passkey[]>;
+    /**
+     * Makes a passkey on this device, on this page: the browser asks the person
+     * for their fingerprint, face or screen lock. An account with a password
+     * proves it again first. `cancelled`: the person closed the browser's prompt.
+     */
+    addPasskey(form?: {
+        password?: string;
+        name?: string;
+    }): Promise<AuthResult<'added', {
+        passkey: Passkey;
+    }>>;
+    removePasskey(id: string): Promise<AuthResult<'removed', {
+        id: string;
+    }>>;
 }
 interface AuthClient {
     signIn: {
@@ -372,12 +412,21 @@ interface AuthClient {
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }>>;
-        /** Sends the browser to Cauthy's page to use a passkey; it comes back signed in, at `returnTo`. */
+        /**
+         * Signs in with a passkey, on this page: the browser asks the person for
+         * their fingerprint, face or screen lock. When this page cannot use the
+         * workspace's passkeys (`methods().passkeyHere` is false), the browser goes
+         * to Cauthy's page for that step alone and comes back signed in, at
+         * `returnTo`: then the answer is `redirected`. `cancelled`: the person
+         * closed the browser's prompt.
+         */
         passkey(options?: {
             returnTo?: string;
             locale?: string;
-        }): void;
-        /** Where `passkey` sends the browser, for a plain link. */
+        }): Promise<AuthResult<'signed_in', {
+            session: PublicSession;
+        }> | AuthResult<'redirected'>>;
+        /** Where `passkey` sends the browser when this page cannot use the passkey itself. */
         passkeyUrl(options?: {
             returnTo?: string;
             locale?: string;
@@ -432,6 +481,13 @@ interface AuthClientOptions {
     /** Where the server mounted the routes. Default: `/api/auth`. */
     basePath?: string;
     fetch?: typeof fetch;
+    /**
+     * The language the person reads, for what Cauthy mails them (a sign-in
+     * link, a new password, a confirmation): a tag like `es` or `es-CO`, or a
+     * function that answers it when the person can change it. Default: the
+     * page's own (`<html lang>`), else the browser's.
+     */
+    locale?: string | (() => string | undefined);
 }
 declare function createAuthClient(options?: AuthClientOptions): AuthClient;
 
@@ -482,6 +538,13 @@ interface AuthTexts {
     keepCodes: string;
     passkeys: string;
     managePasskeys: string;
+    passkeysHelp: string;
+    noPasskeys: string;
+    passkeyName: string;
+    addPasskey: string;
+    removePasskey: string;
+    passkeyAdded: string;
+    passkeyUnnamed: string;
     sessions: string;
     signOutEverywhere: string;
     unknownDevice: string;
@@ -622,4 +685,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, type JsonValue, type LinkedIdentity, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, 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, 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, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.d.ts

@@ -210,6 +210,9 @@ interface PublicSession {
 
 type AuthField = 'email' | 'password' | 'newPassword' | 'name' | 'code';
 
+/** Whether this browser can use a passkey at all. */
+declare function canUsePasskeys(): boolean;
+
 /** What went wrong, in a form the screen can show. */
 interface AuthError {
     /** Stable, for translating: `invalid_credentials`, `invalid_email`, `too_short`, `email_taken`, `unavailable`… */
@@ -235,8 +238,29 @@ interface AuthMethods {
     /** Whether people may create an account themselves. */
     signUp: boolean;
     magicLink: boolean;
-    /** Whether to offer a passkey. It is asked for on Cauthy's page: the person goes there for that step and comes back signed in. */
+    /** Whether to offer a passkey. */
     passkey: boolean;
+    /**
+     * Whether the passkey is used on this page itself. False: `signIn.passkey`
+     * sends the person to Cauthy's page for that step alone, and they come back
+     * signed in. That happens only when this page is outside the domain the
+     * workspace's passkeys belong to.
+     */
+    passkeyHere: boolean;
+    /**
+     * Whether Cauthy's page can use the passkey, for that step alone: where a
+     * page that cannot, or a browser that refuses to here, sends the person.
+     */
+    passkeyOnCauthy: boolean;
+}
+/** A passkey of the signed-in account. Moments are UTC. */
+interface Passkey {
+    id: string;
+    /** What the person called it ("My laptop"), or "". */
+    name: string;
+    createdAt: string;
+    /** When it last signed the person in, or null. */
+    lastUsedAt: string | null;
 }
 /** A person's own account, as their account screen shows it. */
 interface Account$1 {
@@ -340,6 +364,22 @@ interface AccountClient {
     sessions(): Promise<AccountSession[]>;
     /** Signs the account out everywhere, here too. */
     signOutEverywhere(): Promise<AuthResult<'signed_out'>>;
+    /** The account's passkeys. */
+    passkeys(): Promise<Passkey[]>;
+    /**
+     * Makes a passkey on this device, on this page: the browser asks the person
+     * for their fingerprint, face or screen lock. An account with a password
+     * proves it again first. `cancelled`: the person closed the browser's prompt.
+     */
+    addPasskey(form?: {
+        password?: string;
+        name?: string;
+    }): Promise<AuthResult<'added', {
+        passkey: Passkey;
+    }>>;
+    removePasskey(id: string): Promise<AuthResult<'removed', {
+        id: string;
+    }>>;
 }
 interface AuthClient {
     signIn: {
@@ -372,12 +412,21 @@ interface AuthClient {
         }): Promise<AuthResult<'signed_in', {
             session: PublicSession;
         }>>;
-        /** Sends the browser to Cauthy's page to use a passkey; it comes back signed in, at `returnTo`. */
+        /**
+         * Signs in with a passkey, on this page: the browser asks the person for
+         * their fingerprint, face or screen lock. When this page cannot use the
+         * workspace's passkeys (`methods().passkeyHere` is false), the browser goes
+         * to Cauthy's page for that step alone and comes back signed in, at
+         * `returnTo`: then the answer is `redirected`. `cancelled`: the person
+         * closed the browser's prompt.
+         */
         passkey(options?: {
             returnTo?: string;
             locale?: string;
-        }): void;
-        /** Where `passkey` sends the browser, for a plain link. */
+        }): Promise<AuthResult<'signed_in', {
+            session: PublicSession;
+        }> | AuthResult<'redirected'>>;
+        /** Where `passkey` sends the browser when this page cannot use the passkey itself. */
         passkeyUrl(options?: {
             returnTo?: string;
             locale?: string;
@@ -432,6 +481,13 @@ interface AuthClientOptions {
     /** Where the server mounted the routes. Default: `/api/auth`. */
     basePath?: string;
     fetch?: typeof fetch;
+    /**
+     * The language the person reads, for what Cauthy mails them (a sign-in
+     * link, a new password, a confirmation): a tag like `es` or `es-CO`, or a
+     * function that answers it when the person can change it. Default: the
+     * page's own (`<html lang>`), else the browser's.
+     */
+    locale?: string | (() => string | undefined);
 }
 declare function createAuthClient(options?: AuthClientOptions): AuthClient;
 
@@ -482,6 +538,13 @@ interface AuthTexts {
     keepCodes: string;
     passkeys: string;
     managePasskeys: string;
+    passkeysHelp: string;
+    noPasskeys: string;
+    passkeyName: string;
+    addPasskey: string;
+    removePasskey: string;
+    passkeyAdded: string;
+    passkeyUnnamed: string;
     sessions: string;
     signOutEverywhere: string;
     unknownDevice: string;
@@ -622,4 +685,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, type JsonValue, type LinkedIdentity, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, 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, 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, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.js

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