Build the Best Web3 Onboarding with In-App Wallets and Account Abstraction

Sean Watase

Oct 10, 2024 • 4 min read

In this tutorial, we'll walk through the process of building the best onboarding experience with In-App Wallets and Account Abstraction. With these two options we can create an onboarding experience that removes many of the web3 complexities to help onboard users to web3 apps.

To see the full video tutorial, check it out here: How to Build a DAO Dapp with thirdweb

Claim 12 months of FREE in-app wallets. Use code "FREEWALLETS"

Step 1: Set Up Project with thirdweb

First, let's set up a new Next.js project using thirdweb's CLI:

Open your terminal and run the following command:

npx thirdweb create app

Select Next.js for the framework
Open you project and navigate to the .env file and add you thirdweb API key
1. To get a thirdweb API key head over to the thirdweb dashboard and navigate to the "Settings" tab. For more information on API keys follow this guide here

Step 2: Add a Connect Wallet Button with In-App Wallets

Now that we have our project setup and configured we can add a connect wallet button to allow users to connect to our app via In-App Wallets. We can do this easily by implementing thirdweb's ConnectButton UI Component.

thirdweb React SDK

A type-safe library to interact with any EVM-compatible blockchain in React applications.

In the page.tsx file remove the template code and add the ConnectButton UI component from thirdweb

<ConnectButton
  client={client}
/>

By default the ConnectButton component has In-App Wallet options. But we can configure this to show only In-App Wallet options if you choose.

<ConnectButton
  client={client}
  wallets={[
    inAppWallet()
  ]}
/>

Configure the exact In-App Wallet options with the auth prop. Here you can specify what options you want available for your users.

<ConnectButton
  client={client}
  wallets={[
    inAppWallet({
      auth: {
        options: {[
          "google",
          "email",
          "passkey"
        ]}
      }
    })
  ]}
/>

Here is a list of the current auth options available. You can also create your own custom auth option if on thirdweb's Growth Plan.

Email
Phone
Passkey
Guest
Google
Apple
Facebook
Discord
Coinbase
Telegram
LINE
X
Farcaster

Learn more about In-App Wallets:

Just like that we can now create and connect wallets for our users using familiar auth methods through In-App Wallets. But, even with In-App Wallets a user still needs funds in order to pay for gas to interact with the blockchain. We have a couple ways to support users here through thirdweb Pay or Account Abstraction and thirdweb's Smart Wallets.

Step 2: Add Account Abstraction with Smart Wallets

To create an even more seamless user experience we can combine In-App Wallets with Smart Wallets (Account Abstraction) and enable features like sponsored gas through something like a paymaster. This gives the developer the ability to pay and sponsor the gas on behalf of the user. We ConnectButton we can implement this in just a few lines of code.

We can configure our existing ConnectButton and add the accountAbstraction prop.

<ConnectButton
  client={client}
  wallets={[
    inAppWallet({
      auth: {
        options: {[
          "google",
          "email",
          "passkey"
        ]}
      }
    })
  ]}
  accountAbstraction: {{
    chain: <your_chain>
    sponsorGas: true,
  }}
/>

By default this will use a global Account Factory for deploying your Smart Wallets: 0x4be0ddfebca9a5a4a617dee4dece99e7c862dceb
You can deploy your own Account Factory contract as well and override is with factoryAddress

And with just a few lines of code we now have a connect option where a user can authenticate with a familiar method and be generated a wallet which is then used for a Smart Wallet with gas sponsorship enabled. This mean a user never has to interact with web3 UI or UX and still gets all the functionality and features (plus more with account abstraction) as a web3 wallet.

Claim 12 months of FREE in-app wallets. Use code "FREEWALLETS"

Conclusion

Congratulations on completing the guide on building the best onboarding experience with thirdweb's In-App Wallet and Smart Wallets. You can now create an onboarding flow where users can authenticate with familiar methods like social logins, email, passkeys, etc and be generated a Smart Wallet. Even have the ability to sponsor gas for your users through a paymaster with Account Abstraction.

In this tutorial, we learned how to:

Create and configure a new project with the thirdweb SDK
Add a connect wallet button with the ConnectButton UI component
Configure In-App Wallets with the ConnectButton
Configure Smart Wallets with the ConnectButton

Happy building with thirdweb!