@lumiapassport/ui-kit 1.15.10 → 1.15.11

package/dist/index.js

@@ -101,7 +101,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;
 }
@@ -541,6 +541,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;
 }
@@ -2233,6 +2242,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 ensureValidToken();
   if (!hasValidToken) throw new Error("No authentication token available");
@@ -2311,8 +2326,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,
@@ -2347,6 +2362,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"() {
@@ -5501,7 +5518,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",
@@ -8407,6 +8424,7 @@ var useRestoreStore = create4((set) => ({
   restoreFile: null,
   checkingBackup: false,
   hasServerBackup: false,
+  isCreatingPasskey: false,
   selectedCloudProvider: null,
   error: null,
   success: null,
@@ -8418,6 +8436,7 @@ var useRestoreStore = create4((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 })
@@ -8542,7 +8561,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();
   useEffect15(() => {
     if (!hasServerVault) {
       setMethod("server");
@@ -8561,12 +8580,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
@@ -8590,7 +8610,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] });
     }
   });
@@ -8628,6 +8652,31 @@ function useCreateBackup() {
       qc.invalidateQueries({ queryKey: [CHECK_BACKUP_QUERY_KEY, address] });
     }
   });
+  const { mutate: createPasskey, isPending: isPasskeyCreating } = useMutation7({
+    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 } = useMutation7({
     mutationFn: async () => {
       const iframeManager = getIframeManager();
@@ -8674,7 +8723,9 @@ function useCreateBackup() {
     isCloudBackupCreating,
     createCloudBackup,
     isLocalBackupCreating,
-    createLocalBackup
+    createLocalBackup,
+    isPasskeyCreating,
+    createPasskey
   };
 }
 
@@ -8891,7 +8942,7 @@ function MethodSelector(props) {
 import { AlertCircle, FileUp as FileUp2, Upload, User } from "lucide-react";
 
 // src/internal/components/KeyshareRestoreMenu/components/PasswordPasskey.tsx
-import { ChevronRight as ChevronRight2, Eye, EyeOff, Info as Info2, Key as Key4, Loader as Loader8 } from "lucide-react";
+import { ChevronRight as ChevronRight2, Eye, EyeOff, Info as Info2, Key as Key4, Loader as Loader8, Plus } from "lucide-react";
 import { useRef as useRef12 } from "react";
 import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 function PasswordPasskey(props) {
@@ -8902,7 +8953,8 @@ function PasswordPasskey(props) {
     isLoading,
     disabled,
     isEncryptionMethod,
-    actionHandler
+    actionHandler,
+    onCreatePasskey
   } = props;
   const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const actionRef = useRef12(null);
@@ -8911,6 +8963,7 @@ function PasswordPasskey(props) {
     restorePassword,
     usePasskey,
     error,
+    isCreatingPasskey,
     setRestorePassword,
     setShowPassword,
     setUsePasskey,
@@ -9007,22 +9060,41 @@ function PasswordPasskey(props) {
           children: isLoading ? /* @__PURE__ */ jsx39(Loader8, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ jsx39(ChevronRight2, { className: "h-4 w-4" })
         }
       )
-    ] }) : /* @__PURE__ */ jsxs32(
-      Button,
-      {
-        ref: actionRef,
-        size: "large",
-        variant: "default",
-        title: actionCaption,
-        onClick: actionHandler,
-        disabled: isLoading || disabled || !!error || !usePasskey && !restorePassword,
-        className: "w-full",
-        children: [
-          isLoading ? /* @__PURE__ */ jsx39(Loader8, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ jsx39(ActionIcon, { className: "h-4 w-4" }),
-          !isLoading && /* @__PURE__ */ jsx39("span", { children: actionCaption })
-        ]
-      }
-    ),
+    ] }) : /* @__PURE__ */ jsxs32("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
+      /* @__PURE__ */ jsx39(
+        Button,
+        {
+          ref: actionRef,
+          size: "large",
+          variant: "default",
+          title: actionCaption,
+          onClick: actionHandler,
+          disabled: isLoading || disabled || !usePasskey && !restorePassword,
+          className: "w-full",
+          children: isLoading ? /* @__PURE__ */ jsxs32(Fragment9, { children: [
+            /* @__PURE__ */ jsx39(Loader8, { className: "animate-spin h-4 w-4" }),
+            isCreatingPasskey && /* @__PURE__ */ jsx39("span", { children: "Creating Passkey..." })
+          ] }) : /* @__PURE__ */ jsxs32(Fragment9, { children: [
+            /* @__PURE__ */ jsx39(ActionIcon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx39("span", { children: actionCaption })
+          ] })
+        }
+      ),
+      mode === "backup" && onCreatePasskey && /* @__PURE__ */ jsxs32(
+        Button,
+        {
+          size: "medium",
+          variant: "outline",
+          onClick: onCreatePasskey,
+          disabled: isLoading || disabled,
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ jsx39(Plus, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx39("span", { children: "Create new Passkey" })
+          ]
+        }
+      )
+    ] }),
     !isEncryptionMethod && !!usePasskey && /* @__PURE__ */ jsx39(Highlight, { type: "info", className: "w-full flex flex-col gap-[var(--l-pass-gap)] text-[10px]", children: mode === "backup" && /* @__PURE__ */ jsxs32("div", { className: "flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ jsx39(Info2, { className: "h-4 w-4 flex-shrink-0" }),
       /* @__PURE__ */ jsxs32("span", { className: "text-[var(--l-pass-fg-muted)] block flex-1", children: [
@@ -9176,7 +9248,7 @@ import { Download, Key as Key5, Upload as Upload2 } from "lucide-react";
 import { useEffect as useEffect17 } from "react";
 import { Fragment as Fragment12, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
 function Server(props) {
-  const { isLoading, mode = "restore", serverHandler } = props;
+  const { isLoading, mode = "restore", serverHandler, createPasskeyHandler } = props;
   const qc = useQueryClient6();
   const address = useLumiaPassportSession((st) => st.address);
   const setUsePasskey = useRestoreStore((st) => st.setUsePasskey);
@@ -9195,7 +9267,8 @@ function Server(props) {
         isLoading,
         actionCaption: mode === "backup" ? "Create Vault Backup" : "Restore from Vault",
         actionIcon: mode === "backup" ? Upload2 : Download,
-        actionHandler: () => serverHandler()
+        actionHandler: () => serverHandler(),
+        onCreatePasskey: createPasskeyHandler
       }
     ),
     !!serverRecoveryStatus?.created?.at && /* @__PURE__ */ jsxs35(Highlight, { type: "success", className: "flex gap-[var(--l-pass-gap)]", children: [
@@ -9657,7 +9730,9 @@ function KeyshareBackupMenu() {
     isCloudBackupCreating,
     createCloudBackup,
     isLocalBackupCreating,
-    createLocalBackup
+    createLocalBackup,
+    isPasskeyCreating,
+    createPasskey
   } = useCreateBackup();
   const BackupComponent = !!currentBackupMethod ? COMPONENTS[currentBackupMethod] : null;
   return /* @__PURE__ */ jsx46(
@@ -9719,10 +9794,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__ */ jsxs39(Highlight, { type: "warning", className: "flex gap-[var(--l-pass-gap)]", children: [