Winston/tool 3161 cannot create backend wallets using latest version (#6025)

Author: ElasticBottle

.changeset/two-trees-tease.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+fix (in app wallets): error when calling connect for backend strategy due to `document` reference

packages/thirdweb/src/wallets/in-app/core/authentication/backend.ts

@@ -30,7 +30,9 @@ export async function backendAuthenticate(args: {
     }),
   });
 
-  if (!res.ok) throw new Error("Failed to generate backend account");
+  if (!res.ok) {
+    throw new Error("Failed to generate backend account");
+  }
 
   return (await res.json()) satisfies AuthStoredTokenWithCookieReturnType;
 }

packages/thirdweb/src/wallets/in-app/web/lib/auth/iframe-auth.ts

@@ -107,7 +107,10 @@ export class Auth {
     authToken: AuthStoredTokenWithCookieReturnType,
     recoveryCode?: string,
   ): Promise<AuthLoginReturnType> {
-    await this.preLogin();
+    // We don't call logout for backend auth because that is handled on the backend where the iframe isn't available to call. Moreover, logout clears the local storage which isn't applicable for backend auth.
+    if (authToken.storedToken.authProvider !== "Backend") {
+      await this.preLogin();
+    }
 
     const user = await getUserStatus({
       authToken: authToken.storedToken.cookieString,

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

@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { IframeCommunicator } from "./IframeCommunicator.js";
+
+describe("IframeCommunicator", () => {
+  // biome-ignore lint/suspicious/noExplicitAny: mock
+  let mockLocalStorage: any;
+  let mockContainer: HTMLElement;
+  let mockIframe: HTMLIFrameElement;
+
+  beforeEach(() => {
+    // Mock localStorage
+    vi.restoreAllMocks();
+
+    mockLocalStorage = {
+      getAuthCookie: vi.fn().mockResolvedValue("mockAuthCookie"),
+      getDeviceShare: vi.fn().mockResolvedValue("mockDeviceShare"),
+      getWalletUserId: vi.fn().mockResolvedValue("mockWalletUserId"),
+    };
+    // Mock DOM elements
+    mockContainer = document.createElement("div");
+    mockIframe = document.createElement("iframe");
+    vi.spyOn(document, "createElement").mockReturnValue(mockIframe);
+    vi.spyOn(document, "getElementById").mockReturnValue(null);
+  });
+
+  it("should create an iframe with correct properties", () => {
+    new IframeCommunicator({
+      link: "https://example.com",
+      baseUrl: "https://example.com",
+      iframeId: "test-iframe",
+      container: mockContainer,
+      localStorage: mockLocalStorage,
+      clientId: "test-client",
+    });
+
+    expect(document.createElement).toHaveBeenCalledWith("iframe");
+    expect(mockIframe.id).toBe("test-iframe");
+    expect(mockIframe.src).toBe("https://example.com/");
+    expect(mockIframe.style.display).toBe("none");
+  });
+
+  it("should initialize with correct variables", async () => {
+    const communicator = new IframeCommunicator({
+      link: "https://example.com",
+      baseUrl: "https://example.com",
+      iframeId: "test-iframe",
+      container: mockContainer,
+      localStorage: mockLocalStorage,
+      clientId: "test-client",
+    });
+
+    // biome-ignore lint/complexity/useLiteralKeys: accessing protected method
+    const vars = await communicator["onIframeLoadedInitVariables"]();
+
+    expect(vars).toEqual({
+      authCookie: "mockAuthCookie",
+      deviceShareStored: "mockDeviceShare",
+      walletUserId: "mockWalletUserId",
+      clientId: "test-client",
+      partnerId: undefined,
+      ecosystemId: undefined,
+    });
+  });
+
+  it("should throw error when calling methods without iframe", async () => {
+    const temp = global.document;
+    // @ts-expect-error - Testing undefined document scenario
+    global.document = undefined;
+
+    const communicator = new IframeCommunicator({
+      link: "https://example.com",
+      baseUrl: "https://example.com",
+      iframeId: "test-iframe",
+      localStorage: mockLocalStorage,
+      clientId: "test-client",
+    });
+
+    await expect(
+      communicator.call({
+        procedureName: "test",
+        params: {},
+      }),
+    ).rejects.toThrow("Iframe not found");
+    global.document = temp;
+  });
+
+  it("should cleanup on destroy", () => {
+    const communicator = new IframeCommunicator({
+      link: "https://example.com",
+      baseUrl: "https://example.com",
+      iframeId: "test-iframe",
+      container: mockContainer,
+      localStorage: mockLocalStorage,
+      clientId: "test-client",
+    });
+
+    communicator.destroy();
+
+    // biome-ignore lint/complexity/useLiteralKeys: accessing protected field
+    expect(communicator["iframe"]).toBeDefined();
+  });
+});

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

@@ -35,7 +35,7 @@ const isIframeLoaded = new Map<string, boolean>();
  */
 // biome-ignore lint/suspicious/noExplicitAny: TODO: fix later
 export class IframeCommunicator<T extends { [key: string]: any }> {
-  private iframe: HTMLIFrameElement;
+  private iframe?: HTMLIFrameElement;
   private POLLING_INTERVAL_SECONDS = 1.4;
   private iframeBaseUrl;
   protected localStorage: ClientScopedStorage;
@@ -49,7 +49,7 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     link,
     baseUrl,
     iframeId,
-    container = document.body,
+    container,
     onIframeInitialize,
     localStorage,
     clientId,
@@ -60,6 +60,10 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     this.ecosystem = ecosystem;
     this.iframeBaseUrl = baseUrl;
 
+    if (typeof document === "undefined") {
+      return;
+    }
+    container = container ?? document.body;
     // Creating the IFrame element for communication
     let iframe = document.getElementById(iframeId) as HTMLIFrameElement | null;
     const hrefLink = new URL(link);
@@ -164,6 +168,11 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     params: T[keyof T];
     showIframe?: boolean;
   }) {
+    if (!this.iframe) {
+      throw new Error(
+        "Iframe not found. You are likely calling this from the backend where the DOM is not available.",
+      );
+    }
     while (!isIframeLoaded.get(this.iframe.src)) {
       await sleep(this.POLLING_INTERVAL_SECONDS * 1000);
     }
@@ -182,7 +191,9 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
         if (showIframe) {
           // magic number to let modal fade out before hiding it
           await sleep(0.1 * 1000);
-          this.iframe.style.display = "none";
+          if (this.iframe) {
+            this.iframe.style.display = "none";
+          }
         }
         if (!data.success) {
           rej(new Error(data.error));
@@ -213,6 +224,8 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
    * @internal
    */
   destroy() {
-    isIframeLoaded.delete(this.iframe.src);
+    if (this.iframe) {
+      isIframeLoaded.delete(this.iframe.src);
+    }
   }
 }

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

@@ -32,7 +32,7 @@ export class InAppWalletIframeCommunicator<
         baseUrl,
       }).href,
       baseUrl,
-      container: document.body,
+      container: typeof document === "undefined" ? undefined : document.body,
       localStorage: new ClientScopedStorage({
         storage: webLocalStorage,
         clientId,