How to Add Openfort's Embedded Wallet to Your React Native App

•

4 min read

How to Add Openfort's Embedded Wallet to Your React Native App

So you want to add a wallet to your mobile app? Openfort's embedded wallet lets you do exactly that. Your users get secure, non-custodial wallets right inside your app, and you control how everything looks and works.

Here's how to set it up in React Native.

You can find the full docs and support at Openfort's embedded wallet docs

What You Need First

Before we start, make sure you have:

  • Some React Native and JavaScript/TypeScript knowledge
  • Node.js v20 or higher
  • Yarn or npm
  • Expo
  • An Openfort account (sign up at dashboard.openfort.xyz)

What We're Building

By the end of this, your app will have:

  • Wallets that create and manage themselves
  • Login flows you can customize (email, social, whatever you want)
  • Secure key management (Openfort handles the scary crypto stuff)
  • The ability to sign and send transactions

Step 1: Install the Packages

First, install the Openfort React Native SDK and everything it needs:


_10
# Get the main SDK
_10
yarn add @openfort/react-native
_10
_10
# And all these dependencies it needs
_10
yarn add buffer react-native-crypto react-native-get-random-values react-native-randombytes stream-browserify react-native-mmkv

Step 2: Fix Metro Config

React Native needs some help with Node.js modules. Update your metro.config.js:


_14
// metro.config.js
_14
const { getDefaultConfig } = require('expo/metro-config');
_14
_14
module.exports = (() => {
_14
const config = getDefaultConfig(__dirname);
_14
_14
config.resolver.extraNodeModules = {
_14
crypto: require.resolve('react-native-crypto'),
_14
stream: require.resolve('stream-browserify'),
_14
buffer: require.resolve('buffer'),
_14
};
_14
_14
return config;
_14
})();

Step 3: Get Your API Keys

Head over to dashboard.openfort.xyz and grab your keys:

  1. Go to the API Keys section
  2. You'll need your Publishable Key (for the client)
  3. And your Secret Key (if you're doing server stuff)

For embedded wallets, you also need Shield keys:

  • Go to the Shield section
  • Click "Create Shield keys"
  • Save that encryption share somewhere safe (you only see it once!)
  • Grab your Shield Publishable Key and Shield Secret Key

Step 4: Set Up Login Methods

In your Openfort dashboard:

  • Pick your project
  • Go to Auth Providers Methods (it's under "Players" in the sidebar)
  • Turn on whatever login methods you want (email, Google, etc.)

Step 5: Initialize Openfort

Create a file to set up the SDK (I usually call it openfort.ts):


_10
// openfort.ts
_10
import { Openfort } from '@openfort/react-native';
_10
_10
export const openfort = new Openfort({
_10
publishableKey: process.env.EXPO_PUBLIC_OPENFORT_PUBLIC_KEY!,
_10
shieldPublishableKey: process.env.EXPO_PUBLIC_SHIELD_PUBLISHABLE_KEY!,
_10
// Add other config stuff here if you need it
_10
});

Step 6: Create Wallets

Here's a basic example of how to create a wallet:


_23
// components/WalletManager.tsx
_23
import React, { useState } from 'react';
_23
import { Button, Text, View } from 'react-native';
_23
import { openfort } from '../openfort';
_23
_23
export default function WalletManager() {
_23
const [address, setAddress] = useState<string | null>(null);
_23
_23
const handleCreateWallet = async () => {
_23
// This creates a wallet for your user
_23
const wallet = await openfort.createEmbeddedWallet({
_23
// You can pass user info or auth tokens here
_23
});
_23
setAddress(wallet.address);
_23
};
_23
_23
return (
_23
<View>
_23
<Button title="Create Wallet" onPress={handleCreateWallet} />
_23
{address && <Text>Wallet Address: {address}</Text>}
_23
</View>
_23
);
_23
}

Step 7: Sign Stuff and Send Transactions

Once you have a wallet, you can sign messages:


_10
// Sign a message like this
_10
const signature = await openfort.signMessage({
_10
message: 'Hello, Openfort!',
_10
walletAddress: address,
_10
});

Step 8: Keep Things Secure

Openfort uses something called Shamir's Secret Sharing to keep keys safe. For real apps, make sure you:

  • Store the device share securely (use react-native-mmkv)
  • Set up recovery flows with Shield and recovery shares

Step 9: Make It Look Good

Since you're not using Openfort Kit, you get to design everything yourself. Build your own login screens, wallet UI, and transaction flows however you want.

What's Next?

Now that you have the basics working, you can:

  • Add more ways to log in (social media, OAuth, whatever)
  • Build protected screens that only wallet users can see
  • Add wallet features (check balance, send money, receive payments)
  • Set up account recovery and backup

That's it! You now have embedded wallets in your React Native app. The users get secure wallets, and you get full control over how everything works.

Share this article