@crossmint/client-sdk-react-ui

@crossmint/client-sdk-react-ui

You can check the full documentation at docs.crossmint.com

If you're using React.js, or Next.js, Crossmint provides a client integration specific for you.

Quick Setup

First, add the Crossmint Client SDK to your project with the following command:

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

Add payment button to your site

Check our dedicated section for payments in the docs.

Crossmint Authentication

Check out our quickstart in the docs.

Key Components

We provide two essential React context providers:

• CrossmintProvider - Base provider for accessing Crossmint services
• CrossmintAuthProvider - Authentication context provider for your components
• CrossmintWalletProvider - Wallet context provider for your components, can be used to integrate with other auth providers. Visit Crossmint Signers Demo for complete implementation details and advanced features.

Supported Login Methods

• Email OTP: Passwordless sign-in using a one-time code
• Social Accounts: Sign in with Google, X, and more
• Farcaster: Using the Sign In With Farcaster (SIWF) standard
• Web3: Sign in with EOA wallet (limited support for now)

UI Options

• Modal Login: Popup interface for authentication
• Embedded Login: In-page authentication component
• Customization: Flexible UI styling and email template options

Visit our customization guide to learn more about styling options and email templates.

User Wallets

Check out our quickstart in the docs.

We provide two essential React hooks for integrating Crossmint wallets into your application:

useAuth

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

Manages authentication state and user sessions. Key features:

• status - Current auth state ("logged-in" | "logged-out" | "in-progress" | "initializing")
• user - Active user information
• jwt - Current user's JWT token
• getUser() - Retrieve current user information
• login() - Initiate user authentication
• logout() - End user session
• crossmintAuth - Access to the CrossmintAuth instance

useWallet

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

Handles wallet creation and management. Key features:

• status - Wallet state ("not-loaded" | "in-progress" | "loading-error" | "loaded")
• wallet - Access to the EVMSmartWallet instance
• type - Wallet type ("evm-smart-wallet" | "solana-smart-wallet")
• getOrCreateWallet() - Initialize or retrieve user's wallet
• clearWallet() - Reset wallet state
• createPasskeySigner() - Create a passkey signer for the wallet (not supported for Solana)

Visit our documentation for complete implementation details and advanced features.

Wallet UI Components

We offer two components to help you quickly get up and running with your project using Crossmint wallets:

• CrossmintNFTCollectionView - Display a grid of NFTs.

• CrossmintNFTDetail - Display a card showing all NFT related details.

Visit our documentation for integration instructions.

Examples

• Smart Wallets Demo (Next.js Starter Kit)

Environment Setup

• Create a .env file in the demo app directory:

cd apps/wallets/smart-wallet/next

• Add the following environment variable:

NEXT_PUBLIC_CROSSMINT_AUTH_SMART_WALLET_API_KEY=your_api_key_here

You can obtain a staging client-side API key from the Crossmint Console. For detailed instructions on getting an API key, see our documentation.

Running the Demo

• Build and start the demo application:

cd apps/wallets/smart-wallet/next
pnpm i
pnpm build
pnpm start

For more information on how to run the demo application, see the Smart Wallets Demo (Next.js Starter Kit) README.