cauthy-auth 0.18.0 → 0.20.0

package/dist/react.d.mts

@@ -265,12 +265,34 @@ interface AuthMethods {
      * forms show it themselves.
      */
     captchaSiteKey?: string;
+    /**
+     * Whether the workspace signs some people in through their company's SSO,
+     * found by their work address (`signIn.ssoDiscover`, `signIn.sso`).
+     */
+    sso: boolean;
+}
+/** A company's sign-in (an SSO connection of the workspace). */
+interface SSOConnection {
+    /** What `signIn.sso({ connection })` takes. */
+    id: string;
+    /** The company's name, for "Continue with …". */
+    name: string;
+    /** The address can sign in no other way: a password, link or provider answers `sso_required`. */
+    enforced: boolean;
 }
+/**
+ * What holds a passkey, as its authenticator says: a security key (a YubiKey),
+ * one synced across the person's devices (iCloud Keychain, Google Password
+ * Manager), one on a single device (Windows Hello), or unknown (made before
+ * Cauthy kept this).
+ */
+type PasskeyKind = 'security_key' | 'synced' | 'device' | 'unknown';
 /** A passkey of the signed-in account. Moments are UTC. */
 interface Passkey {
     id: string;
     /** What the person called it ("My laptop"), or "". */
     name: string;
+    kind: PasskeyKind;
     createdAt: string;
     /** When it last signed the person in, or null. */
     lastUsedAt: string | null;
@@ -444,10 +466,14 @@ interface AccountClient {
      * 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.
+     * `kind` sends the browser straight to one: `'device'`, this device's
+     * fingerprint, face or screen lock; `'security_key'`, a security key.
+     * Without it, the browser offers all.
      */
     addPasskey(form?: {
         password?: string;
         name?: string;
+        kind?: 'device' | 'security_key';
     }): Promise<AuthResult<'added', {
         passkey: Passkey;
     }>>;
@@ -565,6 +591,38 @@ interface AuthClient {
         social(provider: string, options?: {
             returnTo?: string;
         }): void;
+        /**
+         * Which company's sign-in a work address uses, if any (`found`), or
+         * `none`. It says so of the address's domain, never whether the address
+         * has an account.
+         */
+        ssoDiscover(form: {
+            email: string;
+        }): Promise<AuthResult<'found', {
+            connection: SSOConnection;
+        }> | AuthResult<'none'>>;
+        /**
+         * Sends the browser to the person's company (found by `email`, or named
+         * by `connection`); it comes back signed in, at `returnTo`. A sign-in the
+         * company refused comes back with `?auth_error=`. Any other way of
+         * signing in answers `sso_required` for an address its company holds to
+         * SSO: send it here then.
+         */
+        sso(target: {
+            email: string;
+        } | {
+            connection: string;
+        }, options?: {
+            returnTo?: string;
+        }): void;
+        /** Where `sso` sends the browser, for a plain link. */
+        ssoUrl(target: {
+            email: string;
+        } | {
+            connection: string;
+        }, options?: {
+            returnTo?: string;
+        }): string;
         /** Where `social` sends the browser, for a plain link. */
         socialUrl(provider: string, options?: {
             returnTo?: string;
@@ -687,7 +745,11 @@ interface AuthTexts {
     passkeysHelp: string;
     noPasskeys: string;
     passkeyName: string;
+    /** @deprecated Unused since 0.19.0: the account screen offers `addPasskeyDevice` and `addSecurityKey`. */
     addPasskey: string;
+    addPasskeyDevice: string;
+    addSecurityKey: string;
+    passkeyKinds: Record<'security_key' | 'synced' | 'device', string>;
     removePasskey: string;
     passkeyAdded: string;
     passkeyUnnamed: string;
@@ -707,6 +769,7 @@ interface AuthTexts {
     linkWith: string;
     unlink: string;
     linked: string;
+    ssoOnly: string;
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
@@ -856,4 +919,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, type ConnectedAgent, 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 };
+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, type ConnectedAgent, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PasskeyKind, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SSOConnection, type SecondStep, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.d.ts

@@ -265,12 +265,34 @@ interface AuthMethods {
      * forms show it themselves.
      */
     captchaSiteKey?: string;
+    /**
+     * Whether the workspace signs some people in through their company's SSO,
+     * found by their work address (`signIn.ssoDiscover`, `signIn.sso`).
+     */
+    sso: boolean;
+}
+/** A company's sign-in (an SSO connection of the workspace). */
+interface SSOConnection {
+    /** What `signIn.sso({ connection })` takes. */
+    id: string;
+    /** The company's name, for "Continue with …". */
+    name: string;
+    /** The address can sign in no other way: a password, link or provider answers `sso_required`. */
+    enforced: boolean;
 }
+/**
+ * What holds a passkey, as its authenticator says: a security key (a YubiKey),
+ * one synced across the person's devices (iCloud Keychain, Google Password
+ * Manager), one on a single device (Windows Hello), or unknown (made before
+ * Cauthy kept this).
+ */
+type PasskeyKind = 'security_key' | 'synced' | 'device' | 'unknown';
 /** A passkey of the signed-in account. Moments are UTC. */
 interface Passkey {
     id: string;
     /** What the person called it ("My laptop"), or "". */
     name: string;
+    kind: PasskeyKind;
     createdAt: string;
     /** When it last signed the person in, or null. */
     lastUsedAt: string | null;
@@ -444,10 +466,14 @@ interface AccountClient {
      * 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.
+     * `kind` sends the browser straight to one: `'device'`, this device's
+     * fingerprint, face or screen lock; `'security_key'`, a security key.
+     * Without it, the browser offers all.
      */
     addPasskey(form?: {
         password?: string;
         name?: string;
+        kind?: 'device' | 'security_key';
     }): Promise<AuthResult<'added', {
         passkey: Passkey;
     }>>;
@@ -565,6 +591,38 @@ interface AuthClient {
         social(provider: string, options?: {
             returnTo?: string;
         }): void;
+        /**
+         * Which company's sign-in a work address uses, if any (`found`), or
+         * `none`. It says so of the address's domain, never whether the address
+         * has an account.
+         */
+        ssoDiscover(form: {
+            email: string;
+        }): Promise<AuthResult<'found', {
+            connection: SSOConnection;
+        }> | AuthResult<'none'>>;
+        /**
+         * Sends the browser to the person's company (found by `email`, or named
+         * by `connection`); it comes back signed in, at `returnTo`. A sign-in the
+         * company refused comes back with `?auth_error=`. Any other way of
+         * signing in answers `sso_required` for an address its company holds to
+         * SSO: send it here then.
+         */
+        sso(target: {
+            email: string;
+        } | {
+            connection: string;
+        }, options?: {
+            returnTo?: string;
+        }): void;
+        /** Where `sso` sends the browser, for a plain link. */
+        ssoUrl(target: {
+            email: string;
+        } | {
+            connection: string;
+        }, options?: {
+            returnTo?: string;
+        }): string;
         /** Where `social` sends the browser, for a plain link. */
         socialUrl(provider: string, options?: {
             returnTo?: string;
@@ -687,7 +745,11 @@ interface AuthTexts {
     passkeysHelp: string;
     noPasskeys: string;
     passkeyName: string;
+    /** @deprecated Unused since 0.19.0: the account screen offers `addPasskeyDevice` and `addSecurityKey`. */
     addPasskey: string;
+    addPasskeyDevice: string;
+    addSecurityKey: string;
+    passkeyKinds: Record<'security_key' | 'synced' | 'device', string>;
     removePasskey: string;
     passkeyAdded: string;
     passkeyUnnamed: string;
@@ -707,6 +769,7 @@ interface AuthTexts {
     linkWith: string;
     unlink: string;
     linked: string;
+    ssoOnly: string;
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
@@ -856,4 +919,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, type ConnectedAgent, 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 };
+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, type ConnectedAgent, ForgotPassword, GoogleOneTap, type GoogleOneTapProps, type JsonValue, type LinkedIdentity, type Passkey, type PasskeyKind, type PermissionOf, type Policy, type PublicSession, ResetPassword, type RoleOf, type SSOConnection, type SecondStep, type SessionContext, type SessionOrganization, type SessionUser, SignIn, SignUp, VerifyEmail, can, canAutofillPasskeys, canUsePasskeys, createAuthClient, definePolicy, useAuth, useSession };

package/dist/react.js

@@ -268,6 +268,11 @@ function createAuthClient(options = {}) {
   }
   const linkUrl = (provider, o = {}) => `${base}/me/identities/link/${encodeURIComponent(provider)}${o.returnTo ? `?return_to=${encodeURIComponent(o.returnTo)}` : ""}`;
   const socialUrl = (provider, o = {}) => `${base}/sign-in/social/${encodeURIComponent(provider)}${o.returnTo ? `?return_to=${encodeURIComponent(o.returnTo)}` : ""}`;
+  const ssoUrl = (target, o = {}) => {
+    const q = new URLSearchParams("connection" in target ? { connection: target.connection } : { email: target.email.trim() });
+    if (o.returnTo) q.set("return_to", o.returnTo);
+    return `${base}/sign-in/sso?${q}`;
+  };
   const passkeyUrl = (o = {}) => {
     const q = new URLSearchParams({ method: "passkey" });
     if (o.returnTo) q.set("return_to", o.returnTo);
@@ -279,11 +284,11 @@ function createAuthClient(options = {}) {
       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 };
+        return { providers: [], signUp: true, magicLink: false, passkey: false, ...m, passkeyHere: m.passkeyHere === true, passkeyOnCauthy: m.passkeyOnCauthy ?? m.passkey === true, sso: m.sso === true };
       }
     } catch {
     }
-    return { providers: [], signUp: true, magicLink: false, passkey: false, passkeyHere: false, passkeyOnCauthy: false };
+    return { providers: [], signUp: true, magicLink: false, passkey: false, passkeyHere: false, passkeyOnCauthy: false, sso: false };
   }
   async function ceremony(begin, finish, form, run, more = {}) {
     const begun = await post(begin, form, null);
@@ -381,6 +386,11 @@ function createAuthClient(options = {}) {
       socialUrl,
       social(provider, o) {
         window.location.assign(socialUrl(provider, o));
+      },
+      ssoDiscover: (f) => post("/sign-in/sso/discover", { email: f.email.trim() }, checkEmail(f.email)),
+      ssoUrl,
+      sso(target, o) {
+        window.location.assign(ssoUrl(target, o));
       }
     },
     signUp: {
@@ -439,7 +449,7 @@ function createAuthClient(options = {}) {
       },
       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 ?? "" });
+        return ceremony("/me/passkeys/add/begin", "/me/passkeys/add/finish", { password: f.password ?? "", ...f.kind ? { kind: f.kind } : {} }, makePasskey, { name: f.name ?? "" });
       },
       removePasskey: (id) => post("/me/passkeys/remove", { id }, null)
     },
@@ -580,6 +590,9 @@ var TEXTS = {
     passkeyName: "A name for this device (optional)",
     addPasskey: "Add a passkey on this device",
     removePasskey: "Remove",
+    addPasskeyDevice: "Add this device (fingerprint or face)",
+    addSecurityKey: "Add a security key",
+    passkeyKinds: { security_key: "Security key", synced: "Synced across your devices", device: "On this device only" },
     passkeyAdded: "The passkey was added. Next time, sign in with it.",
     passkeyUnnamed: "Passkey",
     sessions: "Where you are signed in",
@@ -598,6 +611,7 @@ var TEXTS = {
     linkWith: "Link",
     unlink: "Unlink",
     linked: "The account was linked.",
+    ssoOnly: "Your company signs you in to this account.",
     errors: {
       required: "This is required.",
       invalid_email: "That does not look like an email address.",
@@ -626,7 +640,15 @@ var TEXTS = {
       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."
+      passkey_unavailable: "Passkeys cannot be used here.",
+      sso_required: "This address signs in through its company.",
+      sso_not_found: "No company sign-in answers for this address.",
+      sso_failed: "The sign-in with your company could not be completed. Try again.",
+      sso_unavailable: "Your company's sign-in cannot be reached right now. Try again in a moment.",
+      invalid_assertion: "Your company's answer could not be checked. Try again.",
+      provisioning_disabled: "Your company's sign-in worked, but this workspace has no account for you. Ask its admin to add you.",
+      connection_inactive: "Your company's sign-in is turned off for this workspace.",
+      invalid_grant: "That sign-in expired. Try again."
     }
   },
   es: {
@@ -692,6 +714,9 @@ var TEXTS = {
     passkeyName: "Un nombre para este dispositivo (opcional)",
     addPasskey: "Agregar una llave en este dispositivo",
     removePasskey: "Quitar",
+    addPasskeyDevice: "Agregar este dispositivo (huella o rostro)",
+    addSecurityKey: "Agregar una llave f\xEDsica",
+    passkeyKinds: { security_key: "Llave f\xEDsica", synced: "Sincronizada entre tus dispositivos", device: "Solo en un dispositivo" },
     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",
@@ -710,6 +735,7 @@ var TEXTS = {
     linkWith: "Vincular",
     unlink: "Desvincular",
     linked: "La cuenta qued\xF3 vinculada.",
+    ssoOnly: "A esta cuenta entras con el inicio de sesi\xF3n de tu empresa.",
     errors: {
       required: "Este dato es obligatorio.",
       invalid_email: "Eso no parece un correo.",
@@ -738,7 +764,15 @@ var TEXTS = {
       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."
+      passkey_unavailable: "Aqu\xED no se pueden usar llaves de acceso.",
+      sso_required: "Este correo entra con el inicio de sesi\xF3n de su empresa.",
+      sso_not_found: "Ninguna empresa usa inicio de sesi\xF3n propio con este correo.",
+      sso_failed: "No se pudo completar el ingreso con tu empresa. Intenta de nuevo.",
+      sso_unavailable: "Ahora no se puede llegar al inicio de sesi\xF3n de tu empresa. Intenta en un momento.",
+      invalid_assertion: "No se pudo verificar la respuesta de tu empresa. Intenta de nuevo.",
+      provisioning_disabled: "El ingreso con tu empresa funcion\xF3, pero este workspace no tiene una cuenta para ti. P\xEDdele a su admin que te agregue.",
+      connection_inactive: "El inicio de sesi\xF3n de tu empresa est\xE1 apagado en este workspace.",
+      invalid_grant: "Ese ingreso venci\xF3. Intenta de nuevo."
     }
   }
 };
@@ -931,6 +965,25 @@ function SignIn(props) {
   };
   const autofill = (0, import_react.useRef)(null);
   const [offer, setOffer] = (0, import_react.useState)(0);
+  const [company, setCompany] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!methods?.sso || checkEmail(email) !== null) return setCompany(null);
+    let current = true;
+    const t = setTimeout(() => {
+      void auth.signIn.ssoDiscover({ email }).then((r) => {
+        if (current) setCompany(r.ok && r.status === "found" ? r.connection : null);
+      });
+    }, 350);
+    return () => {
+      current = false;
+      clearTimeout(t);
+    };
+  }, [email, methods]);
+  const toCompany = () => {
+    autofill.current?.abort();
+    f.setBusy(true);
+    auth.signIn.sso({ email }, { returnTo: props.returnTo });
+  };
   (0, import_react.useEffect)(() => {
     void auth.methods().then(setMethods);
     const back = returnedError();
@@ -963,9 +1016,11 @@ function SignIn(props) {
     autofill.current?.abort();
     f.setBusy(true);
     f.setError(null);
+    if (step === "password" && company?.enforced) return toCompany();
     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 && r.error.code === "sso_required") return toCompany();
     if (!r.ok) {
       setOffer((n) => n + 1);
       return f.setError(r.error);
@@ -991,6 +1046,7 @@ function SignIn(props) {
     const r = await auth.signIn.magicLink({ email, captchaToken: challenge.token, create: props.createAccounts, returnTo: props.returnTo });
     f.setBusy(false);
     challenge.renew();
+    if (!r.ok && r.error.code === "sso_required") return toCompany();
     if (!r.ok) return f.setError(r.error);
     setStep("sent");
   };
@@ -1025,23 +1081,31 @@ function SignIn(props) {
     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: methods?.passkeyHere ? "username webauthn" : "username", required: true, onChange: setEmail }),
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (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 }),
+    company && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(f.Button, { type: "button", disabled: f.busy, className: f.cx(company.enforced ? "button" : "providerButton"), onClick: toCompany, children: [
+      f.t.continueWith,
+      " ",
+      company.name
+    ] }),
+    company?.enforced && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: f.cx("notice"), children: f.t.ssoOnly }),
+    !company?.enforced && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (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 && !company?.enforced && /* @__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: [
       f.t.noAccount,
       " ",
@@ -1267,9 +1331,9 @@ function PasskeysPart({ props, account, accountUrl, when }) {
       /* @__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 }));
+  const add = async (e, kind = "device") => {
+    e?.preventDefault();
+    const r = await run(() => auth.account.addPasskey({ name, password, kind }));
     if (!r.ok) {
       if (r.error.code === "cancelled") f.setError(null);
       return;
@@ -1289,6 +1353,7 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     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,
+      p.kind !== "unknown" ? ` \xB7 ${f.t.passkeyKinds[p.kind]}` : "",
       " \xB7 ",
       when(p.createdAt),
       " ",
@@ -1296,7 +1361,8 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     ] }, 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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.addPasskeyDevice }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void add(null, "security_key"), children: f.t.addSecurityKey }),
     done && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", className: f.cx("notice"), children: done })
   ] });
 }