React - Crossmint Docs

Crossmint Auth is designed for staging and moving fast. For production applications, Crossmint strongly recommends connecting your own authentication provider for full control over user management. See the Bring Your Own Auth guide.

Before you start

Set up your project and get an API key.

Auth with Wallets Quickstart

See a full working example with auth and wallets.

Install the SDK

Run the following command to install the SDK:

npm i @crossmint/client-sdk-react-ui

yarn add @crossmint/client-sdk-react-ui

pnpm add @crossmint/client-sdk-react-ui

bun add @crossmint/client-sdk-react-ui

Add the Crossmint providers to your app

Add the necessary Crossmint providers to your app.

"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>
    );
}

Add login and logout functionality

"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>
  );
}

Moving to Production

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.

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

Set up your own auth provider (Auth0, Firebase, Supabase, Stytch, etc.) and follow the Bring Your Own Auth guide to integrate it with Crossmint via JWT.
Create a developer account on the production console.
Create a production client API key on the API Keys page with the API scopes users.create, users.read, wallets.read.
Configure JWT authentication for your auth provider in the Crossmint Console.

Next Steps

Bring Your Own Auth

Recommended for production — integrate your own auth provider via JWT

Webhooks

Get notified when a user signs up or updates their profile

Create Smart Wallets

Provision wallets automatically when users sign up

Before you start

Auth with Wallets Quickstart

​Moving to Production

​Next Steps

Bring Your Own Auth

Webhooks

Create Smart Wallets

Moving to Production

Next Steps