Default to in-memory storage for inAppWallet outside browser

Author: joaquim-verges

.changeset/thin-rockets-walk.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Default to in-memory storage when creating inapp wallets outside the browser

packages/thirdweb/src/wallets/in-app/web/in-app.ts

@@ -1,4 +1,7 @@
 import type { ThirdwebClient } from "../../../client/client.js";
+import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
+import { inMemoryStorage } from "../../../utils/storage/inMemoryStorage.js";
+import { webLocalStorage } from "../../../utils/storage/webStorage.js";
 import type { Wallet } from "../../interfaces/wallet.js";
 import { createInAppWallet } from "../core/wallet/in-app-core.js";
 import type { InAppWalletCreationOptions } from "../core/wallet/types.js";
@@ -23,23 +26,29 @@ import type { InAppWalletCreationOptions } from "../core/wallet/types.js";
  * const account = await wallet.connect({
  *   client,
  *   chain,
- *   strategy: "google",
+ *   strategy: "google", // or "apple", "facebook","discord", "github", "twitch", "x", "telegram", "line", "coinbase", etc
  * });
  * ```
  *
  * [View all available social auth methods](https://portal.thirdweb.com/connect/wallet/sign-in-methods/configure)
  *
  * ### Enable smart accounts and sponsor gas for your users:
  *
+ * With the `executionMode` option, you can enable smart accounts and sponsor gas for your users.
+ *
+ * **Using EIP-7702** (recommended):
+ *
+ * On chains with EIP-7702 enabled, you can upgrade the inapp wallet to a smart account, keeping the same address and performance as the regular EOA.
+ *
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
  * import { sepolia } from "thirdweb/chains";
  *
  * const wallet = inAppWallet({
- *  smartAccount: {
- *   chain: sepolia,
+ *  executionMode: {
+ *   mode: "EIP7702",
  *   sponsorGas: true,
- * },
+ *  },
  * });
  *
  * // account will be a smart account with sponsored gas enabled
@@ -49,8 +58,28 @@ import type { InAppWalletCreationOptions } from "../core/wallet/types.js";
  * });
  * ```
  *
+ * **Using EIP-4337**:
+ *
+ * On chains without EIP-7702 enabled, you can still use smart accounts using EIP-4337, this will return a different address (the smart contract address) than the regular EOA.
+ *
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets/in-app";
+ *
+ * const wallet = inAppWallet({
+ *  executionMode: {
+ *   mode: "EIP4337",
+ *   smartAccount: {
+ *    chain: sepolia, // chain required for EIP-4337
+ *    sponsorGas: true,
+ *   }
+ *  },
+ * });
+ * ```
+ *
  * ### Login with email
  *
+ * To login with email, you can use the `preAuthenticate` function to first send a verification code to the user's email, then login with the verification code.
+ *
  * ```ts
  * import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
  *
@@ -73,22 +102,10 @@ import type { InAppWalletCreationOptions } from "../core/wallet/types.js";
  * });
  * ```
  *
- * ### Login with SIWE
- * ```ts
- * import { inAppWallet, createWallet } from "thirdweb/wallets";
+ * ### Login with phone number
  *
- * const rabby = createWallet("io.rabby");
- * const inAppWallet = inAppWallet();
+ * Similar to email, you can login with a phone number by first sending a verification code to the user's phone number, then login with the verification code.
  *
- * const account = await inAppWallet.connect({
- *    strategy: "wallet",
- *    chain: mainnet,
- *    wallet: rabby,
- *    client: MY_CLIENT
- * });
- * ```
- *
- * ### Login with phone number
  * ```ts
  * import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
  *
@@ -111,8 +128,28 @@ import type { InAppWalletCreationOptions } from "../core/wallet/types.js";
  * });
  * ```
  *
+ * ### Login with another wallet (SIWE)
+ *
+ * You can also login to the in-app wallet with another existing wallet by signing a standard Sign in with Ethereum (SIWE) message.
+ *
+ * ```ts
+ * import { inAppWallet, createWallet } from "thirdweb/wallets";
+ *
+ * const rabby = createWallet("io.rabby");
+ * const inAppWallet = inAppWallet();
+ *
+ * const account = await inAppWallet.connect({
+ *    strategy: "wallet",
+ *    chain: mainnet,
+ *    wallet: rabby,
+ *    client: MY_CLIENT
+ * });
+ * ```
+ *
  * ### Login with passkey
  *
+ * You can also login with a passkey. This mode requires specifying whether it should create a new passkey, or sign in with an existing passkey. We recommend checking if the user has a passkey stored in their browser to automatically login with it.
+ *
  * ```ts
  * import { inAppWallet, hasStoredPasskey } from "thirdweb/wallets/in-app";
  *
@@ -128,6 +165,11 @@ import type { InAppWalletCreationOptions } from "../core/wallet/types.js";
  * ```
  *
  * ### Connect to a guest account
+ *
+ * You can also connect to a guest account, this will create a new account for the user instantly and store it in the browser's local storage.
+ *
+ * You can later "upgrade" this account by linking another auth method, like email or phone for example. This will preserve the account's address and history.
+ *
  * ```ts
  * import { inAppWallet } from "thirdweb/wallets";
  *
@@ -264,8 +306,16 @@ export function inAppWallet(
       return new InAppWebConnector({
         client,
         passkeyDomain: createOptions?.auth?.passkeyDomain,
-        storage: createOptions?.storage,
+        storage: createOptions?.storage ?? getDefaultStorage(),
       });
     },
   }) as Wallet<"inApp">;
 }
+
+function getDefaultStorage(): AsyncStorage {
+  if (typeof window !== "undefined" && window.localStorage) {
+    return webLocalStorage;
+  }
+  // default to in-memory storage if we're not in the browser
+  return inMemoryStorage;
+}

packages/thirdweb/src/wallets/in-app/web/lib/in-app-backend.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { sepolia } from "../../../../chains/chain-definitions/sepolia.js";
-import { inMemoryStorage } from "../../../../utils/storage/inMemoryStorage.js";
 import { inAppWallet } from "../in-app.js";
 
 describe("InAppWallet", () => {
@@ -11,7 +10,6 @@ describe("InAppWallet", () => {
         chain: sepolia,
         sponsorGas: true,
       },
-      storage: inMemoryStorage,
     });
     const account = await wallet.connect({
       client: TEST_CLIENT,

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

@@ -86,7 +86,7 @@ export class InAppWebConnector implements InAppConnector {
     this.ecosystem = ecosystem;
     this.passkeyDomain = passkeyDomain;
     this.storage = new ClientScopedStorage({
-      storage: storage ?? webLocalStorage,
+      storage,
       clientId: client.clientId,
       ecosystem: ecosystem,
     });

packages/thirdweb/src/wallets/in-app/web/types.ts

@@ -33,7 +33,7 @@ export type InAppWalletConstructorType = ClientIdConstructorType & {
   /**
    * The storage to use for storing wallet state
    */
-  storage?: AsyncStorage;
+  storage: AsyncStorage;
 };
 
 export type ClientIdWithQuerierType = ClientIdConstructorType & {