MetaMask Embedded Wallets SDK for React

https://docs.metamask.io/embedded-wallets/sdk/react/
Admin
MetaMask Embedded Wallets SDK for React provides seamless authentication and wallet integration for...
Tokens:55,718
Snippets:394
Trust Score:10
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install Solana dependencies with Bun

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/

Use Bun to install the required packages for Solana hooks: @solana/kit, @solana-program/system, and @solana/react-hooks.

```bash
bun add @solana/kit @solana-program/system @solana/react-hooks
```

--------------------------------

### Install wagmi and @tanstack/react-query

Source: https://docs.metamask.io/embedded-wallets/sdk/react/ethereum-hooks/

Install the required packages for Wagmi integration. Use the command for your package manager: npm, Yarn, pnpm, or Bun.

```bash
npm install wagmi@3 @tanstack/react-query
```

```bash
yarn add wagmi@3 @tanstack/react-query
```

```bash
pnpm add wagmi@3 @tanstack/react-query
```

```bash
bun add wagmi@3 @tanstack/react-query
```

--------------------------------

### Install Solana dependencies with npm

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/

Use npm to install the required packages for Solana hooks: @solana/kit, @solana-program/system, and @solana/react-hooks.

```bash
npm install @solana/kit @solana-program/system @solana/react-hooks
```

--------------------------------

### Install Web3Auth Modal SDK and Wagmi dependencies

Source: https://docs.metamask.io/embedded-wallets/sdk/react/

Install the required packages using npm, Yarn, pnpm, or Bun. The SDK requires Node.js 22+ and npm 10+.

```bash
npm install --save @web3auth/modal wagmi@3 @tanstack/react-query
```

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

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

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

--------------------------------

### Usage Example

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useEnableMFA/

Example of using the useEnableMFA hook in a React component to enable MFA with a button.

```APIDOC
## Usage

```tsx
import { useEnableMFA } from '@web3auth/modal/react'

function EnableMFAButton() {
  const { enableMFA, loading, error } = useEnableMFA()

  return (
    <div>
      <button onClick={() => enableMFA()} disabled={loading}>
        {loading ? 'Enabling MFA...' : 'Enable MFA'}
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
}
```
```

--------------------------------

### Install Solana dependencies with pnpm

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/

Use pnpm to install the required packages for Solana hooks: @solana/kit, @solana-program/system, and @solana/react-hooks.

```bash
pnpm add @solana/kit @solana-program/system @solana/react-hooks
```

--------------------------------

### Install Solana dependencies with Yarn

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/

Use Yarn to install the required packages for Solana hooks: @solana/kit, @solana-program/system, and @solana/react-hooks.

```bash
yarn add @solana/kit @solana-program/system @solana/react-hooks
```

--------------------------------

### Set up providers in main entry file

Source: https://docs.metamask.io/embedded-wallets/sdk/react/

Wrap your app with Web3AuthProvider, QueryClientProvider, and WagmiProvider in main.tsx or index.tsx. This setup is required for the SDK to function.

```tsx
import './index.css'

import ReactDOM from 'react-dom/client'
import { Web3AuthProvider } from '@web3auth/modal/react'
import { WagmiProvider } from '@web3auth/modal/react/wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import web3AuthContextConfig from './web3authContext'
import App from './App'

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <QueryClientProvider client={queryClient}>
      <WagmiProvider>
        <App />
      </WagmiProvider>
    </QueryClientProvider>
  </Web3AuthProvider>
)
```

--------------------------------

### Usage example with connectTo and MFA_LEVELS.MANDATORY

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/mfa/

Shows how to set mfaLevel to MFA_LEVELS.MANDATORY when connecting with the AUTH wallet connector and Google auth connection.

```tsx
import { WALLET_CONNECTORS, AUTH_CONNECTION, MFA_LEVELS } from '@web3auth/modal'

await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.GOOGLE,
  authConnectionId: 'w3a-google-demo',
  mfaLevel: MFA_LEVELS.MANDATORY,
})
```

--------------------------------

### Usage example of useWeb3Auth

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useWeb3Auth/

Example component using useWeb3Auth to access connection state, initialization status, and errors. Note that for EVM operations, prefer Wagmi hooks; use connection.ethereumProvider only for JSON-RPC edge cases.

```tsx
import { useWeb3Auth } from '@web3auth/modal/react'

function App() {
  const { web3Auth, isConnected, isInitializing, connection, status, initError } = useWeb3Auth()

  if (isConnected) {
    console.log('Connected via:', connection?.connectorName)
  }
  if (isInitializing) {
    console.log('Web3Auth is initializing')
  }
  if (connection?.ethereumProvider) {
    // Use for JSON-RPC edge cases; prefer Wagmi hooks for standard EVM flows
    console.log('Ethereum provider available')
  }
  if (status) {
    console.log('Web3Auth status:', status)
  }
  if (initError) {
    console.log('Web3Auth initialization error:', initError)
  }
}
```

--------------------------------

### connectTo - Google implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with Google as the auth connection.

```APIDOC
## connectTo - Google implicit login

### Description
Connects to the wallet using Google as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.GOOGLE`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-google-demo'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.GOOGLE,
  authConnectionId: 'w3a-google-demo',
})
```
```

