dauth-context-react 6.5.0 → 6.6.0

package/dist/index.js

@@ -45,7 +45,8 @@ var initialDauthState = {
   getPasskeyCredentials: () => Promise.resolve([]),
   registerPasskey: () => Promise.resolve(null),
   deletePasskeyCredential: () => Promise.resolve(false),
-  uploadAvatar: () => Promise.resolve(false)
+  uploadAvatar: () => Promise.resolve(false),
+  loginWithPasskey: () => Promise.resolve(false)
 };
 var initialDauthState_default = initialDauthState;
 
@@ -153,45 +154,59 @@ async function deleteAccountAPI(basePath) {
   return { response, data };
 }
 async function getPasskeyCredentialsAPI(basePath) {
-  const response = await fetch(
-    `${basePath}/passkey/credentials`,
-    {
-      method: "GET",
-      headers: { "X-CSRF-Token": getCsrfToken() },
-      credentials: "include"
-    }
-  );
+  const response = await fetch(`${basePath}/passkey/credentials`, {
+    method: "GET",
+    headers: { "X-CSRF-Token": getCsrfToken() },
+    credentials: "include"
+  });
   const data = await response.json();
   return { response, data };
 }
 async function startPasskeyRegistrationAPI(basePath) {
-  const response = await fetch(
-    `${basePath}/passkey/register/start`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": getCsrfToken()
-      },
-      credentials: "include"
-    }
-  );
+  const response = await fetch(`${basePath}/passkey/register/start`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": getCsrfToken()
+    },
+    credentials: "include"
+  });
   const data = await response.json();
   return { response, data };
 }
 async function finishPasskeyRegistrationAPI(basePath, body) {
-  const response = await fetch(
-    `${basePath}/passkey/register/finish`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": getCsrfToken()
-      },
-      credentials: "include",
-      body: JSON.stringify(body)
-    }
-  );
+  const response = await fetch(`${basePath}/passkey/register/finish`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": getCsrfToken()
+    },
+    credentials: "include",
+    body: JSON.stringify(body)
+  });
+  const data = await response.json();
+  return { response, data };
+}
+async function startPasskeyAuthAPI(basePath) {
+  const response = await fetch(`${basePath}/passkey/auth-start`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    credentials: "include"
+  });
+  const data = await response.json();
+  return { response, data };
+}
+async function finishPasskeyAuthAPI(basePath, body) {
+  const response = await fetch(`${basePath}/passkey/auth-finish`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    credentials: "include",
+    body: JSON.stringify(body)
+  });
   const data = await response.json();
   return { response, data };
 }
