@lumiapassport/ui-kit 1.16.0 → 1.16.2

package/dist/iframe/oauth/x.js

@@ -153,6 +153,8 @@ async function startOAuthFlow() {
 /**
  * Handle successful OAuth after backend redirect
  * Backend processes callback and redirects back with success=true
+ * If authCode is present, exchanges it for tokens (Safari ITP fix)
+ * Otherwise falls back to cookie-based verify (desktop browsers)
  */
 async function handleBackendSuccess() {
   try {
@@ -166,32 +168,88 @@ async function handleBackendSuccess() {
       throw new Error('Missing TSS URL. Check build-time configuration.');
     }
 
-    // Verify the session was created by checking auth endpoint
-    const verifyEndpoint = PROJECT_ID
-      ? `${TSS_URL}/api/auth/verify?projectId=${encodeURIComponent(PROJECT_ID)}`
-      : `${TSS_URL}/api/auth/verify`;
+    // Check for auth code (new flow for Safari ITP compatibility)
+    const authCode = urlParams.get('authCode');
+    let userData;
+    let tokens = null;
 
-    const verifyResponse = await fetch(verifyEndpoint, {
-      method: 'GET',
-      credentials: 'include',
-    });
+    if (authCode) {
+      // New flow: Exchange auth code for tokens (fixes Safari ITP issues)
+      console.log('[X OAuth] Auth code present, exchanging for tokens...');
+
+      const exchangeEndpoint = PROJECT_ID
+        ? `${TSS_URL}/api/auth/exchange-code?projectId=${encodeURIComponent(PROJECT_ID)}`
+        : `${TSS_URL}/api/auth/exchange-code`;
+
+      const exchangeResponse = await fetch(exchangeEndpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: authCode })
+      });
+
+      if (!exchangeResponse.ok) {
+        const errorData = await exchangeResponse.json().catch(() => ({}));
+        console.error('[X OAuth] Code exchange failed:', exchangeResponse.status, errorData);
+        throw new Error(errorData.error || 'Failed to exchange auth code');
+      }
+
+      const exchangeData = await exchangeResponse.json();
+      console.log('[X OAuth] Code exchange successful:', { userId: exchangeData.userId, hasKeyshare: exchangeData.hasKeyshare });
+
+      // Extract tokens for postMessage
+      tokens = {
+        accessToken: exchangeData.accessToken,
+        refreshToken: exchangeData.refreshToken
+      };
+
+      // Build userData in the same format as verify endpoint
+      userData = {
+        valid: true,
+        userId: exchangeData.userId,
+        sessionId: exchangeData.sessionId,
+        expiresIn: exchangeData.expiresIn,
+        hasKeyshare: exchangeData.hasKeyshare,
+        displayName: exchangeData.displayName,
+        providers: exchangeData.providers
+      };
+    } else {
+      // Legacy flow: Use cookies (works on desktop browsers)
+      console.log('[X OAuth] No auth code, falling back to cookie-based verify...');
 
-    if (!verifyResponse.ok) {
-      console.error('[X OAuth] Verify failed:', verifyResponse.status);
-      throw new Error('Failed to verify authentication. Session may not be created.');
+      const verifyEndpoint = PROJECT_ID
+        ? `${TSS_URL}/api/auth/verify?projectId=${encodeURIComponent(PROJECT_ID)}`
+        : `${TSS_URL}/api/auth/verify`;
+
+      const verifyResponse = await fetch(verifyEndpoint, {
+        method: 'GET',
+        credentials: 'include',
+      });
+
+      if (!verifyResponse.ok) {
+        console.error('[X OAuth] Verify failed:', verifyResponse.status);
+        throw new Error('Failed to verify authentication. Session may not be created.');
+      }
+
+      userData = await verifyResponse.json();
     }
 
-    const userData = await verifyResponse.json();
     console.log('[X OAuth] Authentication verified:', userData);
 
     // Send success to opener
     if (window.opener) {
-      window.opener.postMessage({
+      const message = {
         type: 'X_AUTH_SUCCESS',
         provider: 'x',
         user: userData,
         mode: MODE
-      }, '*');
+      };
+
+      // Include tokens if we have them (new flow)
+      if (tokens) {
+        message.tokens = tokens;
+      }
+
+      window.opener.postMessage(message, '*');
 
       // Mark that we've sent the auth result
       authResultSent = true;

package/dist/index.cjs

@@ -703,52 +703,72 @@ async function ensureDkgAndGetOwner(userId, _clientSeedHex) {
     throw error;
   }
 }
+function isChannelError(error) {
+  const message = error.message.toLowerCase();
+  return message.includes("invalid sdk channel") || message.includes("sdk channel not found") || message.includes("sdk channel expired") || // Backward compatibility
+  message === "invalid session";
+}
 async function signDigestWithMpc(userId, digest32, userOpDetails) {
+  const MAX_RETRIES = 1;
   const startTime = performance.now();
   currentSigningStats = {
     startTime,
     rounds: []
   };
-  try {
-    const iframeManager = getIframeManager();
-    const { jwtTokenManager: jwtTokenManager4 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
-    const accessToken = jwtTokenManager4.getAccessToken();
-    if (!accessToken) {
-      throw new Error("No access token available for signing");
-    }
-    const transaction = {
-      to: userOpDetails?.callTarget || "0x0000000000000000000000000000000000000000",
-      value: userOpDetails?.value || "0",
-      data: userOpDetails?.callData || "0x",
-      digest32,
-      // Pre-computed digest - DO NOT recompute!
-      // Additional UserOp fields for display in confirmation modal
-      userOpDetails
-    };
-    const signature = await iframeManager.signTransaction(userId, transaction, accessToken);
-    const endTime = performance.now();
-    currentSigningStats.endTime = endTime;
-    currentSigningStats.totalDurationMs = endTime - startTime;
-    return signature;
-  } catch (error) {
-    (0, import_error_tracking.logSdkError)(
-      error instanceof Error ? error : new Error("MPC signing failed"),
-      { userId, hasUserOpDetails: !!userOpDetails },
-      "iframe-mpc"
-    );
-    const endTime = performance.now();
-    if (currentSigningStats) {
+  let lastError;
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      const iframeManager = getIframeManager();
+      const { jwtTokenManager: jwtTokenManager4 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
+      const accessToken = jwtTokenManager4.getAccessToken();
+      if (!accessToken) {
+        throw new Error("No access token available for signing");
+      }
+      const transaction = {
+        to: userOpDetails?.callTarget || "0x0000000000000000000000000000000000000000",
+        value: userOpDetails?.value || "0",
+        data: userOpDetails?.callData || "0x",
+        digest32,
+        // Pre-computed digest - DO NOT recompute!
+        // Additional UserOp fields for display in confirmation modal
+        userOpDetails
+      };
+      const signature = await iframeManager.signTransaction(userId, transaction, accessToken);
+      const endTime = performance.now();
       currentSigningStats.endTime = endTime;
       currentSigningStats.totalDurationMs = endTime - startTime;
+      return signature;
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error("MPC signing failed");
+      if (isChannelError(lastError) && attempt < MAX_RETRIES) {
+        console.warn(`[MPC] SDK channel error, reconnecting and retrying (attempt ${attempt + 1})...`);
+        try {
+          await getIframeManager().reconnect();
+          continue;
+        } catch (reconnectError) {
+          console.error("[MPC] Reconnect failed:", reconnectError);
+        }
+      }
+      (0, import_error_tracking.logSdkError)(
+        lastError,
+        { userId, hasUserOpDetails: !!userOpDetails, attempt },
+        "iframe-mpc"
+      );
+      const endTime = performance.now();
+      if (currentSigningStats) {
+        currentSigningStats.endTime = endTime;
+        currentSigningStats.totalDurationMs = endTime - startTime;
+      }
+      if (lastError instanceof LumiaPassportError) {
+        throw lastError;
+      }
+      throw new LumiaPassportError(
+        lastError.message,
+        ErrorCodes.MPC_SIGNING_ERROR
+      );
     }
-    if (error instanceof LumiaPassportError) {
-      throw error;
-    }
-    throw new LumiaPassportError(
-      error instanceof Error ? error.message : "MPC signing failed",
-      ErrorCodes.MPC_SIGNING_ERROR
-    );
   }
+  throw lastError || new Error("MPC signing failed after retries");
 }
 async function signTypedDataWithMpc(userId, digest32, typedData) {
   const startTime = performance.now();
@@ -1379,7 +1399,7 @@ async function getShareVaultToken(scopes) {
   }
   return {
     token: data.resourceToken,
-    expiresAt: Date.now() + data.expiresIn * 1e3
+    expiresAt: Date.now() + (data.expiresIn || 300) * 1e3
   };
 }
 async function getShareRecoveryStats() {
@@ -2620,10 +2640,9 @@ var init_iframe_manager = __esm({
   "src/internal/lib/iframe-manager.ts"() {
     init_errors();
     IframeManager = class {
-      // 5 minutes
       constructor(config) {
         this.iframe = null;
-        this.sessionToken = null;
+        this.channelToken = null;
         this.isReady = false;
         // Message handling
         this.pendingRequests = /* @__PURE__ */ new Map();
@@ -2640,6 +2659,9 @@ var init_iframe_manager = __esm({
         this.REQUEST_TIMEOUT = 3e5;
         // 5 minutes (for user interactions like consent)
         this.NONCE_EXPIRY = 3e5;
+        // 5 minutes
+        this.HEARTBEAT_INTERVAL = 5 * 60 * 1e3;
+        this.isReconnecting = false;
         this.iframeUrl = config.iframeUrl;
         this.projectId = config.projectId;
         this.debug = config.debug || false;
@@ -2680,6 +2702,8 @@ var init_iframe_manager = __esm({
         await this.readyPromise;
         await this.authenticateSDK();
         await this.primeProviderSessions();
+        this.startHeartbeat();
+        this.setupVisibilityHandler();
         this.log("[IframeManager] \u2705 Iframe ready and authenticated");
       }
       /**
@@ -2689,18 +2713,93 @@ var init_iframe_manager = __esm({
         this.onWalletReadyCallback = callback;
       }
       /**
-       * Authenticate SDK with iframe to establish session
+       * Authenticate SDK with iframe to establish secure channel
        */
       async authenticateSDK() {
         const response = await this.sendMessage("SDK_AUTH", {
           projectId: this.projectId
         });
         if (response.type === "LUMIA_PASSPORT_SDK_AUTH_SUCCESS") {
-          this.sessionToken = response.sessionToken;
+          this.channelToken = response.sessionToken;
         } else {
-          throw new Error("SDK authentication failed");
+          throw new Error("SDK channel authentication failed");
         }
       }
+      /**
+       * Start periodic heartbeat to check SDK channel validity
+       */
+      startHeartbeat() {
+        if (this.heartbeatInterval) {
+          clearInterval(this.heartbeatInterval);
+        }
+        this.heartbeatInterval = setInterval(async () => {
+          if (!this.channelToken) return;
+          try {
+            const response = await this.sendMessage("SDK_CHANNEL_HEARTBEAT", {});
+            if (!response.valid) {
+              this.log("[IframeManager] SDK channel invalid, reconnecting...");
+              await this.reconnect();
+            }
+          } catch (error) {
+            this.log("[IframeManager] Heartbeat failed:", error);
+            await this.reconnect();
+          }
+        }, this.HEARTBEAT_INTERVAL);
+        this.log("[IframeManager] Heartbeat started (interval: 5 min)");
+      }
+      /**
+       * Stop heartbeat
+       */
+      stopHeartbeat() {
+        if (this.heartbeatInterval) {
+          clearInterval(this.heartbeatInterval);
+          this.heartbeatInterval = void 0;
+          this.log("[IframeManager] Heartbeat stopped");
+        }
+      }
+      /**
+       * Reconnect SDK channel after it becomes invalid
+       */
+      async reconnect() {
+        if (this.isReconnecting) {
+          this.log("[IframeManager] Already reconnecting, skipping...");
+          return;
+        }
+        this.isReconnecting = true;
+        this.log("[IframeManager] Reconnecting SDK channel...");
+        try {
+          this.channelToken = null;
+          await this.authenticateSDK();
+          this.log("[IframeManager] \u2705 SDK channel reconnected");
+        } catch (error) {
+          this.log("[IframeManager] \u274C Reconnect failed:", error);
+          throw error;
+        } finally {
+          this.isReconnecting = false;
+        }
+      }
+      /**
+       * Setup visibility change handler to check channel when tab becomes visible
+       */
+      setupVisibilityHandler() {
+        if (typeof document === "undefined") return;
+        document.addEventListener("visibilitychange", async () => {
+          if (document.visibilityState === "visible" && this.channelToken) {
+            this.log("[IframeManager] Tab visible, checking SDK channel...");
+            try {
+              const response = await this.sendMessage("SDK_CHANNEL_HEARTBEAT", {});
+              if (!response.valid) {
+                this.log("[IframeManager] SDK channel expired while tab was hidden");
+                await this.reconnect();
+              }
+            } catch (error) {
+              this.log("[IframeManager] Channel check failed, reconnecting...");
+              await this.reconnect();
+            }
+          }
+        });
+        this.log("[IframeManager] Visibility handler setup");
+      }
       /**
        * Handle incoming postMessage events
        */
@@ -2724,6 +2823,7 @@ var init_iframe_manager = __esm({
           "LUMIA_PASSPORT_TRUSTED_APP_REMOVED",
           "LUMIA_PASSPORT_REQUEST_NEW_TOKEN",
           "LUMIA_PASSPORT_TOKEN_REFRESHED",
+          "LUMIA_PASSPORT_HEARTBEAT_RESPONSE",
           "LUMIA_PASSPORT_RESPONSE",
           "LUMIA_PASSPORT_ERROR"
         ];
@@ -2852,10 +2952,11 @@ var init_iframe_manager = __esm({
           projectId: this.projectId,
           data: {
             ...data,
-            sessionToken: this.sessionToken
+            sessionToken: this.channelToken
+            // named sessionToken for backward compatibility with iframe
           }
         };
-        if (this.sessionToken) {
+        if (this.channelToken) {
           message.hmac = await this.computeHMAC(message);
         }
         const responsePromise = new Promise((resolve, reject) => {
@@ -2877,7 +2978,7 @@ var init_iframe_manager = __esm({
         return responsePromise;
       }
       /**
-       * Compute HMAC for message authentication
+       * Compute HMAC for message authentication using SDK channel token
        */
       async computeHMAC(message) {
         const encoder = new TextEncoder();
@@ -2889,7 +2990,7 @@ var init_iframe_manager = __esm({
           data: JSON.stringify(message.data)
         });
         const data = encoder.encode(payload);
-        const key = encoder.encode(this.sessionToken);
+        const key = encoder.encode(this.channelToken);
         const cryptoKey = await crypto.subtle.importKey("raw", key, { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
         const signature = await crypto.subtle.sign("HMAC", cryptoKey, data);
         return Array.from(new Uint8Array(signature)).map((b) => b.toString(16).padStart(2, "0")).join("");
@@ -3279,6 +3380,24 @@ var init_iframe_manager = __esm({
               });
             } else if (event.data.type === "X_AUTH_SUCCESS" && eventProvider === "x" && providerKey === "x") {
               this.log("[IframeManager] X auth successful from popup:", event.data);
+              if (event.data.tokens) {
+                this.log("[IframeManager] Tokens received in postMessage, storing via jwtTokenManager");
+                Promise.resolve().then(() => (init_auth(), auth_exports)).then(({ jwtTokenManager: jwtTokenManager4 }) => {
+                  return jwtTokenManager4.setTokens({
+                    accessToken: event.data.tokens.accessToken,
+                    refreshToken: event.data.tokens.refreshToken,
+                    userId: event.data.user.userId,
+                    expiresIn: event.data.user.expiresIn || 3600,
+                    hasKeyshare: event.data.user.hasKeyshare || false,
+                    displayName: event.data.user.displayName || null,
+                    providers: event.data.user.providers || ["x"]
+                  });
+                }).then(() => {
+                  this.log("[IframeManager] Tokens stored successfully");
+                }).catch((tokenError) => {
+                  this.log("[IframeManager] Warning: Failed to store tokens:", tokenError);
+                });
+              }
               finalize({
                 success: true,
                 user: event.data.user,
@@ -3634,6 +3753,7 @@ var init_iframe_manager = __esm({
        */
       destroy() {
         this.log("[IframeManager] Destroying iframe...");
+        this.stopHeartbeat();
         this.pendingRequests.forEach((pending) => {
           pending.reject(new Error("Iframe manager destroyed"));
         });
@@ -3647,7 +3767,7 @@ var init_iframe_manager = __esm({
         }
         this.iframe = null;
         this.isReady = false;
-        this.sessionToken = null;
+        this.channelToken = null;
         this.log("[IframeManager] \u2705 Destroyed");
       }
       /**
@@ -5570,7 +5690,7 @@ function Header() {
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.16.0",
+  version: "1.16.2",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",
@@ -9991,6 +10111,7 @@ var useManageWalletStore = (0, import_zustand5.create)((set) => ({
   emailCode: "",
   emailCodeExpiresIn: 0,
   linkIsLoading: false,
+  linkError: null,
   providerType: null,
   confirmUnlink: null,
   setAlert: (alert2) => set({ alert: alert2 }),
@@ -9999,6 +10120,7 @@ var useManageWalletStore = (0, import_zustand5.create)((set) => ({
   setEmailCode: (emailCode) => set({ emailCode }),
   setEmailCodeExpiresIn: (emailCodeExpiresIn) => set({ emailCodeExpiresIn }),
   setLinkIsLoading: (linkIsLoading) => set({ linkIsLoading }),
+  setLinkError: (linkError) => set({ linkError }),
   setProviderType: (providerType) => set({ providerType }),
   setConfirmUnlink: (confirmUnlink) => set({ confirmUnlink })
 }));