> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Get Started

> Installation and setup for the React SDK reference for Crossmint authentication

### Latest React SDK version - <a href="https://www.npmjs.com/package/@crossmint/client-sdk-react-ui" target="_blank" rel="noopener" style={{display: "inline-block", verticalAlign: "middle", textDecoration: "none", borderBottom: "none"}}><img src="https://img.shields.io/npm/v/@crossmint/client-sdk-react-ui" alt="npm" style={{display: "inline-block", verticalAlign: "middle", margin: 0}} noZoom /></a>

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

<Snippet file="client-sdk-react-ui-installation-cmd.mdx" />

## Provider Setup

Wrap your application with the required providers:

```tsx theme={null}
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:

```tsx theme={null}
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](/sdk-reference/auth/react/providers) — Configure providers and their options
* [Hooks](/sdk-reference/auth/react/hooks) — Access SDK state via React hooks
* [Components](/sdk-reference/auth/react/components) — Drop-in UI components