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

<Warning>
  **You are viewing docs for the previous version of the Wallets SDK.** We recommend upgrading to V1.
  See the [updated version of this page](/sdk-reference/wallets/react/providers) or the [V1 migration guide](/wallets/guides/migrate-to-v1).
</Warning>

1. `CrossmintProvider` — SDK initialization (required for all Crossmint features)
2. `CrossmintWalletProvider` — Wallet creation and management

***

## 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>
    );
}
```

***

## CrossmintWalletProvider

### Props

<ResponseField name="appearance" type="UIConfig">
  Appearance configuration for wallet UI components.
</ResponseField>

<ResponseField name="callbacks" type="{ onTransactionStart?: () => Promise<void>; onWalletCreationStart?: () => Promise<void> }">
  Lifecycle callbacks for wallet creation and transaction events.
</ResponseField>

<ResponseField name="createOnLogin" type="CreateOnLogin">
  Configuration for automatic wallet creation on login.

  <Expandable title="properties">
    <ResponseField name="chain" type="Chain" required>
      The blockchain to create the wallet on (e.g. "base-sepolia").
    </ResponseField>

    <ResponseField name="signer" type="SignerConfigForChain" required>
      The signer configuration (e.g. `{ type: "email" }`).
    </ResponseField>

    <ResponseField name="owner" type="string">
      Optional owner identifier.
    </ResponseField>

    <ResponseField name="alias" type="string">
      Optional wallet alias.
    </ResponseField>

    <ResponseField name="plugins" type="WalletPlugin[]">
      Optional array of wallet plugins.
    </ResponseField>

    <ResponseField name="delegatedSigners" type="DelegatedSigner[]">
      Optional array of delegated signers.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="showPasskeyHelpers" type="boolean">
  Whether to show passkey helper UI. Default: true.
</ResponseField>

### Usage

```tsx theme={null}
import {
    CrossmintProvider,
    CrossmintWalletProvider,
} from "@crossmint/client-sdk-react-ui";

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintWalletProvider
                createOnLogin={{
                    chain: "base-sepolia",
                    signer: { type: "email" },
                }}
            >
                {/* Your app content */}
            </CrossmintWalletProvider>
        </CrossmintProvider>
    );
}
```

> **Note:** CrossmintWalletProvider must be nested inside CrossmintProvider.