--------------------------------

### Usage example for useSignAndSendTransaction

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSignAndSendTransaction/

Example component that uses the hook to sign and send a transaction. It shows loading and error states and displays the resulting signature.

```tsx
import { useSignAndSendTransaction } from '@web3auth/modal/react/solana'
import { TransactionOrVersionedTransaction } from '@web3auth/modal'

function SignAndSendTransactionButton({
  transaction,
}: {
  transaction: TransactionOrVersionedTransaction
}) {
  const { signAndSendTransaction, loading, error, data } = useSignAndSendTransaction()

  const handleSignAndSend = async () => {
    try {
      const signature = await signAndSendTransaction(transaction)
      // Do something with signature
    } catch (e) {
      // Handle error
    }
  }

  return (
    <div>
      <button onClick={handleSignAndSend} disabled={loading}>
        {loading ? 'Signing & Sending...' : 'Sign & Send Transaction'}
      </button>
      {error && <div>Error: {error.message}</div>}
      {data && <div>Signature: {data}</div>}
    </div>
  )
}
```

--------------------------------

### Full example: switchChain.tsx

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useSwitchChain/

A complete example component that uses useSwitchChain and useWeb3Auth to display the current chain and buttons to switch to any chain defined in the Web3Auth configuration. The switchChain function is called with the chain ID of the selected chain.

```tsx
import { useSwitchChain, useWeb3Auth } from '@web3auth/modal/react'

export function SwitchChain() {
  const { web3Auth } = useWeb3Auth()

  const { switchChain, error } = useSwitchChain()

  return (
    <div>
      <h2>Switch chain</h2>
      <h3>Connected to {web3Auth?.currentChain?.displayName}</h3>
      {web3Auth?.coreOptions.chains?.map(chain => {
        return (
          <button
            disabled={web3Auth?.currentChain?.chainId === chain.chainId}
            key={chain.chainId}
            onClick={() => switchChain(chain.chainId)}
            type="button"
            className="card">
            {chain.displayName}
          </button>
        )
      })}

      {error?.message}
    </div>
  )
}
```

--------------------------------

### connectTo - Auth0 Google implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with Auth0 and Google as the auth connection.

```APIDOC
## connectTo - Auth0 Google implicit login

### Description
Connects to the wallet using Auth0 with Google as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.CUSTOM`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-auth0-demo'.
- `extraLoginOptions` (object) - Additional options, with `connection` set to 'google-oauth2'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: 'w3a-auth0-demo',
  extraLoginOptions: {
    connection: 'google-oauth2',
  },
})
```
```

--------------------------------

### Usage example of useSwap hook

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useSwap/

Example component using useSwap to open the swap interface. It shows a button that calls showSwap, disables while loading, and displays any error.

```tsx
import { useSwap } from '@web3auth/modal/react'

function SwapButton() {
  const { showSwap, loading, error } = useSwap()

  return (
    <div>
      <button onClick={() => showSwap()} disabled={loading}>
        {loading ? 'Opening Swap...' : 'Open Swap'}
      </button>
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}
```

