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

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

## Enable Branded Wallet Signup/Login

**1. Enable Chains & Add Connectors**

The first step is to enable the appropriate chains that you'd like to support and add the appropriate connectors to your app. The following [chains and networks configuration guide](https://docs.dynamic.xyz/docs/react/chains/enabling-chains.md) will show you how to do both.

We support Ethereum, all EVM-compatible networks, Solana, Eclipse, Flow, Bitcoin, Algorand, Starknet, Cosmos Hub, Axelar, Noble, Osmosis, Sei and Sui.

**2. Configure RPC**

You can use the default RPC URLs that we provide for each chain/network, but if you'd like to configure your own, please follow [this RPC guide](https://docs.dynamic.xyz/docs/react/chains/rpc-urls.md).

**3. Enable Web3 Wallet Signup**

In [the Log in & User Profile section of the Dynamic Console](https://console.dynamic.xyz/dashboard/log-in-user-profile), toggle on Wallet Log in under "External Wallets" and you're good to go!

## Multi-Wallet

In the Dynamic Console, under External Wallets, you can toggle on Multi-Wallet. This option, when toggled on, allows your end users to have more than one connected wallet to their account and change between them. In this way users don't have to sign out and back in again if they want to use a different wallet, they simply switch between them. You can learn more about Multi-Wallet on [the overview page](https://docs.dynamic.xyz/docs/react/wallets/external-wallets/multi-wallet.md).

## Using our UI

Once enabled, external wallet login is available by default in the Dynamic UI components i.e. DynamicWidget.

## Using your UI

#### Fetch available wallets

You can find the list of available wallets in the `walletOptions` prop returned by the [useWalletOptions hook](https://docs.dynamic.xyz/docs/react/reference/hooks/wallets/usewalletoptions.md).

> [!TIP]
>
> When browsing wallets in the Dynamic Widget, you might see labels beside them like "Last Used", "Multichain" or "Recommended".
>
> Last used comes from the "dynamic\_last\_used\_wallet" value in localstorage.
> "Multichain" comes from the `chainGroup` node in each wallet (Remember to also add [the WalletConnectors](https://docs.dynamic.xyz/docs/react/chains/enabling-chains.md#enabling-a-chain-network) for each chain).
> "Recommended" from [the Recommended Wallets feature](https://docs.dynamic.xyz/docs/react/wallets/external-wallets/recommend-wallets.md).

### Implementation

```tsx React theme={"system"}
import { useWalletOptions } from '@dynamic-labs/sdk-react-core';

const WalletList = () => {
  const { walletOptions } = useWalletOptions();

  return (
    <div>
      {walletOptions.map((wallet) => (
        <div key={wallet.key}>
          <span>{wallet.name}</span>
          <span>{wallet.description}</span>
        </div>
      ))}
    </div>
  );
};
```

#### Display a wallet icon

Use the `@dynamic-labs/wallet-book` library to display a wallet icon using the exported `WalletIcon` component. This component takes a `walletKey` prop, which is the key of the wallet you want to display.

```tsx React theme={"system"}
import { WalletIcon } from '@dynamic-labs/wallet-book'

const WalletIconComponent = () => {
  return <WalletIcon walletKey="metamask" />
}
```

#### Connect to a wallet

### useWalletOptions

[useWalletOptions](https://docs.dynamic.xyz/docs/react/reference/hooks/wallets/usewalletoptions.md) allows you to prompt the user to connect using a specific wallet (by passing in the key).

You can see how to find the available wallet keys in [Fetch & Display Wallets to Connect](https://docs.dynamic.xyz/docs/react/wallets/using-wallets/general/fetch-display-wallets.md#wallet-keys-when-you-need-them).

```tsx theme={"system"}
import { useWalletOptions } from "@dynamic-labs/sdk-react-core";

// component setup etc.

const { selectWalletOption } = useWalletOptions();

const connectWithWallet = async (walletKey) => {
  return await selectWalletOption(walletKey)
}
```

### Further Configuration

When you enabled External Wallets, by default you will be in what's called "connect-and-sign" mode. Read about the implications of this in [the overview of authentication modes](https://docs.dynamic.xyz/docs/react/wallets/external-wallets/connected-vs-authenticated.md) to decide what's right for your use case.

Further Branded Wallet customizations include [sorting and filtering wallets](https://docs.dynamic.xyz/docs/react/wallets/external-wallets/sort-and-filter-wallets.md); see [the advanced wallets section of the docs](https://docs.dynamic.xyz/docs/react/wallets/external-wallets).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.