Use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts

MetaMask Embedded Wallets (Web3Auth) provides a pluggable embedded wallet infrastructure to simplify Web3 wallet integration and user onboarding. It supports social logins allowing users to access Web3 applications through familiar authentication methods in under a minute.

MetaMask Smart Accounts is a signer agnostic implementation that allows you to use Embedded Wallets as a signer for MetaMask Smart Accounts.

info

This guide is targeted towards React and React-based frameworks.

Prerequisites

• Install Node.js v18 or later
• Install Yarn, npm, or another package manager
• An Embedded Wallets Client ID

Steps

1. Install dependencies

Install the Smart Accounts Kit and other dependencies in your project:

• npm
• Yarn
• pnpm
• Bun

npm install @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-query viem

yarn add @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-query viem

pnpm add @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-query viem

bun add @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-query viem

2. Create the Web3Auth provider

Configure the Web3AuthProvider component to provide the Embedded Wallets context to your application. You'll also use the WagmiProvider to integrate Embedded Wallets with Wagmi. This provider enables you to use Wagmi hooks with Embedded Wallets.

Once you've created the Web3AuthAppProvider, wrap it at the root of your application so that the rest of your application has access to the Embedded Wallets context.

For the advance configuration, see Embedded Wallets guide.

• provider.ts
• config.ts

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";
import { Web3AuthProvider } from "@web3auth/modal/react";
// Make sure to import `WagmiProvider` from `@web3auth/modal/react/wagmi`, not `wagmi`
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
import { web3authConfig } from "./config.ts";

const queryClient = new QueryClient();

export function Web3AuthAppProvider({ children }: { children: ReactNode }) {
  return (
    <Web3AuthProvider config={web3authConfig}>
      <QueryClientProvider client={queryClient}>
        <WagmiProvider>{children}</WagmiProvider>
      </QueryClientProvider>
    </Web3AuthProvider>
  );
}

import { Web3AuthOptions } from "@web3auth/modal";

const web3AuthOptions: Web3AuthOptions = {
  clientId: "<YOUR_WEB3AUTH_CLIENT_ID>",
  web3AuthNetwork: "<YOUR_WEB3AUTH_NETWORK>",
};

export const web3authConfig = {
  web3AuthOptions,
};

3. Create a smart account

Once the user has connected their wallet, use the Wallet Client from Wagmi as the signer to create a MetaMask smart account.

import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit";
import { useAccount, usePublicClient, useWalletClient } from "wagmi";

const { address } = useAccount();
const publicClient = usePublicClient();
const { data: walletClient } = useWalletClient();

// Additional check to make sure the Embedded Wallets is connected
// and values are available.
if (!address || !walletClient || !publicClient ) {
  // Handle the error case
 }

const smartAccount = await toMetaMaskSmartAccount({
  client: publicClient,
  implementation: Implementation.Hybrid,
  deployParams: [address, [], [], []],
  deploySalt: "0x",
  signer: { walletClient },
});

Next steps

• See how to send a user operations.
• To sponsor gas for end users, see how to send a gasless transaction.