# Components

React components for managing authentication state and SDK configuration in React Native applications.

## Available Components

| Component | Description |
|-----------|-------------|
| [`OpenfortProvider`](/docs/products/embedded-wallet/react-native#wrap-your-app-with-openfortprovider) | Root provider that initializes the SDK |
| [`AuthBoundary`](/docs/products/embedded-wallet/react-native/components/auth-boundary) | Declarative component for auth-based rendering |

## OpenfortProvider

The root provider that must wrap your entire application. It initializes the Openfort SDK and provides context to all child components.

```tsx
import { OpenfortProvider } from '@openfort/react-native';

function App() {
  return (
    <OpenfortProvider
      publishableKey="YOUR_PUBLISHABLE_KEY"
      walletConfig={{
        shieldPublishableKey: "YOUR_SHIELD_KEY",
        createEncryptedSessionEndpoint: "https://your-backend.com/api/encryption-session"
      }}
    >
      {/* Your app content */}
    </OpenfortProvider>
  );
}
```

### Props

```ts
type OpenfortProviderProps = {
  /** Your Openfort publishable key */
  publishableKey: string
  /** Children components */
  children: React.ReactNode
  /** Supported blockchain chains (WAGMI-compatible format, at least one required if set) */
  supportedChains?: [Chain, ...Chain[]]
  /** Embedded wallet configuration */
  walletConfig?: EmbeddedWalletConfiguration
  /** Advanced SDK overrides */
  overrides?: SDKOverrides
  /** Third-party authentication provider configuration */
  thirdPartyAuth?: ThirdPartyAuthConfiguration
  /** Enable verbose logging */
  verbose?: boolean
}
```

### Wallet Configuration

```ts
type EmbeddedWalletConfiguration = {
  /** Shield API publishable key (required for embedded wallets) */
  shieldPublishableKey: string
  /** Fee sponsorship ID (single string or per-chain mapping) */
  feeSponsorshipId?: string | Record<number, string>
  /** Account type: SMART_ACCOUNT or EOA */
  accountType?: AccountTypeEnum
  /** Enable Shield debug mode */
  debug?: boolean
  /** Default recovery method */
  recoveryMethod?: 'automatic' | 'password' | 'passkey'
  /** Passkey Relying Party ID (domain) — required for passkey recovery */
  passkeyRpId?: string
  /** Passkey Relying Party Name — required for passkey recovery */
  passkeyRpName?: string
  /** Display name for passkey credential dialogs */
  passkeyDisplayName?: string
} & EncryptionSession

// Provide one of these — they are mutually exclusive:
type EncryptionSession =
  | { getEncryptionSession?: (params?: EncryptionSessionParams) => Promise<string>; createEncryptedSessionEndpoint?: never }
  | { createEncryptedSessionEndpoint?: string; getEncryptionSession?: never }


type EncryptionSessionParams = {
  /** OTP code for Shield verification (if required) */
  otpCode?: string
  /** User ID for the encryption session */
  userId?: string
}
```

### Chain Configuration

Chains use a WAGMI-compatible format:

```ts
type Chain = {
  id: number                    // Chain ID
  name: string                  // Human readable name
  network?: string              // Internal network name
  nativeCurrency: {
    name: string
    symbol: string              // 2-6 characters
    decimals: number
  }
  blockExplorers?: {
    [key: string]: { name: string; url: string }
    default: { name: string; url: string }
  }
  rpcUrls: {
    [key: string]: { http: string[]; webSocket?: string[] }
    default: { http: string[]; webSocket?: string[] }
  }
  testnet?: boolean
}
```

## AuthBoundary

A declarative component that renders different content based on authentication state. See the [AuthBoundary documentation](/docs/products/embedded-wallet/react-native/components/auth-boundary) for full details.

```tsx
import { AuthBoundary } from '@openfort/react-native';

<AuthBoundary
  loading={<LoadingScreen />}
  unauthenticated={<LoginScreen />}
  error={(error) => <ErrorScreen error={error} />}
>
  <AuthenticatedApp />
</AuthBoundary>
```