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

# React

> Create user wallets from your frontend in under 5 minutes

<Warning>
  **You are viewing docs for the previous version of the Wallets SDK.** We recommend upgrading to V1.
  See the [updated version of this page](/wallets/quickstarts/react) or the [V1 migration guide](/wallets/guides/migrate-to-v1).
</Warning>

<CardGroup cols={2}>
  <Snippet file="before-you-start.mdx" />

  <Card title="Wallets Quickstart" icon="github" iconType="duotone" href="https://github.com/Crossmint/wallets-quickstart">
    See a full working example.
  </Card>
</CardGroup>

<Steps>
  <Step title="Install the SDK">
    Run the following command to install the SDK:

    <Snippet file="client-sdk-react-ui-installation-cmd.mdx" />
  </Step>

  <Step title="Add the Crossmint providers to your app">
    Add the necessary Crossmint providers to your app. This example uses [Crossmint Auth](/authentication/introduction)
    but you can use [any authentication provider of your choice](/wallets/v0/guides/bring-your-own-auth).

    With the current setup, a wallet will be created automatically on login.

    <CodeGroup>
      ```tsx next.js theme={null}
      "use client";

      import {
          CrossmintProvider,
          CrossmintAuthProvider,
          CrossmintWalletProvider,
      } from "@crossmint/client-sdk-react-ui";

      export function Providers({ children }: { children: React.ReactNode }) {
          return (
              <CrossmintProvider apiKey="<crossmint-client-api-key>">
                  <CrossmintAuthProvider>
                      <CrossmintWalletProvider
                          createOnLogin={{
                              chain: "base-sepolia",
                              signer: {
                                  type: "email",
                              },
                          }}
                      >
                          {children}
                      </CrossmintWalletProvider>
                  </CrossmintAuthProvider>
              </CrossmintProvider>
          );
      }
      ```
    </CodeGroup>

    For detailed configuration options, see the [React SDK Reference](/sdk-reference/wallets/v0/react/providers#crossmintwalletprovider).
  </Step>

  <Step title="Build a wallet component with basic functionality">
    Create a component that handles authentication and basic wallet actions.

    ```tsx wallet-app.tsx theme={null}
    import { useState } from "react";
    import { useAuth, useWallet } from "@crossmint/client-sdk-react-ui";

    export function WalletApp() {
        const { login, logout, jwt, status } = useAuth();
        const { wallet } = useWallet();
        const [usdxmBalance, setUsdxmBalance] = useState<string>("");

        const fundWallet = async () => {
            if (!wallet || !jwt) return;
            await wallet.stagingFund(10);
        };

        const transferTokens = async () => {
            if (!wallet) return;
            
            const recipient = "0xdf8b5f9c19e187f1ea00730a1e46180152244315";
            const token = "usdxm";
            const amount = "1";
            
            await wallet.send(recipient, token, amount);
        };

        const checkBalance = async () => {
            if (!wallet) return;
            const balances = await wallet.balances(["usdxm"]);
            const usdxmBalance = balances.tokens.find(
                (token) => token.symbol === "usdxm"
            )?.amount;
            setUsdxmBalance(usdxmBalance || "0");
        };

        if (status === "initializing") {
            return <div>Loading...</div>;
        }

        if (wallet == null || status === "logged-out") {
            return <button onClick={login}>Login</button>;
        }

        return (
            <div>
                <h2>💼 Wallet: {wallet?.address}</h2>
                <h3>👤 {wallet?.owner}</h3><br />
                <button onClick={fundWallet}>💰 Fund with 10 USDXM</button><br />
                <button onClick={transferTokens}>📤 Send 1 USDXM</button><br />
                <button onClick={checkBalance}>🔍 Check Balance</button><br />
                <button onClick={logout}>🚪 Logout</button>
                {usdxmBalance && <p>💳 USDXM Balance: {usdxmBalance}</p>}
            </div>
        );
    }

    ```
  </Step>

  <Step title="Render the wallet app">
    Render the wallet app in your application.

    ```tsx app.tsx theme={null}
    "use client";

    import { Providers } from './providers';
    import { WalletApp } from './wallet-app';

    export default function Home() {
        return (
            <Providers>
                <WalletApp />
            </Providers>
        );
    }
    ```
  </Step>
</Steps>

## Launching in Production

For production, some changes are required:

1. Create a developer account on the [production console](https://www.crossmint.com/console)
2. Create a production client API key on the [API Keys](https://www.crossmint.com/console/projects/apiKeys) page with the API scopes `users.create`, `users.read`, `wallets.read`, `wallets.create`, `wallets:transactions.create`, `wallets:transactions.sign`, `wallets:balance.read`, `wallets.fund`
3. Replace your test API key with the production key
4. **Use your own authentication provider**: For production applications, Crossmint recommends using [third-party authentication](/wallets/v0/guides/bring-your-own-auth) with providers like Auth0, Firebase, or Supabase, rather than Crossmint Auth. Configure JWT authentication in the [Crossmint Console](https://www.crossmint.com/console/projects/apiKeys) under API Keys > JWT Authentication.

## Learn More

<CardGroup cols={3}>
  <Card title="Check Balances" icon="money-bill-transfer" iconType="duotone" href="/wallets/v0/guides/check-balances">
    Check the balance of a wallet.
  </Card>

  <Card title="Transfer Tokens" icon="coins" iconType="duotone" color="#1A5785" href="/wallets/v0/guides/transfer-tokens">
    Send tokens between wallets.
  </Card>

  <Card title="Operational Signers" icon="key" iconType="duotone" color="#2156B9" href="/wallets/v0/guides/signers/registering-a-signer">
    Register operational signers on a wallet.
  </Card>
</CardGroup>

## Other Links

<CardGroup cols={2}>
  <Card title="API Reference" icon="terminal" color="#B56710" href="/api-reference/wallets/create-wallet">
    Deep dive into API reference docs.
  </Card>

  <Card title="Talk to an expert" icon="message" iconType="duotone" color="#ADD8E6" href="https://www.crossmint.com/contact/sales">
    Contact our sales team for support.
  </Card>
</CardGroup>