thirdwebDocs
GitHub

inAppWallet

Creates an app scoped wallet for users based on various authentication methods. Full list of available authentication methods here.

Can also be configured to use Account Abstraction to directly connect to a ERC4337 smart account based on those authentication methods.

Example

Login with socials

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet();
const account = await wallet.connect({
client,
chain,
strategy: "google",
});

View all available social auth methods

Enable smart accounts and sponsor gas for your users:

import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";
const wallet = inAppWallet({
smartAccount: {
chain: sepolia,
sponsorGas: true,
},
});
// account will be a smart account with sponsored gas enabled
const account = await wallet.connect({
client,
strategy: "google",
});

Login with email

import {
inAppWallet,
preAuthenticate,
} from "thirdweb/wallets/in-app";
const wallet = inAppWallet();
// sends a verification code to the provided email
await preAuthenticate({
client,
strategy: "email",
});
// login with the verification code
const account = await wallet.connect({
client,
chain,
strategy: "email",
verificationCode: "123456",
});

Login with SIWE

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 phone number

import {
inAppWallet,
preAuthenticate,
} from "thirdweb/wallets/in-app";
const wallet = inAppWallet();
// sends a verification code to the provided phone number
await preAuthenticate({
client,
strategy: "phone",
phoneNumber: "+1234567890",
});
// login with the verification code
const account = await wallet.connect({
client,
chain,
strategy: "phone",
honeNumber: "+1234567890",
verificationCode: "123456",
});

Login with passkey

import {
inAppWallet,
hasStoredPasskey,
} from "thirdweb/wallets/in-app";
const wallet = inAppWallet();
const wallet = inAppWallet();
const hasPasskey = await hasStoredPasskey(client);
await wallet.connect({
client,
strategy: "passkey",
type: hasPasskey ? "sign-in" : "sign-up",
});

Connect to a guest account

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet();
const account = await wallet.connect({
client,
strategy: "guest",
});

Connect to a backend account

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet();
const account = await wallet.connect({
client,
strategy: "backend",
walletSecret: "...", // Provided by your app
});

Connect with custom JWT (any OIDC provider)

You can use any OIDC provider to authenticate your users. Make sure to configure it in your dashboard under in-app wallet settings.

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet();
const account = await wallet.connect({
client,
strategy: "jwt",
jwt: "your_jwt_here",
});

Connect with custom endpoint

You can also use your own endpoint to authenticate your users. Make sure to configure it in your dashboard under in-app wallet settings.

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet();
const account = await wallet.connect({
client,
strategy: "auth_endpoint",
payload: "your_auth_payload_here",
});

Specify a logo for your login page (Connect UI)

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
metadata: {
image: {
src: "https://example.com/logo.png",
alt: "My logo",
width: 100,
height: 100,
},
},
});

Hide the ability to export the private key within the Connect Modal UI

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
hidePrivateKeyExport: true,
});

Open the Oauth window in the same tab

By default, the Oauth window will open in a popup window. You can change this behavior by setting the auth.mode option to "redirect".

import { inAppWallet } from "thirdweb/wallets";
const wallet = inAppWallet({
auth: {
mode: "redirect",
},
});

Override storage for the wallet state

By default, wallet state is stored in the browser's local storage. You can override this behavior by providing a custom storage object, useful for server side integrations.

import { inAppWallet } from "thirdweb/wallets";
import { AsyncStorage } from "thirdweb/storage";
const myStorage: AsyncStorage = {
getItem: async (key) => {
return customGet(`CUSTOM_STORAGE_KEY${key}`);
},
setItem: async (key, value) => {
return customSet(`CUSTOM_STORAGE_KEY${key}`, value);
},
removeItem: async (key) => {
return customRemove(`CUSTOM_STORAGE_KEY${key}`);
},
};
const wallet = inAppWallet({
storage: myStorage,
});
function inAppWallet(
createOptions?: InAppWalletCreationOptions,
): Wallet<"inApp">;

Parameters

configuration options Refer to InAppWalletCreationOptions to see the available options.

Type

let createOptions:
| {
auth?: {
defaultSmsCountryCode?: SupportedSmsCountry;
mode?: "popup" | "redirect" | "window";
options: Array<InAppWalletAuth>;
passkeyDomain?: string;
redirectUrl?: string;
};
hidePrivateKeyExport?: boolean;
metadata?: {
icon?: string;
image?: {
alt?: string;
height?: number;
src: string;
width?: number;
};
name?: string;
};
partnerId?: string;
smartAccount?: SmartWalletOptions;
storage?: AsyncStorage;
}
| undefined;

Returns

let returnType: Wallet<"inApp">;

The created in-app wallet.