> 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 Solana using Embedded Wallets SDK

This quickstart gets you up and running with MetaMask SDK inside [Embedded Wallets SDK (previously Web3Auth)](/embedded-wallets/), enabling users to sign in with an email or social media account. [Download the template](#set-up-using-a-template) to start quickly, or [set up the SDKs manually](#set-up-manually) in an existing project.

## 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 Embedded Wallets SDK and Solana web3.js:

- npm
- Yarn
- pnpm
- Bun

```
npm install @web3auth/modal @solana/kit @solana-program/system

```

```
yarn add @web3auth/modal @solana/kit @solana-program/system

```

```
pnpm add @web3auth/modal @solana/kit @solana-program/system

```

```
bun add @web3auth/modal @solana/kit @solana-program/system

```

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

Set up your providers in `app/providers.tsx` with Solana chain configuration:

providers.tsx

```
"use client";

import { type ReactNode } from "react";
import { Web3AuthProvider } from "@web3auth/modal/react";

type Props = {
  children: ReactNode;
};

export function Providers({ children }: Props) {
  return (
    <Web3AuthProvider
      config={{
        web3AuthOptions: {
          clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID!,
          web3AuthNetwork: "sapphire_devnet",
          chainConfig: {
            chainNamespace: "SOLANA",
            chainId: "0x3",
            rpcTarget: "https://api.devnet.solana.com",
            displayName: "Solana Devnet",
            blockExplorerUrl: "https://explorer.solana.com/?cluster=devnet",
            ticker: "SOL",
            tickerName: "Solana",
            logo: "https://images.toruswallet.io/solana.svg",
          },
        },
      }}
    >
      <div className="container">{children}</div>
    </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 `useSolanaWallet` hook to access the Solana wallet state:

```
"use client";

import { useSolanaWallet } from "@web3auth/modal/react/solana";

export const WalletStatus = () => {
  const { address, connected } = useSolanaWallet();

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

```

### Sign a message[​](#sign-a-message "Direct link to Sign a message")

Use the `useSignMessage` hook to request a signed message:

```
"use client";

import { useSignMessage } from "@web3auth/modal/react/solana";

export const SignMessage = () => {
  const { signMessage, isPending } = useSignMessage();

  const handleSign = async () => {
    try {
      const message = new TextEncoder().encode("Hello from Solana!");
      const signature = await signMessage(message);
      console.log("Signature:", signature);
    } catch (err) {
      console.error("Error signing message:", err);
    }
  };

  return (
    <button onClick={handleSign} disabled={isPending}>
      {isPending ? "Signing..." : "Sign message"}
    </button>
  );
};

```

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

Use the `useSignAndSendTransaction` hook to sign and send a Solana transaction:

```
"use client";

import { useSignAndSendTransaction } from "@web3auth/modal/react/solana";
import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";

export const SendTransaction = () => {
  const { signAndSendTransaction, isPending } = useSignAndSendTransaction();

  const handleSend = async () => {
    try {
      const transaction = new Transaction().add(
        SystemProgram.transfer({
          fromPubkey: new PublicKey("YOUR_PUBLIC_KEY"),
          toPubkey: new PublicKey("DESTINATION_PUBLIC_KEY"),
          lamports: 0.01 * LAMPORTS_PER_SOL,
        })
      );

      const signature = await signAndSendTransaction(transaction);
      console.log("Transaction signature:", signature);
    } catch (err) {
      console.error("Error sending transaction:", err);
    }
  };

  return (
    <button onClick={handleSend} disabled={isPending}>
      {isPending ? "Sending..." : "Send 0.01 SOL"}
    </button>
  );
};

```

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

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

- [Send a legacy transaction](/metamask-connect/solana/guides/send-transactions/legacy/) to transfer SOL using MetaMask Connect.
- [Sign in with Solana (SIWS)](/metamask-connect/solana/guides/sign-data/siws/) to authenticate users with their wallet instead of a username and password.
- [MetaMask Connect Solana methods](/metamask-connect/solana/reference/methods/) for the full API reference.