Build your own UI

You have full control with the connection hooks and functions to build your own UI. To use in-app wallets, you first choose a authentication strategy and then connect.

This will ensure that the wallet is available to all components in your app, handle connection states and auto-connection on page load.

import { ThirdwebProvider } from "thirdweb/react";
 
<ThirdwebProvider>
  <YourApp />
</ThirdwebProvider>;

The simplest way to create an in-app wallet is to use the inAppWallet() function. By default, this will create a wallet that supports email/password login, Google, Apple, Facebook login, and passkey.

import { inAppWallet } from "thirdweb/wallets";
 
const wallet = inAppWallet();

You can also customize the wallet by passing in options.

import { inAppWallet } from "thirdweb/wallets";
 
const wallet = inAppWallet({
  auth: {
    mode, // options are "popup" | "redirect" | "window";
    options, // ex: ["discord", "farcaster", "apple", "facebook", "google", "passkey"],
    passkeyDomain, // for passkey, the domain that the passkey is created on
    redirectUrl, // the URL to redirect to after authentication
  },
  metadata, // metadata for the wallet
  partnerId, // partner ID for the wallet
  smartAccount, // smart account options for the wallet
});

View all in-app wallet options.

Once created, you can connect to the wallet using the connect() function with the desired strategy.

Note that for Apple and Facebook, you just need to update the strategy to "facebook" or "apple".

In React and React Native, the useConnect() hook handles authentication and connection states.

import { inAppWallet } from "thirdweb/wallets";
import { useConnect } from "thirdweb/react";
 
const { connect } = useConnect();
 
const handleLogin = async () => {
	await connect(() => {
		const wallet = inAppWallet();
		await wallet.connect({
			client,
			strategy: "google",
		});
		return wallet;
	});
};

Other social options include Apple, Facebook, Discord, Farcaster and more.

import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
 
const { connect } = useConnect();
 
const preLogin = async (email: string) => {
	// send email verification code
	await preAuthenticate({
		client,
		strategy: "email",
		email, // ex: user@example.com
	});
};
 
const handleLogin = async (email: string, verificationCode: string) => {
	// verify email and connect
	await connect(() => {
		const wallet = inAppWallet();
		await wallet.connect({
			client,
			strategy: "email",
			email,
			verificationCode,
		});
		return wallet;
	});
};

import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
 
const { connect } = useConnect();
 
const preLogin = async (phonNumber: string) => {
	// send phone number verification code
	await preAuthenticate({
		client,
		strategy: "phone",
		phonNumber, // ex: +1234567890
	});
};
 
const handleLogin = async (phonNumber: string, verificationCode: string) => {
	// verify phone number and connect
	await connect(() => {
		const wallet = inAppWallet();
		await wallet.connect({
			client,
			strategy: "phone",
			phonNumber,
			verificationCode,
		});
		return wallet;
	});
};

import { inAppWallet, hasStoredPasskey } from "thirdweb/wallets/in-app";
 
const { connect } = useConnect();
 
const handleLogin = async () => {
	await connect(() => {
		const wallet = inAppWallet({
			auth: {
				passkeyDomain: "example.com", // defaults to current url
			},
		});
		const hasPasskey = await hasStoredPasskey(client);
		await wallet.connect({
			client,
			strategy: "passkey",
			type: hasPasskey ? "sign-in" : "sign-up",
		});
		return wallet;
	});
};