> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

## Enable Branded Wallet Signup/Login

<Steps>
  <Step title="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](/react/chains/enabling-chains) 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.
  </Step>

  <Step title="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](/react/chains/rpc-urls).
  </Step>

  <Step title="Enable Web3 Wallet Signup">
    In [the Log in & User Profile section of the dashboard](https://app.dynamic.xyz/dashboard/log-in-user-profile), toggle on Wallet Log in under "External Wallets" and you're good to go!
  </Step>
</Steps>

## Multi-Wallet

In the dashboard, 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](/react/wallets/external-wallets/multi-wallet).

## 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](/react/reference/hooks/wallets/usewalletoptions).

<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](/react/chains/enabling-chains#enabling-a-chain-network) for each chain).
  "Recommended" from [the Recommended Wallets feature](/react/wallets/external-wallets/recommend-wallets).
</Tip>

### 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](/react/reference/hooks/wallets/usewalletoptions) 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](/react/wallets/using-wallets/general/fetch-display-wallets#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. It's worth reading about the implications of this in [the overview of authentication modes](/react/wallets/external-wallets/connected-vs-authenticated) to decide what's right for your use case.

There's a bunch of further customizations you can do for the Branded Wallet experience including things like [sorting and filtering wallets](/react/wallets/external-wallets/sort-and-filter-wallets), so it's worth reviewing [the advanced wallets section of the docs](/react/wallets/external-wallets) in depth when you're ready.