--------------------------------

### connectTo - Auth0 SPA implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with Auth0 SPA as the auth connection.

```APIDOC
## connectTo - Auth0 SPA implicit login

### Description
Connects to the wallet using Auth0 SPA as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.CUSTOM`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-auth0-demo'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: 'w3a-auth0-demo',
})
```
```

--------------------------------

### connectTo - Discord implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with Discord as the auth connection.

```APIDOC
## connectTo - Discord implicit login

### Description
Connects to the wallet using Discord as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.DISCORD`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-discord-demo'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.DISCORD,
  authConnectionId: 'w3a-discord-demo',
})
```
```

--------------------------------

### Wrap App with SolanaProvider in main.tsx

Source: https://docs.metamask.io/embedded-wallets/sdk/react/

Install @solana/kit, @solana-program/system, and @solana/react-hooks, then wrap your app with SolanaProvider inside Web3AuthProvider. This enables Solana hooks from @web3auth/modal/react/solana.

```tsx
import { SolanaProvider } from '@web3auth/modal/react/solana'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <SolanaProvider>
      <App />
    </SolanaProvider>
  </Web3AuthProvider>
)
```

--------------------------------

### connectTo - Twitch implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with Twitch as the auth connection.

```APIDOC
## connectTo - Twitch implicit login

### Description
Connects to the wallet using Twitch as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.TWITCH`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-twitch-demo'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.TWITCH,
  authConnectionId: 'w3a-twitch-demo',
})
```
```

--------------------------------

### Usage of useCheckout

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useCheckout/

Example component using useCheckout to show a checkout button. The loading state disables the button and displays 'Opening Checkout...', and any error is shown below.

```tsx
import { useCheckout } from '@web3auth/modal/react'

function CheckoutButton() {
  const { showCheckout, loading, error } = useCheckout()

  return (
    <div>
      <button onClick={() => showCheckout()} disabled={loading}>
        {loading ? 'Opening Checkout...' : 'Show Checkout'}
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
}
```

--------------------------------

### Example: Fetching SOL balance

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSolanaWallet/

A React component that fetches and displays the SOL balance for the first account from useSolanaWallet. It uses createSolanaRpc from @solana/kit and the rpcTarget from the current chain. The balance is converted from lamports to SOL by dividing by 1e9.

```tsx
import { address, createSolanaRpc } from '@solana/kit'
import { useState } from 'react'
import { useWeb3Auth } from '@web3auth/modal/react'
import { useSolanaWallet } from '@web3auth/modal/react/solana'

export function Balance() {
  const { web3Auth } = useWeb3Auth()
  const { accounts } = useSolanaWallet()
  const [balance, setBalance] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function fetchBalance() {
    const rpcTarget = web3Auth?.currentChain?.rpcTarget
    if (!rpcTarget || !accounts?.length) return

    setIsLoading(true)
    setError(null)
    try {
      const rpc = createSolanaRpc(rpcTarget)
      const { value } = await rpc.getBalance(address(accounts[0])).send()
      setBalance(`${Number(value) / 1e9} SOL`)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to fetch balance.')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      <h2>Balance</h2>
      {balance && <div>{balance}</div>}
      <button
        onClick={() => void fetchBalance()}
        type="button"
        className="card"
        disabled={isLoading}>
        {isLoading ? 'Fetching...' : 'Fetch Balance'}
      </button>
      {error && <div className="error">Error: {error}</div>}
    </div>
  )
}
```

--------------------------------

### connectTo - Facebook implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with Facebook as the auth connection.

```APIDOC
## connectTo - Facebook implicit login

### Description
Connects to the wallet using Facebook as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.FACEBOOK`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-facebook-demo'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.FACEBOOK,
  authConnectionId: 'w3a-facebook-demo',
})
```
```

--------------------------------

### Usage of useWalletUI

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useWalletUI/

Example component using useWalletUI to show the Wallet UI modal. It destructures showWalletUI, loading, and error. The button is disabled while loading, and errors are displayed.

