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

> Sign up your first user in 5 minutes with React

<Snippet file="auth-staging-note.mdx" />

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

  <Card title="Auth with Wallets Quickstart" icon="github" iconType="duotone" href="https://github.com/Crossmint/wallets-quickstart">
    See a full working example with auth and wallets.
  </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.

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

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

      export function Providers({ children }: { children: React.ReactNode }) {
          return (
              <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
                  <CrossmintAuthProvider>
                      {children}
                  </CrossmintAuthProvider>
              </CrossmintProvider>
          );
      }
      ```
    </CodeGroup>
  </Step>

  <Step title="Add login and logout functionality">
    <CodeGroup>
      ```tsx next.js theme={null}
      "use client";

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

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

        return (
          <div className="flex gap-4">
            {user == null ? (
              <button
                type="button"
                onClick={login}
                className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
              >
                Login
              </button>
            ) : (
              <button
                type="button"
                onClick={logout}
                className="bg-black text-white font-bold py-2 px-4 rounded border-2 border-blue-500"
              >
                Logout
              </button>
            )}
            <p>User: {user?.id}</p>
            <p>Email: {user?.email ?? "None"}</p>
            <p>Phone Number: {user?.phoneNumber ?? "None"}</p>
            <p>Farcaster username: {user?.farcaster?.username ?? "None"}</p>
            <p>Twitter username: {user?.twitter?.username ?? "None"}</p>
            <p>JWT: {jwt}</p>
          </div>
        );
      }
      ```
    </CodeGroup>
  </Step>
</Steps>

## Moving to Production

<Warning>
  **Crossmint Auth is designed for staging and getting started quickly.** For production applications, Crossmint strongly recommends migrating to your own authentication provider for full control over user management.
</Warning>

When you are ready to go to production, Crossmint recommends:

1. **Set up your own auth provider** (Auth0, Firebase, Supabase, Stytch, etc.) and follow the [Bring Your Own Auth guide](/wallets/guides/bring-your-own-auth) to integrate it with Crossmint via JWT.
2. Create a developer account on the <a href="https://www.crossmint.com/console" target="_blank">production console</a>.
3. Create a production client API key on the <a href="https://www.crossmint.com/console/projects/apiKeys" target="_blank">API Keys</a> page with the API scopes `users.create`, `users.read`, `wallets.read`.
4. [Configure JWT authentication](/introduction/platform/api-keys/jwt-authentication) for your auth provider in the Crossmint Console.

## Next Steps

<CardGroup cols={3}>
  <Card title="Bring Your Own Auth" icon="key" href="/wallets/guides/bring-your-own-auth">
    Recommended for production — integrate your own auth provider via JWT
  </Card>

  <Card title="Webhooks" icon="bell" href="/authentication/webhooks">
    Get notified when a user signs up or updates their profile
  </Card>

  <Card title="Create Smart Wallets" icon="wallet" href="/wallets/quickstarts/react">
    Provision wallets automatically when users sign up
  </Card>
</CardGroup>