Skip to content

Getting Started

Get started with react native authentication and seamless wallet experiences

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 expo-apple-authentication expo-application expo-crypto expo-secure-store react-native-get-random-values

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 an entrypoint.js file in your project root. This file is crucial for initializing the Openfort SDK and ensuring proper polyfill loading:

// entrypoint.js
 
// Import required polyfills first
// IMPORTANT: These polyfills must be installed in this order
import "react-native-get-random-values";
// Then import the expo router
import "expo-router/entry";

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

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

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 users page. Select the account types you'd like users to be able to login with.

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

Configure your app

Add the Safe area provider and hooks to your app's root layout:

// app/_layout.tsx
 
import { OpenfortProvider } from "@openfort/react-native";
 
export default function RootLayout() {
 
  return (
    {/* Your other providers */}
      <OpenfortProvider
        publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      >
        {/* Your app content */}
      </OpenfortProvider>
    {/* Your other providers */}
  );
}

Next Steps

Now that you've configured your app, you can use openfort throughout to access the Openfort SDK.

View sample

View out react native sample. A minimal installation of the Openfort SDK for React Native, using Expo.

View sample

React Native Sample