```tsx
import { useWalletUI } from '@web3auth/modal/react'

function WalletUIButton() {
  const { showWalletUI, loading, error } = useWalletUI()

  return (
    <div>
      <button onClick={() => showWalletUI()} disabled={loading}>
        {loading ? 'Opening Wallet UI...' : 'Show Wallet UI'}
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
}
```

--------------------------------

### Get smart account address with Viem

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/smart-accounts/

Use the `walletClient` instance from the previous step to retrieve the smart account address. The first address is the smart account, the second is the EOA.

```tsx
// Use walletClient instance from previous step
const addresses = await walletClient.getAddresses()

const smartAccountAddress = addresses[0]
const eoaAddress = addresses[1]
```

--------------------------------

### Usage of useAuthTokenInfo

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useAuthTokenInfo/

Example component using useAuthTokenInfo to get the identity token. The hook returns getAuthTokenInfo, loading, error, and token. The button triggers the authentication process, and the token or error is displayed.

```tsx
import { useAuthTokenInfo } from '@web3auth/modal/react'

function AuthTokenInfoButton() {
  const { getAuthTokenInfo, loading, error, token } = useAuthTokenInfo()

  return (
    <div>
      <button onClick={() => getAuthTokenInfo()} disabled={loading}>
        {loading ? 'Authenticating...' : 'Get Identity Token'}
      </button>
      {token && <div>Token: {token}</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  )
}
```

--------------------------------

### Get smart account address with Wagmi

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/smart-accounts/

Use the `useConnection` hook from Wagmi to get the smart account address.

```tsx
import { useConnection } from 'wagmi'

const { address } = useConnection()
const smartAccountAddress = address
```

--------------------------------

### Get smart account address with Ethers

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/smart-accounts/

Use the signer from the previous step to get the smart account address.

```tsx
// User signer from previous step
const smartAccountAddress = signer.getAddress()
```

--------------------------------

### Configure Web3Auth with Client ID and network

Source: https://docs.metamask.io/embedded-wallets/sdk/react/

Create a configuration file with your Client ID and Sapphire network. Use SAPPHIRE_DEVNET for local development; SAPPHIRE_MAINNET does not allow localhost origins.

```tsx
import { type Web3AuthContextConfig } from '@web3auth/modal/react'
import { WEB3AUTH_NETWORK } from '@web3auth/modal'

const clientId = import.meta.env.VITE_WEB3AUTH_CLIENT_ID // or your env prefix

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    clientId,
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // use SAPPHIRE_MAINNET in production
  },
}

export default web3AuthContextConfig
```

--------------------------------

### Basic SDK configuration for smart accounts

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/smart-accounts/

Adds accountAbstractionConfig to Web3Auth options to enable smart accounts with a bundler URL for a specific chain.

```ts
import { WEB3AUTH_NETWORK, Web3AuthOptions } from '@web3auth/modal'

const web3AuthOptions: Web3AuthOptions = {
  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  accountAbstractionConfig: {
    smartAccountType: 'metamask',
    chains: [
      {
        chainId: '0x1',
        bundlerConfig: {
          url: 'YOUR_BUNDLER_URL',
        },
      },
    ],
  },
}
```

--------------------------------

### Example signMessage.tsx

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSignMessage/

A complete example component that uses useSignMessage to sign a message from a form input and displays the resulting signature or error.

```tsx
import { FormEvent } from 'react'
import { useSignMessage } from '@web3auth/modal/react/solana'

export function SignMessage() {
  const { signMessage, loading, error, data } = useSignMessage()

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.target as HTMLFormElement)
    const message = formData.get('message')?.toString().trim()
    if (!message) return
    void signMessage(message)
  }

  return (
    <form onSubmit={submit}>
      <input name="message" placeholder="Message" required />
      <button disabled={loading} type="submit">
        {loading ? 'Signing...' : 'Sign message'}
      </button>
      {data && <p>Message hash: {data}</p>}
      {error && <p>Error: {error.message}</p>}
    </form>
  )
}
```

--------------------------------

### Usage example for useSignTransaction

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSignTransaction/

Example component that uses useSignTransaction to sign a Solana transaction. It handles loading and error states, and displays the signed transaction data.

