The Quick-Start Guide to Embedded Wallets

⚠️ Warning: This guide currently uses v4 of the Connect SDK. For v5 (latest) code snippets, please check out our documentation while this guide is being updated. ⚠️

This guide will tell you everything you need to know about Embedded Wallet.

We'll cover the following:

1. What is Embedded Wallet?
2. Where to use it?
3. What do we provide out of the box?
4. How to use Embedded Wallet in your app?

Let's get started!

What is Embedded Wallet?

Embedded Wallet is a simple yet powerful wallet that enables apps to create, manage, and control their users' wallets. Embedded Wallets are designed to onboard users with little to no web3 familiarity. A user signs in with their email address or social account and is provided with a functional wallet that your application manages. Afterwards, they can purchase NFTs with credit cards, view and transfer NFTs, and send blockchain transactions.

When to use the Embedded Wallet?

You can use Embedded Wallet in apps where your target audience is normal web3 people, and you don't want the experience to feel very different. Users can use email/social login to create their wallets and even use them across devices without extra passwords! You can go above and beyond to combine embedded wallets with smart wallets, allowing users to send transactions.

What do we provide out of the box?

• Account Recovery: Users can always access their wallets on other authenticated devices.
• Modular, Composable & Customizable: Email login, social login, and bring-your-own auth.
• Enable Gasless Transactions: When you combine embedded wallets with smart wallets, users do not require crypto to interact with the blockchain.
• Security: No single point of failure. Private keys cannot be reconstructed by thirdweb or any developer without user authentication. The only owner of the wallet is the end user.
• Connect To Other Web3 Apps: Your application's embedded wallet users can use the My Wallets page to sign in to their wallet and connect to web3 apps via WalletConnect.
• View & Transfer NFTs: Buyers can visit the My Wallets page to view and transfer NFTs in their Embedded Wallets. We cover all gas fees related to transferring NFTs out of embedded wallets and offer a way for users to export their private keys.

How to use Embedded Wallet in your app?

Adding it to an existing application

Adding support for embedded wallets in your web3 apps is very simple! If you are already using thirdweb in your app, pass in embeddedWallet as a parameter in the supportedWallets prop with any other wallet you want your users to use in your app.

import { ThirdwebProvider, embeddedWallet } from "@thirdweb-dev/react";

export default function App() {
  return (
    <ThirdwebProvider
      activeChain="goerli"
      clientId="YOUR_CLIENT_ID"
      supportedWallets={[embeddedWallet()]}
    ></ThirdwebProvider>
  );
}

Make sure that you add your domain in the redirect URIs section of the Embedded Wallets section of your API key:

Adding Embedded wallet to a new app

If you don't already have an app, you can create an app already configured with thirdweb using thirdweb create:

npx thirdweb create --evm

You can use any frontend framework from the given options, but I am choosing Next.js for this guide.

Once the app is created, create a new .env.local file and add the client ID that you got after creating your thirdweb API key like this:

NEXT_PUBLIC_TEMPLATE_CLIENT_ID=CLIENT_ID_GOES_HERE

Finally, head over to _app.tsx and pass in the supportedWallets prop:

<ThirdwebProvider
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
      supportedWallets={[embeddedWallet()]}
      activeChain={activeChain}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>

If you try out the connect wallet button now, you'll be able to see sign-in with Google and sign-in with email options:

Once you sign in, you'll be able to see a new wallet created for you, and it's connected to the site:

You can now perform tasks from this wallet just like a normal one.

This was a simple implementation, but you can customize the modal, add smart wallet integrations, export private key, enable gassless transactions, etc. If you want more detailed guides on these, stay tuned!

Need help?

For support, join the official thirdweb Discord server or share your thoughts on our feedback board.