Skip to main content
  1. CrossmintProvider — SDK initialization (required for all Crossmint features)
  2. CrossmintAuthProvider — Authentication state, login/logout, and the auth modal

​
CrossmintProvider

​
Props

​
apiKey
string
required
Your Crossmint client-side API key.
​
appId
string
Application identifier, sent as x-app-identifier header.
​
consoleLogLevel
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.
​
extensionId
string
Extension identifier, sent as x-extension-id header.
​
jwt
string
JWT token for authentication.
​
overrideBaseUrl
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

​
appearance
UIConfig
Custom UI configuration for the auth modal (colors, fonts, border radius).
​
authModalTitle
string
Custom title for the auth modal.
​
loginMethods
LoginMethod[]
Login methods to enable (e.g. ["email", "google"]). Defaults to ["email", "google"].
​
logoutRoute
string
Custom route for logging out, for server-side session management.
​
onLoginSuccess
() => void
Callback invoked when the user successfully logs in.
​
prefetchOAuthUrls
boolean
Whether to prefetch OAuth provider URLs when the provider mounts. Defaults to true.
​
refreshRoute
string
Custom route for refreshing the auth token, for server-side session management.
​
storageProvider
StorageProvider
Custom storage provider for auth material. Defaults to browser cookies on web and secure device storage on React Native.
​
termsOfServiceText
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>
    );
}