```tsx
import { useSignTransaction } from '@web3auth/modal/react/solana'
import type { Transaction } from '@solana/kit'

function SignTransactionButton({ transaction }: { transaction: Transaction }) {
  const { signTransaction, loading, error, data } = useSignTransaction()

  const handleSign = async () => {
    try {
      const signedTx = await signTransaction(transaction)
      // Do something with signedTx
    } catch (e) {
      // Handle error
    }
  }

  return (
    <div>
      <button onClick={handleSign} disabled={loading}>
        {loading ? 'Signing...' : 'Sign Transaction'}
      </button>
      {error && <div>Error: {error.message}</div>}
      {data && <div>Signed Transaction: {data}</div>}
    </div>
  )
}
```

--------------------------------

### Import useCheckout

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useCheckout/

Import the useCheckout hook from the @web3auth/modal/react package.

```tsx
import { useCheckout } from '@web3auth/modal/react'
```

--------------------------------

### Usage of useSolanaWallet

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSolanaWallet/

Example component that uses useSolanaWallet to display accounts, wallet availability, and RPC availability.

```tsx
import { useSolanaWallet } from '@web3auth/modal/react/solana'

function SolanaWalletInfo() {
  const { accounts, rpc, solanaWallet, getPrivateKey } = useSolanaWallet()

  return (
    <div>
      <div>Accounts: {accounts ? accounts.join(', ') : 'No accounts'}</div>
      <div>Solana wallet: {solanaWallet ? 'Available' : 'Not available'}</div>
      <div>RPC: {rpc ? 'Available' : 'Not available'}</div>
    </div>
  )
}
```

--------------------------------

### connectTo - AWS Cognito implicit login

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/custom-authentication/

Example of using connectTo with AWS Cognito as the auth connection.

```APIDOC
## connectTo - AWS Cognito implicit login

### Description
Connects to the wallet using AWS Cognito as the authentication provider.

### Parameters
- `WALLET_CONNECTORS.AUTH` (constant) - The wallet connector to use.
- `authConnection` (string) - Set to `AUTH_CONNECTION.CUSTOM`.
- `authConnectionId` (string) - The connection ID, e.g., 'w3a-cognito-demo'.
- `extraLoginOptions` (object) - Additional options:
  - `clientId` (string) - The Cognito client ID.
  - `domain` (string) - The Cognito domain.
  - `verifierIdField` (string) - The field used as verifier ID, e.g., 'email'.
  - `response_type` (string) - Set to 'token'.
  - `scope` (string) - Set to 'email profile openid'.

### Example
```tsx
await connectTo(WALLET_CONNECTORS.AUTH, {
  authConnection: AUTH_CONNECTION.CUSTOM,
  authConnectionId: 'w3a-cognito-demo',
  extraLoginOptions: {
    clientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
    domain: 'https://shahbaz-web3auth.auth.ap-south-1.amazoncognito.com',
    verifierIdField: 'email',
    response_type: 'token',
    scope: 'email profile openid',
  },
})
```
```

--------------------------------

### Basic Web3Auth Context Configuration

Source: https://docs.metamask.io/embedded-wallets/sdk/react/

Defines a basic Web3AuthContextConfig with a client ID and network. Uses SAPPHIRE_DEVNET network and imports the client ID from environment variables.

```TypeScript
import { type Web3AuthContextConfig } from '@web3auth/modal/react'
import { WEB3AUTH_NETWORK } from '@web3auth/modal'

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID,
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  },
}
```

--------------------------------

### Import useWalletUI

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useWalletUI/

Import the useWalletUI hook from '@web3auth/modal/react'.

```tsx
import { useWalletUI } from '@web3auth/modal/react'
```

--------------------------------

### Configure signer with Viem

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/smart-accounts/

For vanilla JavaScript or apps without Wagmi, read the EIP-1193 provider from `connection` and create a Viem wallet client with a custom transport.

```tsx
import { createWalletClient, custom } from 'viem'

const connection = web3auth.connection
const provider = connection?.ethereumProvider ?? null

const walletClient = createWalletClient({
  transport: custom(provider),
})
```

--------------------------------

### useCheckout

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useCheckout/

