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

# React Native

> Create user wallets from your frontend in under 5 minutes

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

  <Card title="Expo Wallets Quickstart" icon="github" iconType="duotone" href="https://github.com/Crossmint/wallets-expo-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-native-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](/authentication/advanced/bring-your-own-auth).

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

    ```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: "solana",
                        }}
                    >
                    {children}
                    </CrossmintWalletProvider>
                </CrossmintAuthProvider>
            </CrossmintProvider>
        );
    }
    ```
  </Step>

  <Step title="Allow users to login and logout">
    Add a component to authenticate the user.

    ```tsx auth-button.tsx theme={null}
    "use client";

    import { useAuth } from "@crossmint/client-sdk-react-ui";

    export function AuthButton() {
        const { login, logout, jwt } = useAuth();

        return !jwt ? (
            <button type="button" onClick={login}>Login</button>
        ) : (
            <button type="button" onClick={logout}>Logout</button>
        );
    }
    ```
  </Step>

  <Step title="Use the wallet">
    Access and use the wallet object.

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

    import { useWallet } from "@crossmint/client-sdk-react-ui";

    export function Wallet() {
        const { wallet, status, error } = useWallet();

        if (status === "error") {
            return <div>Error: {error?.message}</div>;
        }

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

        if (status === "loaded" && wallet) {
            return <div>Connected: {wallet.address}</div>;
        }

        return <div>Wallet not connected</div>;
    }
    ```
  </Step>
</Steps>

## Launching in Production

For production, the steps are almost identical, but 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

## Launching in Production

For production, the steps are almost identical, but 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

## Learn More

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

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

  <Card title="Delegated Signers" icon="key" iconType="duotone" color="#2156B9" href="/wallets/wallet-actions/delegated-signers">
    Add delegated signers to 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>