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,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-ui";

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <CrossmintProvider apiKey="<crossmint-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?.userId}</p>
      <p>Email: {user?.email ?? "None"}</p>
      <p>Phone Number: {user?.phoneNumber ?? "None"}</p>
      <p>Farcaster username: {user?.farcaster?.username ?? "None"}</p>
      <p>Google display name: {user?.google?.displayName ?? "None"}</p>
      <p>JWT: {jwt}</p>
    </div>
  );
}

​
Launching in Production

For production, the steps are almost identical, but some changes are required:

  1. Create a developer account on the production console
  2. Create a production client API key on the API Keys page with the API scopes users.create, users.read, wallets.read
  3. Replace your test API key with the production key

​
Next steps