Hook to show the cryptocurrency checkout modal using Wallet Services plugin. Returns an object with `showCheckout`, `loading`, and `error` properties.

```APIDOC
## useCheckout

### Description
Hook to show the cryptocurrency checkout modal using Wallet Services plugin. This hook does not work for external wallet logins; it only works for social login embedded wallets.

### Import
```tsx
import { useCheckout } from '@web3auth/modal/react'
```

### Usage
```tsx
import { useCheckout } from '@web3auth/modal/react'

function CheckoutButton() {
  const { showCheckout, loading, error } = useCheckout()

  return (
    <div>
      <button onClick={() => showCheckout()} disabled={loading}>
        {loading ? 'Opening Checkout...' : 'Show Checkout'}
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
}
```

### Return Type
```tsx
import { type IUseCheckout } from '@web3auth/modal/react'
```

#### `loading`
`boolean`
Whether the checkout process is in progress.

#### `error`
`Web3AuthError | null`
error that occurred during the checkout process.

#### `showCheckout`
`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise<void>`
Function to initiate the checkout modal. Optional `showCheckoutParams` can be passed to customize the modal.

```

--------------------------------

### Usage of useWeb3AuthDisconnect

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useWeb3AuthDisconnect/

Example component using the hook to render a disconnect button, showing loading state and error message.

```tsx
import { useWeb3AuthDisconnect } from '@web3auth/modal/react'

function DisconnectButton() {
  const { disconnect, loading, error } = useWeb3AuthDisconnect()

  return (
    <div>
      <button onClick={() => disconnect()} disabled={loading}>
        {loading ? 'Disconnecting...' : 'Disconnect'}
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
}
```

--------------------------------

### Usage example for useSignMessage

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSignMessage/

Shows a SignMessageButton component that uses the useSignMessage hook to sign a message and display loading, error, and signature data.

```tsx
import { useSignMessage } from '@web3auth/modal/react/solana'

function SignMessageButton({ message }: { message: string }) {
  const { signMessage, loading, error, data } = useSignMessage()

  const handleSign = async () => {
    try {
      const signature = await signMessage(message)
      // Do something with signature
    } catch (e) {
      // Handle error
    }
  }

  return (
    <div>
      <button onClick={handleSign} disabled={loading}>
        {loading ? 'Signing...' : 'Sign Message'}
      </button>
      {error && <div>Error: {error.message}</div>}
      {data && <div>Signature: {data}</div>}
    </div>
  )
}
```

--------------------------------

### Import useSolanaWallet

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSolanaWallet/

Import the useSolanaWallet hook from the '@web3auth/modal/react/solana' package.

```tsx
import { useSolanaWallet } from '@web3auth/modal/react/solana'
```

--------------------------------

### mfaLevel property type declaration

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/mfa/

Declares the optional mfaLevel property of type MfaLevelType, used to control when the MFA setup screen appears.

```tsx
mfaLevel?: MfaLevelType;
```

--------------------------------

### Import useSignAndSendTransaction

Source: https://docs.metamask.io/embedded-wallets/sdk/react/solana-hooks/useSignAndSendTransaction/

Import the useSignAndSendTransaction hook from '@web3auth/modal/react/solana'.

```tsx
import { useSignAndSendTransaction } from '@web3auth/modal/react/solana'
```

--------------------------------

### Configure signer with Ethers

Source: https://docs.metamask.io/embedded-wallets/sdk/react/advanced/smart-accounts/

For vanilla JavaScript or apps without Wagmi, read the EIP-1193 provider from `connection` and create an Ethers BrowserProvider to get a signer.

```tsx
import { ethers } from 'ethers'

const connection = web3auth.connection
const provider = connection?.ethereumProvider ?? null

const ethersProvider = new ethers.BrowserProvider(provider)
const signer = await ethersProvider.getSigner()
```

--------------------------------

### Import useEnableMFA

Source: https://docs.metamask.io/embedded-wallets/sdk/react/hooks/useEnableMFA/

Import the useEnableMFA hook from the @web3auth/modal/react package.

```APIDOC
## Import

```tsx
import { useEnableMFA } from '@web3auth/modal/react'
```
```
Tokens:
Raw