Providers

CrossmintProvider — SDK initialization (required for all Crossmint features)
CrossmintAuthProvider — Authentication state, login/logout, and the auth modal

CrossmintProvider

Props

string

required

Your Crossmint client-side API key.

string

Application identifier, sent as x-app-identifier header.

ConsoleLogLevel

Minimum log level for console output (or “silent” to suppress all output). Logs below this level will not be written to the console. Set to “silent” to completely suppress console output. Defaults to “debug” (all logs shown) for backward compatibility.

string

Extension identifier, sent as x-extension-id header.

string

JWT token for authentication.

string

Override the base API URL.

Usage

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

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            {/* Your app content */}
        </CrossmintProvider>
    );
}

CrossmintAuthProvider

Provides Crossmint authentication to your app: email OTP, social login (OAuth), and session management. Exposes auth state via the useCrossmintAuth hook and renders the login modal when login() is called. Must be nested inside CrossmintProvider.

Props

UIConfig

Custom UI configuration for the auth modal (colors, fonts, border radius).

Show properties

string

UiConfigColors

Show properties

string

UiConfigFonts

Show properties

string

required

string

"normal" | "italic" | "oblique"

string

boolean

string

Custom title for the auth modal.

string

Custom route for logging out, for server-side session management.

Callback invoked when the user successfully logs in.

boolean

Whether to prefetch OAuth provider URLs when the provider mounts. Defaults to true.

string

Custom route for refreshing the auth token, for server-side session management.

StorageProvider

Custom storage provider for auth material. Defaults to browser cookies on web and secure device storage on React Native.

ReactNode

Custom terms of service text shown in the auth modal.

Usage

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

function App() {
    return (
        <CrossmintAuthProvider
            loginMethods={["email", "google"]}
            onLoginSuccess={() => console.log("Logged in!")}
            authModalTitle="Sign in to My App"
        >
            {/* Your app content */}
        </CrossmintAuthProvider>
    );
}

Introduction

User Identity

User Authentication

API Reference

CrossmintProvider

Props

Usage

CrossmintAuthProvider

Props

Usage

​CrossmintProvider

​Props

​Usage

​CrossmintAuthProvider

​Props

​Usage

CrossmintProvider

Props

Usage

CrossmintAuthProvider

Props

Usage