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

Heads up

You've landed on a guide that still uses the MetaMask legacy SDK (`@metamask/sdk`). The MetaMask Connect integration for this library is coming soon. Once ready, it will be linked from the sidebar navigation. In the meantime, this guide is still valid if you're using MetaMask SDK.

# Connect to MetaMask using Embedded Wallets SDK

Get started with MetaMask SDK and [Embedded Wallets SDK (previously Web3Auth)](/embedded-wallets/), enabling users to sign in with an email or social media account. Use MetaMask SDK features directly within Embedded Wallets SDK. [Download the quickstart template](#set-up-using-a-template) or [manually set up the SDKs](#set-up-manually) in an existing dapp.

[![MetaMask Connect EVM with Web3Auth embedded wallet sign-in interface](/assets/images/quickstart-web3auth-788c0dd981fae3e12e2879a519aa88b2.png)](https://metamask-web3auth-demo.vercel.app/)

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

- [Node.js](https://nodejs.org/) version 19 or later installed.
- A package manager installed, such as [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/installation), or [bun](https://bun.sh/).
- [MetaMask](https://metamask.io/) installed in your browser or on mobile.
- A [Web3Auth Client ID](/embedded-wallets/dashboard/#get-the-client-id).

## Set up using a template[​](#set-up-using-a-template "Direct link to Set up using a template")

1. Download the [MetaMask SDK + Web3Auth SDK template](https://github.com/MetaMask/metamask-sdk-examples/tree/main/partners/web3auth):  
```  
npx degit MetaMask/metamask-sdk-examples/partners/web3auth metamask-web3auth  
```
2. Navigate into the repository:  
```  
cd metamask-web3auth  
```  
<details>  
<summary>Degit vs. Git clone</summary>  
`degit` is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.  
Alternatively, use `git clone` to download the entire repository. Clone the MetaMask SDK examples repository and navigate into the `partners/web3auth` directory:  
```  
git clone https://github.com/MetaMask/metamask-sdk-examples  
cd metamask-sdk-examples/partners/web3auth  
```  
</details>
3. Install dependencies:  
```  
pnpm install  
```
4. Create a `.env.local` file:  
```  
touch .env.local  
```
5. In `.env.local`, add a `NEXT_PUBLIC_WEB3AUTH_CLIENT_ID` environment variable, replacing `<YOUR-CLIENT-ID>` with your Web3Auth Client ID:  
.env.local  
```  
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=<YOUR-CLIENT-ID>  
```
6. Run the project:  
```  
pnpm dev  
```

You've successfully set up MetaMask SDK and MetaMask Embedded Wallets. See how to [use Embedded Wallets](#usage).

## Set up manually[​](#set-up-manually "Direct link to Set up manually")

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

Install the SDK and the required dependencies to an existing project:

- npm
- Yarn
- pnpm
- Bun

```
npm install viem wagmi @tanstack/react-query @web3auth/modal

```

```
yarn add viem wagmi @tanstack/react-query @web3auth/modal

```

```
pnpm add viem wagmi @tanstack/react-query @web3auth/modal

```

```
bun add viem wagmi @tanstack/react-query @web3auth/modal

```

### 2. Configure providers[​](#2-configure-providers "Direct link to 2. Configure providers")

Set up your providers in `app/providers.tsx`:

providers.tsx

```
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type ReactNode, useState } from "react";
import { Web3AuthProvider } from "@web3auth/modal/react";
import { WagmiProvider } from "@web3auth/modal/react/wagmi";

type Props = {
  children: ReactNode;
};

export function Providers({ children }: Props) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <Web3AuthProvider
      config={{
        web3AuthOptions: {
          clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID!,
          web3AuthNetwork: "sapphire_devnet"
        },
      }}
    >
      <QueryClientProvider client={queryClient}>
        <WagmiProvider>
          <div className="container">{children}</div>
        </WagmiProvider>
      </QueryClientProvider>
    </Web3AuthProvider>
  );
}

```

### 3. Set up environment variables[​](#3-set-up-environment-variables "Direct link to 3. Set up environment variables")

Create a `.env.local` file. In `.env.local`, add a `NEXT_PUBLIC_WEB3AUTH_CLIENT_ID` environment variable, replacing `<YOUR-CLIENT-ID>` with your Web3Auth Client ID:

.env.local

```
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=<YOUR-CLIENT-ID>

```

Test your dapp by running `pnpm run dev`.

## Usage[​](#usage "Direct link to Usage")

### Connect or sign in[​](#connect-or-sign-in "Direct link to Connect or sign in")

Use the `useWeb3AuthConnect` hook to enable users to connect or sign in to their wallet:

```
"use client";

import { useWeb3AuthConnect } from "@web3auth/modal/react";

export const Navbar = () => {
  const { connect } = useWeb3AuthConnect();

  return (
    <nav>
      <button onClick={() => connect()}>Connect or Sign in</button>;
    </nav>
  );
};

```

### Check wallet status[​](#check-wallet-status "Direct link to Check wallet status")

Use the `useAccount` hook from Wagmi to check the wallet status:

```
"use client";

import { useAccount } from "wagmi";

export const Hero = () => {
  const { address, isConnected } = useAccount();

  return (
    <div>
      {isConnected ? <p>Connected: {address}</p> : <p>Not connected</p>}
    </div>
  );
};

```

### Send a transaction[​](#send-a-transaction "Direct link to Send a transaction")

Use the `useSendTransaction` hook from Wagmi to send a transaction:

```
"use client";

import { useSendTransaction } from "wagmi";
import { parseEther } from "viem";

export const SendTransaction = () => {
  const { sendTransaction } = useSendTransaction();

  return (
    <button
      onClick={() =>
        sendTransaction({
          to: "0xd2135CfB216b74109775236E36d4b433F1DF507B",
          value: parseEther("0.001"),
        })
      }
    >
      Send transaction
    </button>
  );
};

```

## Next steps[​](#next-steps "Direct link to Next steps")

- [Manage user accounts](/metamask-connect/evm/guides/manage-user-accounts/)
- [Manage networks](/metamask-connect/evm/guides/manage-networks/)
- [Sign data](/metamask-connect/evm/guides/sign-data/)

## Live example[​](#live-example "Direct link to Live example")