@lumiapassport/ui-kit 1.15.10 → 1.15.11

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.15.10</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.15.11</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -4403,7 +4403,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.15.10";
+var IFRAME_VERSION = "1.15.11";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));

package/dist/index.cjs

@@ -111,7 +111,7 @@ function getServiceUrls() {
 }
 function getIframeUrl() {
   const config = DEFAULT_LUMIA_PASSPORT_CONFIG;
-  const buildIframeUrl = "https://auth.lumiapassport.com";
+  const buildIframeUrl = "http://localhost:5173/iframe/index.html";
   const iframeUrl = buildIframeUrl || config.services.iframeUrl || "https://auth.lumiapassport.com";
   return iframeUrl;
 }
@@ -552,6 +552,15 @@ var init_site = __esm({
 });
 
 // src/internal/auth/passkey.ts
+var passkey_exports = {};
+__export(passkey_exports, {
+  authenticateWithPasskey: () => authenticateWithPasskey,
+  createPasskeyHelpers: () => createPasskeyHelpers,
+  hasAvailablePasskeys: () => hasAvailablePasskeys,
+  isWebAuthnSupported: () => isWebAuthnSupported,
+  registerPasskey: () => registerPasskey,
+  resetWebAuthnFlags: () => resetWebAuthnFlags
+});
 function setGlobalConditionalUI(active) {
   if (typeof window !== "undefined") window.__LUMIA_CONDITIONAL_UI_ACTIVE__ = active;
 }
@@ -2244,6 +2253,12 @@ var init_email = __esm({
 });
 
 // src/internal/auth/providers/passkey.ts
