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

# Use Privy with MetaMask Smart Accounts

[Privy](https://docs.privy.io/welcome) provides an embedded wallet solution that enables seamless social sign-in for Web3 applications making user onboarding easier. MetaMask Smart Accounts is a signer-agnostic implementation that allows you to use Privy's [EOA](/smart-accounts-kit/development/reference/glossary#externally-owned-account-eoa)**Externally owned account (EOA)** A private-key-controlled account with no built-in programmable execution logic. wallet 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

- Install [Node.js](https://nodejs.org/en/download) v20 or later.
- Install [Yarn](https://yarnpkg.com/), [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
- Create a [Privy App ID](https://docs.privy.io/basics/get-started/dashboard/create-new-app#get-api-credentials).

## Steps

### 1. Install dependencies

Install the following dependencies:

**npm**

```bash
npm install @privy-io/react-auth @privy-io/wagmi @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

```

**Yarn**

```bash
yarn add @privy-io/react-auth @privy-io/wagmi @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

```

**pnpm**

```bash
pnpm add @privy-io/react-auth @privy-io/wagmi @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

```

**Bun**

```bash
bun add @privy-io/react-auth @privy-io/wagmi @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

```

### 2. Create the Privy provider

In this step, you'll configure the `PrivyProvider` component to provide the Privy's context to your application. You'll also use the Privy's `WagmiProvider` component to integrate Privy with Wagmi. This provider enables you to use Wagmi hooks with Privy.

Once you have created the `PrivyAppProvider`, you must wrap it at the root of your application so that the rest of your application has access to the Privy's context.

For an advanced configuration, see Privy's [configuring appearance](https://docs.privy.io/basics/get-started/dashboard/configuring-appearance) and [configuring login methods](https://docs.privy.io/basics/get-started/dashboard/configure-login-methods) guides.

**provider.ts**

```ts
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";
import { PrivyProvider } from '@privy-io/react-auth';
// Make sure to import `WagmiProvider` from `@privy-io/wagmi`, not `wagmi`
import { WagmiProvider } from '@privy-io/wagmi';
import { QueryClientProvider } from '@tanstack/react-query';
import { wagmiConfig, queryClient } from "./config.ts"

export function PrivyAppProvider({ children }: { children: ReactNode }) {
  return (
    <PrivyProvider appId="<YOUR_PRIVY_APP_ID>">
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          {children}
        </WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  );
}

```

**config.ts**

```ts
import { QueryClient } from '@tanstack/react-query'
import { createConfig, http } from 'wagmi'
import { sepolia } from 'viem/chains'

export const queryClient = new QueryClient()

export const wagmiConfig = createConfig({
  chains: [sepolia],
  ssr: true,
  transports: {
    [sepolia.id]: http(),
  },
})

```

### 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..

```ts
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 Privy 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 operation](/smart-accounts-kit/development/guides/smart-accounts/send-user-operation/).
- To sponsor gas for end users, see how to [send a gasless transaction](/smart-accounts-kit/development/guides/smart-accounts/send-gasless-transaction/).