@@ -243,17 +258,16 @@ function bufferToBase64url(buffer) {
 async function createPasskeyCredential(options) {
   const publicKey = {
     ...options,
+    rp: { ...options.rp, id: window.location.hostname },
     challenge: base64urlToBuffer(options.challenge),
     user: {
       ...options.user,
       id: base64urlToBuffer(options.user.id)
     },
-    excludeCredentials: (options.excludeCredentials ?? []).map(
-      (c) => ({
-        ...c,
-        id: base64urlToBuffer(c.id)
-      })
-    )
+    excludeCredentials: (options.excludeCredentials ?? []).map((c) => ({
+      ...c,
+      id: base64urlToBuffer(c.id)
+    }))
   };
   const credential = await navigator.credentials.create({
     publicKey
@@ -267,20 +281,14 @@ async function createPasskeyCredential(options) {
     rawId: bufferToBase64url(credential.rawId),
     type: credential.type,
     response: {
-      clientDataJSON: bufferToBase64url(
-        attestation.clientDataJSON
-      ),
-      attestationObject: bufferToBase64url(
-        attestation.attestationObject
-      ),
+      clientDataJSON: bufferToBase64url(attestation.clientDataJSON),
+      attestationObject: bufferToBase64url(attestation.attestationObject),
       ...attestation.getTransports ? { transports: attestation.getTransports() } : {},
       ...attestation.getPublicKeyAlgorithm ? {
         publicKeyAlgorithm: attestation.getPublicKeyAlgorithm()
       } : {},
       ...attestation.getPublicKey ? {
-        publicKey: bufferToBase64url(
-          attestation.getPublicKey()
-        )
+        publicKey: bufferToBase64url(attestation.getPublicKey())
       } : {},
       ...attestation.getAuthenticatorData ? {
         authenticatorData: bufferToBase64url(
@@ -292,6 +300,38 @@ async function createPasskeyCredential(options) {
     authenticatorAttachment: credential.authenticatorAttachment ?? void 0
   };
 }
+async function getPasskeyCredential(options) {
+  const publicKey = {
+    challenge: base64urlToBuffer(options.challenge),
+    timeout: options.timeout,
+    rpId: window.location.hostname,
+    userVerification: options.userVerification || "preferred",
+    allowCredentials: (options.allowCredentials || []).map(
+      (c) => ({
+        ...c,
+        id: base64urlToBuffer(c.id)
+      })
+    )
+  };
+  const credential = await navigator.credentials.get({
+    publicKey
+  });
+  if (!credential) throw new Error("No credential returned");
+  const assertion = credential.response;
+  return {
+    id: credential.id,
+    rawId: bufferToBase64url(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: bufferToBase64url(assertion.clientDataJSON),
+      authenticatorData: bufferToBase64url(assertion.authenticatorData),
+      signature: bufferToBase64url(assertion.signature),
+      userHandle: assertion.userHandle ? bufferToBase64url(assertion.userHandle) : null
+    },
+    clientExtensionResults: credential.getClientExtensionResults(),
+    authenticatorAttachment: credential.authenticatorAttachment
+  };
+}
 
 // src/reducer/dauth.actions.ts
 async function exchangeCodeAction(ctx, code) {
@@ -438,19 +478,15 @@ async function registerPasskeyAction(ctx, name) {
       onError(new Error("Failed to start passkey registration"));
       return null;
     }
-    const credential = await createPasskeyCredential(
-      startResult.data
-    );
-    const finishResult = await finishPasskeyRegistrationAPI(
-      authProxyPath,
-      { credential, name }
-    );
+    const credential = await createPasskeyCredential(startResult.data);
+    const finishResult = await finishPasskeyRegistrationAPI(authProxyPath, {
+      credential,
+      name
+    });
     if (finishResult.response.status === 200 || finishResult.response.status === 201) {
       return finishResult.data.credential;
     }
-    onError(
-      new Error("Failed to finish passkey registration")
-    );
+    onError(new Error("Failed to finish passkey registration"));
     return null;
   } catch (error) {
     onError(
@@ -468,9 +504,7 @@ async function deletePasskeyCredentialAction(ctx, credentialId) {
     );
     return result.response.status === 200;
   } catch (error) {
-    onError(
-      error instanceof Error ? error : new Error("Delete passkey error")
-    );
+    onError(error instanceof Error ? error : new Error("Delete passkey error"));
     return false;
   }
 }
@@ -485,16 +519,69 @@ async function uploadAvatarAction(ctx, file) {
       });
       return true;
     }
-    onError(
-      new Error(
-        "Avatar upload error: " + result.data.message
-      )
+    onError(new Error("Avatar upload error: " + result.data.message));
+    return false;
+  } catch (error) {
+    onError(error instanceof Error ? error : new Error("Avatar upload error"));
+    return false;
+  }
+}
+async function loginWithPasskeyAction(ctx) {
+  const { dispatch, authProxyPath, onError } = ctx;
+  dispatch({
+    type: SET_IS_LOADING,
+    payload: { isLoading: true }
+  });
+  try {
+    const startResult = await startPasskeyAuthAPI(authProxyPath);
+    if (startResult.data.status !== "success" || !startResult.data.options) {
+      dispatch({
+        type: SET_IS_LOADING,
+        payload: { isLoading: false }
+      });
+      return false;
+    }
+    const credential = await getPasskeyCredential(
+      startResult.data.options
     );
+    const finishResult = await finishPasskeyAuthAPI(authProxyPath, {
+      credential,
+      sessionId: startResult.data.sessionId
+    });
+    if (finishResult.data.status === "login-success" && finishResult.data.redirect) {
+      const code = new URL(finishResult.data.redirect).searchParams.get("code");
+      if (code) {
+        const exchangeResult = await exchangeCodeAPI(authProxyPath, code);
+        if (exchangeResult.response.status === 200) {
+          dispatch({
+            type: LOGIN,
+            payload: {
+              user: exchangeResult.data.user,
+              domain: exchangeResult.data.domain,
+              isAuthenticated: true
+            }
+          });
+          dispatch({
+            type: SET_IS_LOADING,
+            payload: { isLoading: false }
+          });
+          return true;
+        }
+      }
+    }
+    dispatch({
+      type: SET_IS_LOADING,
+      payload: { isLoading: false }
+    });
     return false;
   } catch (error) {
     onError(
-      error instanceof Error ? error : new Error("Avatar upload error")
+      error instanceof Error ? error : new Error("Passkey authentication error")
     );
+    dispatch({
+      type: SET_IS_LOADING,
+      payload: { isLoading: false }
+    });
     return false;
   }
 }
@@ -518,13 +605,7 @@ function setDauthUrl(url) {
 function checkIsLocalhost() {
   if (typeof window === "undefined") return false;
   const hostname = window.location.hostname;
-  return hostname === "localhost" || hostname === "[::1]" || /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
-    hostname
-  ) || /^192\.168(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){2}$/.test(
-    hostname
-  ) || /^10(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
-    hostname
-  );
+  return hostname === "localhost" || hostname === "[::1]" || /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(hostname) || /^192\.168(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){2}$/.test(hostname) || /^10(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(hostname);
 }
 function getClientBasePath() {
   if (_dauthUrl) return _dauthUrl;
@@ -717,10 +798,7 @@ function useModalAnimation(open) {
     }
     if (phase === "entered" || phase === "entering") {
       setPhase("exiting");
-      const timer = setTimeout(
-        () => setPhase("exited"),
-        MOBILE_TRANSITION_MS
-      );
+      const timer = setTimeout(() => setPhase("exited"), MOBILE_TRANSITION_MS);
       return () => clearTimeout(timer);
     }
     return void 0;
@@ -870,18 +948,12 @@ function DauthProfileModal({
   }, [activeTab, showSecurity, getPasskeyCredentials]);
   (0, import_react.useEffect)(() => {
     if (status?.type !== "success") return;
-    const timer = setTimeout(
-      () => setStatus(null),
-      SUCCESS_TIMEOUT_MS
-    );
+    const timer = setTimeout(() => setStatus(null), SUCCESS_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [status]);
   (0, import_react.useEffect)(() => {
     if (passkeyStatus?.type !== "success") return;
-    const timer = setTimeout(
-      () => setPasskeyStatus(null),
-      SUCCESS_TIMEOUT_MS
-    );
+    const timer = setTimeout(() => setPasskeyStatus(null), SUCCESS_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [passkeyStatus]);
   useFocusTrap(modalRef, phase === "entered", onClose);
@@ -921,12 +993,9 @@ function DauthProfileModal({
     if (hasField("lastname")) fields.lastname = lastname;
     if (hasField("nickname")) fields.nickname = nickname;
     if (hasField("country")) fields.country = country;
-    if (hasField("tel_prefix"))
-      fields.telPrefix = telPrefix;
-    if (hasField("tel_suffix"))
-      fields.telSuffix = telSuffix;
-    if (hasField("birth_date") && birthDate)
-      fields.birthDate = birthDate;
+    if (hasField("tel_prefix")) fields.telPrefix = telPrefix;
+    if (hasField("tel_suffix")) fields.telSuffix = telSuffix;
+    if (hasField("birth_date") && birthDate) fields.birthDate = birthDate;
     if ((domain.customFields ?? []).length > 0)
       fields.customFields = customFieldValues;
     const ok = await updateUser(fields);
@@ -979,9 +1048,7 @@ function DauthProfileModal({
   const handleRegisterPasskey = (0, import_react.useCallback)(async () => {
     setRegistering(true);
     setPasskeyStatus(null);
-    const cred = await registerPasskey(
-      passkeyName || void 0
-    );
+    const cred = await registerPasskey(passkeyName || void 0);
     setRegistering(false);
     if (cred) {
       setCredentials((prev) => [...prev, cred]);
@@ -1002,9 +1069,7 @@ function DauthProfileModal({
     async (credentialId) => {
       const ok = await deletePasskeyCredential(credentialId);
       if (ok) {
-        setCredentials(
-          (prev) => prev.filter((c) => c._id !== credentialId)
-        );
+        setCredentials((prev) => prev.filter((c) => c._id !== credentialId));
       }
     },
     [deletePasskeyCredential]
@@ -1044,15 +1109,11 @@ function DauthProfileModal({
     if (!t) return {};
     const vars = {};
     if (t.accent) vars["--dauth-accent"] = t.accent;
-    if (t.accentHover)
-      vars["--dauth-accent-hover"] = t.accentHover;
+    if (t.accentHover) vars["--dauth-accent-hover"] = t.accentHover;
     if (t.surface) vars["--dauth-surface"] = t.surface;
-    if (t.surfaceHover)
-      vars["--dauth-surface-hover"] = t.surfaceHover;
-    if (t.textPrimary)
-      vars["--dauth-text-primary"] = t.textPrimary;
-    if (t.textSecondary)
-      vars["--dauth-text-secondary"] = t.textSecondary;
+    if (t.surfaceHover) vars["--dauth-surface-hover"] = t.surfaceHover;
+    if (t.textPrimary) vars["--dauth-text-primary"] = t.textPrimary;
+    if (t.textSecondary) vars["--dauth-text-secondary"] = t.textSecondary;
     if (t.border) vars["--dauth-border"] = t.border;
     return vars;
   }, [domain.modalTheme]);
@@ -1219,14 +1280,7 @@ function DauthProfileModal({
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "label",
-                          {
-                            htmlFor: "dauth-name",
-                            style: label,
-                            children: "Name *"
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "dauth-name", style: label, children: "Name *" }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "input",
                           {
@@ -1243,17 +1297,10 @@ function DauthProfileModal({
                         )
                       ] }),
                       hasField("lastname") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "label",
-                          {
-                            htmlFor: "dauth-lastname",
-                            style: label,
-                            children: [
-                              "Last name",
-                              isRequired("lastname") ? " *" : ""
-                            ]
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-lastname", style: label, children: [
+                          "Last name",
+                          isRequired("lastname") ? " *" : ""
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "input",
                           {
@@ -1270,17 +1317,10 @@ function DauthProfileModal({
                         )
                       ] }),
                       hasField("nickname") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "label",
-                          {
-                            htmlFor: "dauth-nickname",
-                            style: label,
-                            children: [
-                              "Nickname",
-                              isRequired("nickname") ? " *" : ""
-                            ]
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-nickname", style: label, children: [
+                          "Nickname",
+                          isRequired("nickname") ? " *" : ""
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "input",
                           {
@@ -1297,17 +1337,10 @@ function DauthProfileModal({
                         )
                       ] }),
                       hasField("country") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "label",
-                          {
-                            htmlFor: "dauth-country",
-                            style: label,
-                            children: [
-                              "Country",
-                              isRequired("country") ? " *" : ""
-                            ]
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-country", style: label, children: [
+                          "Country",
+                          isRequired("country") ? " *" : ""
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "input",
                           {
@@ -1378,17 +1411,10 @@ function DauthProfileModal({
                         )
                       ] }),
                       hasField("birth_date") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "label",
-                          {
-                            htmlFor: "dauth-birthdate",
-                            style: label,
-                            children: [
-                              "Birth date",
-                              isRequired("birth_date") ? " *" : ""
-                            ]
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-birthdate", style: label, children: [
+                          "Birth date",
+                          isRequired("birth_date") ? " *" : ""
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "input",
                           {
@@ -1405,44 +1431,28 @@ function DauthProfileModal({
                       ] }),
                       (domain.customFields ?? []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
-                        domain.customFields.map((cf) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          "div",
-                          {
-                            style: fieldGroup,
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                                "label",
-                                {
-                                  htmlFor: `dauth-cf-${cf.key}`,
-                                  style: label,
-                                  children: [
-                                    cf.label,
-                                    cf.required ? " *" : ""
-                                  ]
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                "input",
-                                {
-                                  id: `dauth-cf-${cf.key}`,
-                                  type: "text",
-                                  value: customFieldValues[cf.key] ?? "",
-                                  onChange: (e) => setCustomFieldValues(
-                                    (prev) => ({
-                                      ...prev,
-                                      [cf.key]: e.target.value
-                                    })
-                                  ),
-                                  disabled: saving,
-                                  style: input,
-                                  onFocus: inputFocusHandler,
-                                  onBlur: inputBlurHandler
-                                }
-                              )
-                            ]
-                          },
-                          cf.key
-                        ))
+                        domain.customFields.map((cf) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: `dauth-cf-${cf.key}`, style: label, children: [
+                            cf.label,
+                            cf.required ? " *" : ""
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "input",
+                            {
+                              id: `dauth-cf-${cf.key}`,
+                              type: "text",
+                              value: customFieldValues[cf.key] ?? "",
+                              onChange: (e) => setCustomFieldValues((prev) => ({
+                                ...prev,
+                                [cf.key]: e.target.value
+                              })),
+                              disabled: saving,
+                              style: input,
+                              onFocus: inputFocusHandler,
+                              onBlur: inputBlurHandler
+                            }
+                          )
+                        ] }, cf.key))
                       ] })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
@@ -1502,14 +1512,7 @@ function DauthProfileModal({
                     ),
                     showRegister && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: registerPanel, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "label",
-                          {
-                            htmlFor: "dauth-passkey-name",
-                            style: label,
-                            children: "Passkey name (optional)"
-                          }
-                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "dauth-passkey-name", style: label, children: "Passkey name (optional)" }),
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "input",
                           {
@@ -1585,89 +1588,82 @@ function DauthProfileModal({
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})
                       }
-                    ) : credentials.length > 0 ? credentials.map((cred) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      "div",
-                      {
-                        style: credentialRow,
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                            "div",
-                            {
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 12,
-                                flex: 1,
-                                minWidth: 0
-                              },
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                  "span",
-                                  {
-                                    style: {
-                                      color: "var(--dauth-accent, #6366f1)",
-                                      flexShrink: 0
-                                    },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconFingerprint, {})
-                                  }
-                                ),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                                  "div",
-                                  {
-                                    style: {
-                                      minWidth: 0,
-                                      flex: 1
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                        "div",
-                                        {
-                                          style: {
-                                            fontSize: "var(--dauth-font-size-sm, 0.875rem)",
-                                            fontWeight: 500,
-                                            color: "var(--dauth-text-primary, #e4e4e7)",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                            whiteSpace: "nowrap"
-                                          },
-                                          children: cred.name || "Passkey"
-                                        }
-                                      ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                                        "div",
-                                        {
-                                          style: {
-                                            fontSize: "var(--dauth-font-size-xs, 0.75rem)",
-                                            color: "var(--dauth-text-muted, #71717a)"
-                                          },
-                                          children: [
-                                            cred.deviceType === "multiDevice" ? "Synced" : "Device-bound",
-                                            cred.createdAt && ` \xB7 Created ${new Date(cred.createdAt).toLocaleDateString()}`
-                                          ]
-                                        }
-                                      )
-                                    ]
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => handleDeletePasskey(cred._id),
-                              style: trashBtn,
-                              onMouseEnter: (e) => e.currentTarget.style.color = "var(--dauth-error, #ef4444)",
-                              onMouseLeave: (e) => e.currentTarget.style.color = "var(--dauth-text-muted, #71717a)",
-                              "aria-label": `Delete passkey ${cred.name || ""}`,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconTrash, {})
-                            }
-                          )
-                        ]
-                      },
-                      cred._id
-                    )) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: emptyState, children: [
+                    ) : credentials.length > 0 ? credentials.map((cred) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: credentialRow, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 12,
+                            flex: 1,
+                            minWidth: 0
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "span",
+                              {
+                                style: {
+                                  color: "var(--dauth-accent, #6366f1)",
+                                  flexShrink: 0
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconFingerprint, {})
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              "div",
+                              {
+                                style: {
+                                  minWidth: 0,
+                                  flex: 1
+                                },
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    "div",
+                                    {
+                                      style: {
+                                        fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+                                        fontWeight: 500,
+                                        color: "var(--dauth-text-primary, #e4e4e7)",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap"
+                                      },
+                                      children: cred.name || "Passkey"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                    "div",
+                                    {
+                                      style: {
+                                        fontSize: "var(--dauth-font-size-xs, 0.75rem)",
+                                        color: "var(--dauth-text-muted, #71717a)"
+                                      },
+                                      children: [
+                                        cred.deviceType === "multiDevice" ? "Synced" : "Device-bound",
+                                        cred.createdAt && ` \xB7 Created ${new Date(cred.createdAt).toLocaleDateString()}`
+                                      ]
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleDeletePasskey(cred._id),
+                          style: trashBtn,
+                          onMouseEnter: (e) => e.currentTarget.style.color = "var(--dauth-error, #ef4444)",
+                          onMouseLeave: (e) => e.currentTarget.style.color = "var(--dauth-text-muted, #71717a)",
+                          "aria-label": `Delete passkey ${cred.name || ""}`,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconTrash, {})
+                        }
+                      )
+                    ] }, cred._id)) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: emptyState, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "span",
                         {
@@ -2275,6 +2271,10 @@ var DauthProvider = (props) => {
     (file) => uploadAvatarAction(ctx, file),
     [ctx]
   );
+  const loginWithPasskey = (0, import_react2.useCallback)(
+    () => loginWithPasskeyAction(ctx),
+    [ctx]
+  );
   const memoProvider = (0, import_react2.useMemo)(
     () => ({
       ...dauthState,
@@ -2285,7 +2285,8 @@ var DauthProvider = (props) => {
       getPasskeyCredentials,
       registerPasskey,
       deletePasskeyCredential,
-      uploadAvatar
+      uploadAvatar,
+      loginWithPasskey
     }),
     [
       dauthState,
@@ -2296,7 +2297,8 @@ var DauthProvider = (props) => {
       getPasskeyCredentials,
       registerPasskey,
       deletePasskeyCredential,
-      uploadAvatar
+      uploadAvatar,
+      loginWithPasskey
     ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DauthContext.Provider, { value: memoProvider, children });