> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Authenticate with External Wallets

External wallets allow users to sign up and log in using their own wallet (MetaMask, Phantom, Coinbase Wallet, etc.).

## Create and Initialize the Dynamic Client

First, install the client package and create a Dynamic Client with your environment ID.

```bash theme={"system"}
npm install @dynamic-labs-sdk/client
```

```javascript theme={"system"}
import { createDynamicClient } from '@dynamic-labs-sdk/client';

const dynamicClient = createDynamicClient({
  environmentId: 'YOUR_ENVIRONMENT_ID',
  metadata: {
    name: 'YOUR_APP_NAME',
    url: 'YOUR_APP_URL',
    iconUrl: 'YOUR_APP_ICON_URL',
  },
});
```

See [Creating a Dynamic Client](/javascript/reference/client/create-dynamic-client) for more details.

## Add chain extensions for every chain you want to support

Install and add the extension for each chain you want in your adaptor. Each guide covers installation and how to add that chain's extension.

| Chain                        | Guide                                                                                 |
| ---------------------------- | ------------------------------------------------------------------------------------- |
| EVM                          | [Adding EVM Extensions](/javascript/reference/evm/adding-evm-extensions)              |
| Solana                       | [Adding Solana Extensions](/javascript/reference/solana/adding-solana-extensions)     |
| WalletConnect (EVM & Solana) | [WalletConnect Integration](/javascript/reference/wallets/walletconnect-integration)  |
| Bitcoin                      | [Adding Bitcoin Extensions](/javascript/reference/bitcoin/adding-bitcoin-extension)   |
| Tron                         | [Adding Tron Extensions](/javascript/reference/tron/adding-tron-extension)            |
| Starknet                     | [Adding Starknet Extension](/javascript/reference/starknet/adding-starknet-extension) |
| Aptos                        | [Adding Aptos Extension](/javascript/reference/aptos/adding-aptos-extension)          |
| Sui                          | [Adding Sui Extension](/javascript/reference/sui/adding-sui-extension)                |

The list from `getAvailableWalletProvidersData()` (below) includes every wallet provider from every extension you added.

## Enable those chains in the dashboard

