Skip to main content

​
Latest React SDK version - npm

The Crossmint React SDK (@crossmint/client-sdk-react-ui) provides React components and hooks for integrating Crossmint authentication into your application, including email OTP, social login (OAuth), and session management.

​
Installation

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

​
Provider Setup

Wrap your application with the required providers: 
import {
    CrossmintProvider,
    CrossmintAuthProvider,
} from "@crossmint/client-sdk-react-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintAuthProvider loginMethods={["email", "google"]}>
                {/* Your app content */}
            </CrossmintAuthProvider>
        </CrossmintProvider>
    );
}
Note: CrossmintAuthProvider must be nested inside CrossmintProvider.

​
Quick Example

Once providers are set up, use the useCrossmintAuth hook to access auth state: 
import { useCrossmintAuth } from "@crossmint/client-sdk-react-ui";

function AuthButton() {
    const { login, logout, user, status } = useCrossmintAuth();

    if (status === "logged-in") {
        return (
            <div>
                <p>Welcome, {user?.email}</p>
                <button onClick={logout}>Logout</button>
            </div>
        );
    }

    return <button onClick={() => login()}>Sign In</button>;
}

​
Next Steps

  • Providers — Configure providers and their options
  • Hooks — Access SDK state via React hooks
  • Components — Drop-in UI components