+var passkey_exports2 = {};
+__export(passkey_exports2, {
+  beginPasskeyLinking: () => beginPasskeyLinking,
+  completePasskeyLinking: () => completePasskeyLinking,
+  linkPasskeyWithWebAuthn: () => linkPasskeyWithWebAuthn
+});
 async function completePasskeyLinking(payload) {
   const hasValidToken = await (0, import_auth3.ensureValidToken)();
   if (!hasValidToken) throw new Error("No authentication token available");
@@ -2322,8 +2337,8 @@ async function linkPasskeyWithWebAuthn(optionsOverride) {
   }
   try {
     const ts = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
-    const friendlyDisplay = `Lumia User (${ts})`;
-    const friendlyName = `lumia-link.${ts}`;
+    const friendlyDisplay = `Lumia Passport (${ts})`;
+    const friendlyName = `lumia-passport.${ts}`;
     const originalUser = publicKeyOptions.user;
     publicKeyOptions = {
       ...publicKeyOptions,
@@ -2358,6 +2373,8 @@ async function linkPasskeyWithWebAuthn(optionsOverride) {
   const attestationPayload = credentialToAttestationPayload(credential);
   const cid = challengeId || "local-" + Date.now();
   await completePasskeyLinking({ challengeId: cid, credential: attestationPayload });
+  const rawIdB64 = btoa(String.fromCharCode(...new Uint8Array(credential.rawId)));
+  return { credentialId: credential.id, rawId: rawIdB64 };
 }
 var init_passkey2 = __esm({
   "src/internal/auth/providers/passkey.ts"() {
@@ -5553,7 +5570,7 @@ function Header() {
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.15.10",
+  version: "1.15.11",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",
@@ -8459,6 +8476,7 @@ var useRestoreStore = (0, import_zustand4.create)((set) => ({
   restoreFile: null,
   checkingBackup: false,
   hasServerBackup: false,
+  isCreatingPasskey: false,
   selectedCloudProvider: null,
   error: null,
   success: null,
@@ -8470,6 +8488,7 @@ var useRestoreStore = (0, import_zustand4.create)((set) => ({
   setRestoreFile: (restoreFile) => set({ restoreFile }),
   setCheckingBackup: (checkingBackup) => set({ checkingBackup }),
   setHasServerBackup: (hasServerBackup) => set({ hasServerBackup }),
+  setIsCreatingPasskey: (isCreatingPasskey) => set({ isCreatingPasskey }),
   setSelectedCloudProvider: (providerId) => set({ selectedCloudProvider: providerId }),
   setError: (error) => set({ error }),
   setSuccess: (success) => set({ success })
@@ -8594,7 +8613,7 @@ function useCreateBackup() {
   const address = useLumiaPassportSession((st) => st.address);
   const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
-  const { usePasskey, restorePassword, selectedCloudProvider, setSuccess, setError, setMethod } = useRestoreStore();
+  const { usePasskey, restorePassword, selectedCloudProvider, setSuccess, setError, setMethod, setIsCreatingPasskey } = useRestoreStore();
   (0, import_react26.useEffect)(() => {
     if (!hasServerVault) {
       setMethod("server");
@@ -8613,12 +8632,13 @@ function useCreateBackup() {
       if (!usePasskey && !restorePassword) {
         throw new Error("Please provide a password for the backup");
       }
+      const password = !usePasskey ? restorePassword : void 0;
       const navigateToMainMenu = jwt.isNewUser || !hasServerVault;
-      console.log("[BACKUP STATUS] is new user:", jwt.isNewUser, !hasServerVault);
+      console.log("[BACKUP STATUS] is new user:", jwt.isNewUser, !hasServerVault, "usePasskey:", usePasskey);
       return {
         response: await iframeManager.createBackup(
           passportUserId,
-          { method: "server", password: restorePassword },
+          { method: "server", password },
           jwt.accessToken
         ),
         navigateToMainMenu
@@ -8642,7 +8662,11 @@ function useCreateBackup() {
       setIsDialogForced(false);
     },
     onError: async (error) => {
-      setError(error?.message || "Backup creation failed");
+      if (error?.name === "NotAllowedError" || error?.message?.includes("timed out or was not allowed")) {
+        setError("Passkey selection was cancelled. Please try again or create a new passkey.");
+      } else {
+        setError(error?.message || "Backup creation failed");
+      }
       qc.invalidateQueries({ queryKey: [CHECK_BACKUP_QUERY_KEY, address] });
     }
   });
@@ -8680,6 +8704,31 @@ function useCreateBackup() {
       qc.invalidateQueries({ queryKey: [CHECK_BACKUP_QUERY_KEY, address] });
     }
   });
+  const { mutate: createPasskey, isPending: isPasskeyCreating } = (0, import_react_query12.useMutation)({
+    mutationFn: async () => {
+      setIsCreatingPasskey(true);
+      const { linkPasskeyWithWebAuthn: linkPasskeyWithWebAuthn2 } = await Promise.resolve().then(() => (init_passkey2(), passkey_exports2));
+      const { createPasskeyHelpers: createPasskeyHelpers2 } = await Promise.resolve().then(() => (init_passkey(), passkey_exports));
+      const { credentialId, rawId } = await linkPasskeyWithWebAuthn2();
+      const helpers = createPasskeyHelpers2(passportUserId);
+      helpers.setCredId(credentialId);
+      helpers.setRawId(rawId);
+      return { credentialId, rawId };
+    },
+    onSuccess: async () => {
+      setIsCreatingPasskey(false);
+      setError(null);
+      setSuccess("Passkey created successfully. You can now create a backup.");
+    },
+    onError: async (error) => {
+      setIsCreatingPasskey(false);
+      if (error.name === "NotAllowedError") {
+        setError("Passkey creation cancelled. Please try again.");
+      } else {
+        setError(error?.message || "Failed to create passkey");
+      }
+    }
+  });
   const { mutate: createCloudBackup, isPending: isCloudBackupCreating } = (0, import_react_query12.useMutation)({
     mutationFn: async () => {
       const iframeManager = getIframeManager();
@@ -8726,7 +8775,9 @@ function useCreateBackup() {
     isCloudBackupCreating,
     createCloudBackup,
     isLocalBackupCreating,
-    createLocalBackup
+    createLocalBackup,
+    isPasskeyCreating,
+    createPasskey
   };
 }
 
@@ -8954,7 +9005,8 @@ function PasswordPasskey(props) {
     isLoading,
     disabled,
     isEncryptionMethod,
-    actionHandler
+    actionHandler,
+    onCreatePasskey
   } = props;
   const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const actionRef = (0, import_react29.useRef)(null);
@@ -8963,6 +9015,7 @@ function PasswordPasskey(props) {
     restorePassword,
     usePasskey,
     error,
+    isCreatingPasskey,
     setRestorePassword,
     setShowPassword,
     setUsePasskey,
@@ -9059,22 +9112,41 @@ function PasswordPasskey(props) {
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Loader, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.ChevronRight, { className: "h-4 w-4" })
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-      Button,
-      {
-        ref: actionRef,
-        size: "large",
-        variant: "default",
-        title: actionCaption,
-        onClick: actionHandler,
-        disabled: isLoading || disabled || !!error || !usePasskey && !restorePassword,
-        className: "w-full",
-        children: [
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Loader, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ActionIcon, { className: "h-4 w-4" }),
-          !isLoading && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: actionCaption })
-        ]
-      }
-    ),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        Button,
+        {
+          ref: actionRef,
+          size: "large",
+          variant: "default",
+          title: actionCaption,
+          onClick: actionHandler,
+          disabled: isLoading || disabled || !usePasskey && !restorePassword,
+          className: "w-full",
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Loader, { className: "animate-spin h-4 w-4" }),
+            isCreatingPasskey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Creating Passkey..." })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ActionIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: actionCaption })
+          ] })
+        }
+      ),
+      mode === "backup" && onCreatePasskey && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        Button,
+        {
+          size: "medium",
+          variant: "outline",
+          onClick: onCreatePasskey,
+          disabled: isLoading || disabled,
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Plus, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Create new Passkey" })
+          ]
+        }
+      )
+    ] }),
     !isEncryptionMethod && !!usePasskey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Highlight, { type: "info", className: "w-full flex flex-col gap-[var(--l-pass-gap)] text-[10px]", children: mode === "backup" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Info, { className: "h-4 w-4 flex-shrink-0" }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "text-[var(--l-pass-fg-muted)] block flex-1", children: [
@@ -9228,7 +9300,7 @@ var import_lucide_react23 = require("lucide-react");
 var import_react30 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function Server(props) {
-  const { isLoading, mode = "restore", serverHandler } = props;
+  const { isLoading, mode = "restore", serverHandler, createPasskeyHandler } = props;
   const qc = (0, import_react_query14.useQueryClient)();
   const address = useLumiaPassportSession((st) => st.address);
   const setUsePasskey = useRestoreStore((st) => st.setUsePasskey);
@@ -9247,7 +9319,8 @@ function Server(props) {
         isLoading,
         actionCaption: mode === "backup" ? "Create Vault Backup" : "Restore from Vault",
         actionIcon: mode === "backup" ? import_lucide_react23.Upload : import_lucide_react23.Download,
-        actionHandler: () => serverHandler()
+        actionHandler: () => serverHandler(),
+        onCreatePasskey: createPasskeyHandler
       }
     ),
     !!serverRecoveryStatus?.created?.at && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Highlight, { type: "success", className: "flex gap-[var(--l-pass-gap)]", children: [
@@ -9709,7 +9782,9 @@ function KeyshareBackupMenu() {
     isCloudBackupCreating,
     createCloudBackup,
     isLocalBackupCreating,
-    createLocalBackup
+    createLocalBackup,
+    isPasskeyCreating,
+    createPasskey
   } = useCreateBackup();
   const BackupComponent = !!currentBackupMethod ? COMPONENTS[currentBackupMethod] : null;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -9771,10 +9846,11 @@ function KeyshareBackupMenu() {
           BackupComponent,
           {
             mode: "backup",
-            isLoading: isPasswordBackupCreating || isCloudBackupCreating || isLocalBackupCreating,
+            isLoading: isPasswordBackupCreating || isCloudBackupCreating || isLocalBackupCreating || isPasskeyCreating,
             fileHandler: createLocalBackup,
             serverHandler: createPasswordBackup,
-            cloudHandler: createCloudBackup
+            cloudHandler: createCloudBackup,
+            createPasskeyHandler: createPasskey
           }
         ) }),
         !isRecoveryLoading && !currentBackupMethod && !hasRecoveryData && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Highlight, { type: "warning", className: "flex gap-[var(--l-pass-gap)]", children: [