Build with React Native

Get started with Openfort in your React Native project

1. Install Required Dependencies#

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

Terminal

# Install Openfort React Native SDK
yarn add @openfort/react-native
# Install required dependencies
yarn add buffer react-native-crypto react-native-get-random-values react-native-randombytes stream-browserify react-native-mmkv

2. 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');
module.exports = (() => {
  const config = getDefaultConfig(__dirname);
  // Add shims for Node.js modules
  config.resolver.extraNodeModules = {
    crypto: require.resolve('react-native-crypto'),
    stream: require.resolve('stream-browserify'),
    buffer: require.resolve('buffer'),
  };
  return config;
})();

3. Set up auth providers#

Navigate to the auth providers page on the Openfort dashboard by selecting your project and clicking Auth Providers Methods in the side bar in the players page. Select the account types you'd like users to be able to login with.

4. Get your Openfort keys#

From the Openfort Dashboard, select your desired app and navigate to the developers page. You'll need:

Publishable Key: Safe to expose in client-side environment
Secret Key: Must be kept secure and used only server-side
Shield Keys: Required for non-custodial wallets
- Create Shield keys in the Shield section
- Securely store the encryption share shown in the one-time popup
- You'll get both a Publishable and Secret Shield key

5. Configure your app#

Import Polyfills#

First, import the Openfort React Native polyfills at the top of your app:

import "@openfort/react-native/polyfills";

Set up the WebView#

Add the Openfort Communication WebView to your app's root layout:

// app/_layout.tsx
import { OpenfortCommunicationWebView } from '@openfort/react-native';
export default function RootLayout() {
  return (
    <>
      <OpenfortCommunicationWebView />
      <Slot />
    </>
  );
}

Initialize Openfort#

Configure the Openfort SDK with your keys:

import Openfort from "@openfort/react-native";
const openfort = new Openfort({
  baseConfiguration: {
    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
  },
  shieldConfiguration: {
    shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
  }
});

Important

Because we use mmkv storage, expo-go will not work. Use expo run:ios or expo run:android to run your app.

Next Steps#

Now that you've configured your app, you can use openfort throughout to access the Openfort SDK. Check out our starter repo to see a complete integration.