Fix: Pass iframe data on every call (#5053)

## Problem solved

This removes any assumptions of the iframe's local storage persistence.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the flaky authentication state in Progressive Web Apps (PWAs) by enhancing the `InAppWalletIframeCommunicator` and `IframeCommunicator` classes to properly manage local storage and client information.

### Detailed summary
- Added `localStorage`, `clientId`, and `ecosystem` as parameters to `IFrameCommunicatorProps`.
- Modified the constructor of `IframeCommunicator` to accept and assign `localStorage`, `clientId`, and `ecosystem`.
- Updated `onIframeLoadedInitVariables` to retrieve authentication data from `localStorage`.
- Enhanced message posting to include initialization data with every request to handle storage resets.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

.changeset/tricky-lamps-cheer.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix flaky auth state in PWAs

packages/thirdweb/src/wallets/in-app/web/utils/iFrameCommunication/IframeCommunicator.ts

@@ -1,11 +1,16 @@
 import { sleep } from "../../../../../utils/sleep.js";
+import type { ClientScopedStorage } from "../../../../../wallets/in-app/core/authentication/client-scoped-storage.js";
+import type { Ecosystem } from "../../../../../wallets/in-app/core/wallet/types.js";
 
 type IFrameCommunicatorProps = {
   link: string;
   baseUrl: string;
   iframeId: string;
   container?: HTMLElement;
   onIframeInitialize?: () => void;
+  localStorage: ClientScopedStorage;
+  clientId: string;
+  ecosystem?: Ecosystem;
 };
 
 const iframeBaseStyle = {
@@ -32,8 +37,11 @@ const isIframeLoaded = new Map<string, boolean>();
 export class IframeCommunicator<T extends { [key: string]: any }> {
   private iframe: HTMLIFrameElement;
   private POLLING_INTERVAL_SECONDS = 1.4;
-
   private iframeBaseUrl;
+  protected localStorage: ClientScopedStorage;
+  protected clientId: string;
+  protected ecosystem?: Ecosystem;
+
   /**
    * @internal
    */
@@ -43,7 +51,13 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     iframeId,
     container = document.body,
     onIframeInitialize,
+    localStorage,
+    clientId,
+    ecosystem,
   }: IFrameCommunicatorProps) {
+    this.localStorage = localStorage;
+    this.clientId = clientId;
+    this.ecosystem = ecosystem;
     this.iframeBaseUrl = baseUrl;
 
     // Creating the IFrame element for communication
@@ -89,7 +103,14 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
 
   // biome-ignore lint/suspicious/noExplicitAny: TODO: fix later
   protected async onIframeLoadedInitVariables(): Promise<Record<string, any>> {
-    return {};
+    return {
+      authCookie: await this.localStorage.getAuthCookie(),
+      deviceShareStored: await this.localStorage.getDeviceShare(),
+      walletUserId: await this.localStorage.getWalletUserId(),
+      clientId: this.clientId,
+      partnerId: this.ecosystem?.partnerId,
+      ecosystemId: this.ecosystem?.id,
+    };
   }
 
   /**
@@ -118,13 +139,9 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
         };
       });
 
-      const INIT_IFRAME_EVENT = "initIframe";
       iframe?.contentWindow?.postMessage(
-        // ? We initialise the iframe with a bunch
-        // of useful information so that we don't have to pass it
-        // through in each of the future call. This would be where we do it.
         {
-          eventType: INIT_IFRAME_EVENT,
+          eventType: "initIframe",
           data: await this.onIframeLoadedInitVariables(),
         },
         this.iframeBaseUrl,
@@ -176,7 +193,14 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     });
 
     this.iframe.contentWindow?.postMessage(
-      { eventType: procedureName, data: params },
+      {
+        eventType: procedureName,
+        // Pass the initialization data on every request in case the iframe storage was reset (can happen in some environments such as iOS PWAs)
+        data: {
+          ...params,
+          ...(await this.onIframeLoadedInitVariables()),
+        },
+      },
       this.iframeBaseUrl,
       [channel.port2],
     );

packages/thirdweb/src/wallets/in-app/web/utils/iFrameCommunication/InAppWalletIframeCommunicator.ts

@@ -11,8 +11,6 @@ export class InAppWalletIframeCommunicator<
   // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any
   T extends { [key: string]: any },
 > extends IframeCommunicator<T> {
-  clientId: string;
-  ecosystem?: Ecosystem;
   /**
    * @internal
    */
@@ -35,30 +33,17 @@ export class InAppWalletIframeCommunicator<
       }).href,
       baseUrl,
       container: document.body,
+      localStorage: new ClientScopedStorage({
+        storage: webLocalStorage,
+        clientId,
+        ecosystem,
+      }),
+      clientId,
+      ecosystem,
     });
     this.clientId = clientId;
     this.ecosystem = ecosystem;
   }
-
-  /**
-   * @internal
-   */
-  override async onIframeLoadedInitVariables() {
-    const localStorage = new ClientScopedStorage({
-      storage: webLocalStorage,
-      clientId: this.clientId,
-      ecosystem: this.ecosystem,
-    });
-
-    return {
-      authCookie: await localStorage.getAuthCookie(),
-      deviceShareStored: await localStorage.getDeviceShare(),
-      walletUserId: await localStorage.getWalletUserId(),
-      clientId: this.clientId,
-      partnerId: this.ecosystem?.partnerId,
-      ecosystemId: this.ecosystem?.id,
-    };
-  }
 }
 
 // This is the URL and ID tag of the iFrame that we communicate with