In the [Dynamic dashboard](https://app.dynamic.xyz/dashboard/chains-and-networks), enable each chain you added an extension for (e.g. EVM, Solana, Bitcoin). Available options match the chain extensions above.

## Fetch available wallet providers (your adaptor's options)

Use `getAvailableWalletProvidersData` to get the full list of wallet providers your adaptor can offer. It includes every chain–wallet combination from the extensions you added (e.g. `metamaskevm`, `metamasksol`, `phantomevm`, `phantomsol`).

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import { getAvailableWalletProvidersData } from '@dynamic-labs-sdk/client';

    const walletProvidersData = getAvailableWalletProvidersData();

    walletProvidersData.forEach((provider) => {
      console.log(provider.key);                    // e.g., 'metamaskevm'
      console.log(provider.metadata.displayName);   // e.g., 'MetaMask'
      console.log(provider.groupKey);               // e.g., 'metamask' (for grouping)
      console.log(provider.chain);                  // e.g., 'evm' or 'sol'
    });
    ```
  </Tab>

  <Tab title="React">
    Use `useGetAvailableWalletProvidersData` from `@dynamic-labs-sdk/react-hooks` — it re-renders whenever extensions load or change.

    ```tsx theme={"system"}
    import { useGetAvailableWalletProvidersData } from '@dynamic-labs-sdk/react-hooks';
    ```
  </Tab>
</Tabs>

See [Getting Available Wallets to Connect](/javascript/reference/wallets/get-available-wallets-to-connect) for more details.

## Display wallet options in your UI

Each wallet provider includes metadata (display name, icon). Use it to build your wallet selection UI (buttons, list, or modal).

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    const walletProvidersData = getAvailableWalletProvidersData();

    // Example: render wallet buttons
    walletProvidersData.map((provider) => (
      <button key={provider.key} onClick={() => handleConnect(provider.key)}>
        <img src={provider.metadata.iconUrl} alt={provider.metadata.displayName} />
        {provider.metadata.displayName}
      </button>
    ));
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={"system"}
    function WalletList() {
      const { data: providers = [] } = useGetAvailableWalletProvidersData();

      return (
        <ul>
          {providers.map((provider) => (
            <li key={provider.key}>
              <button onClick={() => handleConnect(provider)}>
                <img src={provider.metadata.iconUrl} alt={provider.metadata.displayName} />
                {provider.metadata.displayName}
              </button>
            </li>
          ))}
        </ul>
      );
    }
    ```
  </Tab>
</Tabs>

## Connect and verify

When the user picks a wallet from your adaptor UI, use one of these methods. The JS SDK supports three flows depending on when you want verification to occur.

### 1. Connect and verify in one step

The wallet account is only added after a successful verification signature. Use this for login/signup flows.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import { connectAndVerifyWithWalletProvider } from '@dynamic-labs-sdk/client';

    const walletAccount = await connectAndVerifyWithWalletProvider({
      walletProviderKey: 'metamaskevm',
    });

    // walletAccount is now verified and associated to a Dynamic user
    console.log(walletAccount.address);
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={"system"}
    import { useConnectAndVerifyWithWalletProvider } from '@dynamic-labs-sdk/react-hooks';

    function ConnectWalletButton({ walletProviderKey }: { walletProviderKey: string }) {
      // On success, `data` holds the verified walletAccount and `useGetWalletAccounts()` consumers re-render.
      const { mutate: connectAndVerify, data, isPending } = useConnectAndVerifyWithWalletProvider();

      return (
        <>
          <button onClick={() => connectAndVerify({ walletProviderKey })} disabled={isPending}>
            {isPending ? 'Connecting…' : 'Connect wallet'}
          </button>
          {data && <p>Verified: {data.address}</p>}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

### 2. Connect without verifying

The wallet account is added to the session but not yet associated to a Dynamic user. Use this to defer verification.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import { connectWithWalletProvider } from '@dynamic-labs-sdk/client';

    const walletAccount = await connectWithWalletProvider({
      walletProviderKey: 'metamaskevm',
    });

    // walletAccount is connected but not verified (session-only)
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={"system"}
    import { useConnectWithWalletProvider } from '@dynamic-labs-sdk/react-hooks';

    function ConnectButton({ walletProviderKey }: { walletProviderKey: string }) {
      const { mutate: connect, isPending } = useConnectWithWalletProvider();

      // walletAccount (from data) is connected but not verified (session-only)
      return (
        <button onClick={() => connect({ walletProviderKey })} disabled={isPending}>
          Connect
        </button>
      );
    }
    ```
  </Tab>
</Tabs>

### 3. Verify a previously connected account

Verify a wallet that was connected but not yet verified. This associates it with a Dynamic user.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import { verifyWalletAccount } from '@dynamic-labs-sdk/client';

    const verifiedWalletAccount = await verifyWalletAccount({
      walletAccount,
    });

    // walletAccount now has a verifiedCredentialId and is associated to a Dynamic user
    ```
  </Tab>

  <Tab title="React">
    ```tsx theme={"system"}
    import { type WalletAccount } from '@dynamic-labs-sdk/client';
    import { useVerifyWalletAccount } from '@dynamic-labs-sdk/react-hooks';

    function VerifyWalletButton({ walletAccount }: { walletAccount: WalletAccount }) {
      const { mutate: verifyWalletAccount, isPending } = useVerifyWalletAccount();

      return (
        <button onClick={() => verifyWalletAccount({ walletAccount })} disabled={isPending}>
          {isPending ? 'Verifying…' : 'Verify wallet'}
        </button>
      );
    }
    ```
  </Tab>
</Tabs>

See [Connecting and Verifying a Wallet](/javascript/reference/wallets/connect-and-verify-wallet) for more details.

## Get all connected wallet accounts

Retrieve every wallet account the user has connected (across all chains) using `getWalletAccounts`.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import { getWalletAccounts } from '@dynamic-labs-sdk/client';

    const walletAccounts = getWalletAccounts();

    walletAccounts.forEach((account) => {
      console.log(account.address);
      console.log(account.verifiedCredentialId); // null if not verified
    });
    ```
  </Tab>

  <Tab title="React">
    Use `useGetWalletAccounts` from `@dynamic-labs-sdk/react-hooks` — it re-renders whenever accounts are added or removed.

    ```tsx theme={"system"}
    import { useGetWalletAccounts } from '@dynamic-labs-sdk/react-hooks';

    function WalletAccountsList() {
      const { data: walletAccounts = [] } = useGetWalletAccounts();

      return (
        <ul>
          {walletAccounts.map((account) => (
            <li key={account.id}>{account.address}</li>
          ))}
        </ul>
      );
    }
    ```
  </Tab>
</Tabs>

See [Getting Wallet Accounts](/javascript/reference/wallets/get-wallet-accounts) for more details.

## Related

* [Wallet Provider Events](/javascript/reference/wallets/wallet-provider-events)
* [Getting Native Balance](/javascript/reference/wallets/get-native-balance)
* [Signing Messages](/javascript/reference/wallets/sign-message)
* [Removing Wallet Accounts](/javascript/reference/wallets/remove-wallet-account)