> For the complete documentation index, see [llms.txt](/llms.txt).

# Use MetaMask Embedded Wallets with MetaMask Smart Accounts

[MetaMask Embedded Wallets (Web3Auth)](/embedded-wallets/) provides a pluggable embedded wallet infrastructure to simplify Web3 wallet integration and user onboarding. It supports social sign-ins 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 [smart accounts](/smart-accounts-kit/development/reference/glossary#metamask-smart-account)**MetaMask smart account** A smart contract account created using the Smart Accounts Kit that supports programmable behavior, flexible signing options, and ERC-7710 delegations..

info

This guide supports React and React-based frameworks.

## Prerequisites[​](#prerequisites "Direct link to Prerequisites")

- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
- Install [Yarn](https://yarnpkg.com/), [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
- Create an [Embedded Wallets Client ID](/embedded-wallets/dashboard/).

## Steps[​](#steps "Direct link to Steps")

### 1\. Install dependencies[​](#1-install-dependencies "Direct link to 1. Install dependencies")

Install the [Smart Accounts Kit](https://www.npmjs.com/package/@metamask/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[​](#2-create-the-web3auth-provider "Direct link to 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 the rest of your application has access to the Embedded Wallets context.

For an advanced configuration, see the [Embedded Wallets guide](/embedded-wallets/sdk/react/advanced/).

- 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[​](#3-create-a-smart-account "Direct link to 3. Create a smart account")

Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a [MetaMask smart account](/smart-accounts-kit/development/reference/glossary#metamask-smart-account)**MetaMask smart account** A smart contract account created using the Smart Accounts Kit that supports programmable behavior, flexible signing options, and ERC-7710 delegations..

```
import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'
import { useConnection, usePublicClient, useWalletClient } from 'wagmi'

const { address } = useConnection()
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[​](#next-steps "Direct link to Next steps")

- See how to [send a user operations](/smart-accounts-kit/guides/smart-accounts/send-user-operation/).
- To sponsor gas for end users, see how to [send a gasless transaction](/smart-accounts-kit/guides/smart-accounts/send-gasless-transaction/).