> ## 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.

# Providers

> React context providers for React SDK reference for Crossmint authentication

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

## CrossmintProvider

### Props

<ResponseField name="apiKey" type="string" required>
  Your Crossmint client-side API key.
</ResponseField>

<ResponseField name="appId" type="string">
  Application identifier, sent as `x-app-identifier` header.
</ResponseField>

<ResponseField name="consoleLogLevel" type="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.
</ResponseField>

<ResponseField name="extensionId" type="string">
  Extension identifier, sent as `x-extension-id` header.
</ResponseField>

<ResponseField name="jwt" type="string">
  JWT token for authentication.
</ResponseField>

<ResponseField name="overrideBaseUrl" type="string">
  Override the base API URL.
</ResponseField>

### Usage

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

<ResponseField name="appearance" type="UIConfig">
  Custom UI configuration for the auth modal (colors, fonts, border radius).

  <Expandable title="properties">
    <ResponseField name="borderRadius" type="string" />

    <ResponseField name="colors" type="UiConfigColors">
      <Expandable title="properties">
        <ResponseField name="accent" type="string" />

        <ResponseField name="background" type="string" />

        <ResponseField name="backgroundSecondary" type="string" />

        <ResponseField name="backgroundTertiary" type="string" />

        <ResponseField name="border" type="string" />

        <ResponseField name="buttonBackground" type="string" />

        <ResponseField name="danger" type="string" />

        <ResponseField name="inputBackground" type="string" />

        <ResponseField name="textLink" type="string" />

        <ResponseField name="textPrimary" type="string" />

        <ResponseField name="textSecondary" type="string" />
      </Expandable>
    </ResponseField>

    <ResponseField name="fonts" type="UiConfigFonts">
      <Expandable title="properties">
        <ResponseField name="cssSrc" type="string" />

        <ResponseField name="family" type="string" required />

        <ResponseField name="display" type="string" />

        <ResponseField name="src" type="string" />

        <ResponseField name="style" type="&#x22;normal&#x22; | &#x22;italic&#x22; | &#x22;oblique&#x22;" />

        <ResponseField name="weight" type="string" />
      </Expandable>
    </ResponseField>

    <ResponseField name="fontSizeBase" type="string" />

    <ResponseField name="fontWeightPrimary" type="string" />

    <ResponseField name="fontWeightSecondary" type="string" />

    <ResponseField name="hideCardForm" type="boolean" />

    <ResponseField name="spacingUnit" type="string" />
  </Expandable>
</ResponseField>

<ResponseField name="authModalTitle" type="string">
  Custom title for the auth modal.
</ResponseField>

<ResponseField name="loginMethods" type="LoginMethod[]">
  Login methods to enable (e.g. `["email", "google"]`). Defaults to `["email", "google"]`.
</ResponseField>

<ResponseField name="logoutRoute" type="string">
  Custom route for logging out, for server-side session management.
</ResponseField>

<ResponseField name="onLoginSuccess" type="() => void">
  Callback invoked when the user successfully logs in.
</ResponseField>

<ResponseField name="prefetchOAuthUrls" type="boolean">
  Whether to prefetch OAuth provider URLs when the provider mounts. Defaults to `true`.
</ResponseField>

<ResponseField name="refreshRoute" type="string">
  Custom route for refreshing the auth token, for server-side session management.
</ResponseField>

<ResponseField name="storageProvider" type="StorageProvider">
  Custom storage provider for auth material. Defaults to browser cookies on web and secure device storage on React Native.
</ResponseField>

<ResponseField name="termsOfServiceText" type="ReactNode">
  Custom terms of service text shown in the auth modal.
</ResponseField>

### Usage

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