Components

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

Available Components

Component	Description
`OpenfortProvider`	Root provider that initializes the SDK
`AuthBoundary`	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.

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

type OpenfortProviderProps = {
  /** Your Openfort publishable key */
  publishableKey: string
  /** Children components */
  children: React.ReactNode
  /** Supported blockchain chains (WAGMI-compatible format) */
  supportedChains?: 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

type EmbeddedWalletConfiguration = {
  /** Shield API publishable key (required for embedded wallets) */
  shieldPublishableKey: string
  /** Policy ID for Ethereum provider (single string or per-chain mapping) */
  ethereumProviderPolicyId?: string | Record<number, string>
  /** Account type: SMART_ACCOUNT or EOA */
  accountType?: AccountTypeEnum
  /** Enable Shield debug mode */
  debug?: boolean
  /** Default recovery method: 'automatic' or 'password' */
  recoveryMethod?: 'automatic' | 'password'
  // Plus one of:
  /** Function to retrieve encryption session */
  getEncryptionSession?: (params?: EncryptionSessionParams) => Promise<string>
  // OR
  /** API endpoint for creating encryption session */
  createEncryptedSessionEndpoint?: string
}
 
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:

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 for full details.

import { AuthBoundary } from '@openfort/react-native';
 
<AuthBoundary
  loading={<LoadingScreen />}
  unauthenticated={<LoginScreen />}
  error={(error) => <ErrorScreen error={error} />}
>
  <AuthenticatedApp />
</AuthBoundary>