Skip to main content

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.
1

Install the SDK

Run the following command to install the SDK:
npm i @crossmint/client-sdk-react-ui
2

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

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, we strongly recommend migrating to your own authentication provider for full control over user management.
When you’re 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 to integrate it with Crossmint via JWT.
  2. Create a developer account on the production console.
  3. Create a production client API key on the API Keys page with the API scopes users.create, users.read, wallets.read.
  4. Configure JWT authentication for your auth provider in the Crossmint Console.

​
Next steps