Getting Started with React Native

Create your app (optional)

If you're starting from scratch, create a new React Native app with Expo. If you already have an app, skip this step.

Create a new Expo app

You can use Expo's create-expo-app to create a blank template Typescript app.

npx --yes create-expo-app@latest my-app --template tabs
cd my-app

Run the app

From your project directory, run one of:

npm run android
npm run ios

Install dependencies

Install the latest version of the Openfort React Native SDK and its required dependencies:

npx --yes expo install expo-router expo-apple-authentication expo-application expo-crypto expo-secure-store expo-constants
npm install react-native-get-random-values @openfort/react-native

Configure Metro

Create or update your metro.config.js to include the necessary Node.js module shims:

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
const resolveRequestWithPackageExports = (context, moduleName, platform) => {
  // Package exports in `jose` are incorrect, so we need to force the browser version
  if (moduleName === "jose") {
    const ctx = {
      ...context,
      unstable_conditionNames: ["browser"],
    };
    return ctx.resolveRequest(ctx, moduleName, platform);
  }
 
  return context.resolveRequest(context, moduleName, platform);
};
 
config.resolver.resolveRequest = resolveRequestWithPackageExports;
 
module.exports = config;

Set up entry point

Create entrypoint.ts. Ensure react-native-get-random-values is imported first. Without it, the library crypto does not load properly and causes an error.

// entrypoint.ts
import "react-native-get-random-values";
import "expo-router/entry";

Also, update your package.json to use the corresponding entry point:

{
  ...
  "main": "entrypoint.ts",
  ...
}

Wrap your app with OpenfortProvider

Add the provider at your root to initialize the SDK.

// app/_layout.tsx
import { OpenfortProvider } from "@openfort/react-native";
import { Slot } from "expo-router";
 
export default function RootLayout() {
 
  return (
    <>
      {/* Your other providers */}
        <OpenfortProvider
          publishableKey="YOUR_PROJECT_PUBLISHABLE_KEY"
          walletConfig={{
            shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
            createEncryptedSessionEndpoint: "https://your-backend.com/api/protected-create-encryption-session"
          }}
        >
          {/* Render nested routes */}
          <Slot />
        </OpenfortProvider>
      {/* Your other providers */}
    </>
  );
}

You can now start using Openfort!

Advance to this next guide to get the API keys and create your first wallet.

SDK Exports

The React Native SDK exports the following:

Export	Description
`OpenfortProvider`	Root provider component
`AuthBoundary`	Auth state-based rendering component
`useOpenfort`	SDK initialization state hook
`useOpenfortClient`	Direct access to Openfort client
`useUser`	Current user and access token hook
`useEmailAuth`	Email/password authentication hook
`useEmailAuthOtp`	Email OTP authentication hook
`usePhoneAuthOtp`	Phone OTP authentication hook
`useOAuth`	OAuth provider authentication hook
`useGuestAuth`	Guest authentication hook
`useWalletAuth`	SIWE wallet authentication hook
`useSignOut`	Sign out hook
`useEmbeddedEthereumWallet`	Ethereum wallet management hook
`useEmbeddedSolanaWallet`	Solana wallet management hook
`usePasskeySupport`	Check if device supports passkey recovery

Re-exported from `@openfort/openfort-js`

Export	Description
`OpenfortClient`	Core Openfort class (alias for `Openfort`)
`OpenfortEvents`	Event name enum
`openfortEvents`	Global event emitter
`OAuthProvider`	OAuth provider enum
`AccountTypeEnum`	Account type enum (SMART_ACCOUNT, EOA)
`ChainTypeEnum`	Chain type enum (EVM, SVM)
`EmbeddedState`	Embedded wallet state enum
`RecoveryMethod`	Recovery method enum (AUTOMATIC, PASSWORD, PASSKEY)
`RecoveryParams`	Recovery parameters type
`OpenfortError`	Base error class

For detailed component documentation, see the Components section.