Skip to content

Quickstart with Password recovery

Build a functional authentication and wallet sample app using the Openfort React Native SDK. This guide assumes you've completed the Getting Started guide and have your OpenfortProvider configured.

In this guide, we are going to help you set up your wallet recovery method to our Password method. These are our wallet recovery methods you can choose from:

Not sure what wallet recovery method you need? Don't miss our guide.

Get your Openfort keys

From this point on, you'll need an Openfort account to handle project keys and settings.

In the Openfort Dashboard, select your desired app and navigate to the API keys. There, you'll get the following keys:

Project keys: Required for any wallet.

KeyExposureDescription
Publishable keyPublic (client)Initialize the SDK (e.g., in OpenfortProvider).
Secret keySecret (server)Privileged backend actions (e.g., sessions, wallet management). Never bundle in the app or commit to git.

Shield Keys: Required for non-custodial wallets.

KeyExposureDescription
Encryption part (one-time)SecretServer-only key that encrypts/decrypts sensitive wallet data. Store in a key manager; if lost, data can't be recovered.
Publishable keyPublic (client)Public key the app uses to enable non‑custodial wallet features. Safe to include in client code.
Secret keySecret (server)Server-only key for sensitive wallet operations (e.g., starting encryption or recovery). Never ship in the app; store in a secret manager.

Get the Project Publishable Key and the Shield Publishable Key and save them for the configuration steps below. Save the secret keys safely for your backend.

Configure environment variables

# .env
# Publishable keys
OPENFORT_PROJECT_PUBLISHABLE_KEY=YOUR_PROJECT_PUBLISHABLE_KEY
OPENFORT_SHIELD_PUBLISHABLE_KEY=YOUR_SHIELD_PUBLISHABLE_KEY

Create app.config.js to manage your Openfort keys securely:

// app.config.js
export default {
  expo: {
    name: "openfort-sample",
    slug: "openfort-sample",
    version: "1.0.0",
    platforms: ["ios", "android"],
    extra: {
      openfortPublishableKey: process.env.OPENFORT_PROJECT_PUBLISHABLE_KEY || "YOUR_PROJECT_PUBLISHABLE_KEY",
      openfortShieldPublishableKey: process.env.OPENFORT_SHIELD_PUBLISHABLE_KEY || "YOUR_SHIELD_PUBLISHABLE_KEY",
    },
  },
};

Setting up your Openfort Provider

Replace your basic provider setup with a more comprehensive configuration:

With expo-router
// app/_layout.tsx
import { OpenfortProvider, RecoveryMethod } from "@openfort/react-native";
 
import Constants from "expo-constants";
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <OpenfortProvider
      publishableKey={Constants.expoConfig?.extra?.openfortPublishableKey}
      walletConfig={{
        debug: false,
        recoveryMethod: RecoveryMethod.PASSWORD, // or RecoveryMethod.AUTOMATIC
        ethereumProviderPolicyId: undefined, // replace with your gas sponsorship policy
        shieldPublishableKey: Constants.expoConfig?.extra?.openfortShieldPublishableKey,
      }}
      verbose={true}
      supportedChains={[
        {
          id: 84532,
          name: 'Base Sepolia',
          nativeCurrency: {
            name: 'Base Sepolia Ether',
            symbol: 'ETH',
            decimals: 18
          },
          rpcUrls: { default: { http: ['https://sepolia.base.org'] } },
        },
        {
          id: 11155111,
          name: 'Sepolia',
          nativeCurrency: {
            name: 'Sepolia Ether',
            symbol: 'ETH',
            decimals: 18
          },
          rpcUrls: { default: { http: ['https://ethereum-sepolia-rpc.publicnode.com'] } },
        },
      ]}
    >
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </OpenfortProvider>
  );
}

Create the login and user screens

Create the login component that handles multiple authentication methods and the user dashboard component that allows wallet creation and message signing:

components/LoginScreen.tsx
// components/LoginScreen.tsx
import { OAuthProvider, useGuestAuth, useOAuth } from "@openfort/react-native";
import { useEffect } from "react";
import { Button, Text, View, StyleSheet } from "react-native";
 
export default function LoginScreen() {
  const { signUpGuest } = useGuestAuth();
  const { initOAuth, error } = useOAuth();
 
  useEffect(() => {
    if (error) {
      console.error("Error logging in with OAuth:", error);
    }
  }, [error]);
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Openfort Expo Example</Text>
 
      <Button
        title="Login as Guest"
        onPress={() => signUpGuest()}
      />
 
      <View style={styles.providersContainer}>
        {["twitter", "google", "discord", "apple"].map((provider) => (
          <View key={provider}>
            <Button
              title={`Login with ${provider}`}
              onPress={async () => {
                try {
                  await initOAuth({ provider: provider as OAuthProvider });
                } catch (error) {
                  console.error("Error logging in with OAuth:", error);
                }
              }}
            />
          </View>
        ))}
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 10,
    marginHorizontal: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  providersContainer: {
    display: "flex",
    flexDirection: "column",
    gap: 5,
    margin: 10,
  },
});

Create your main app logic

Wire everything together with the main app component:

With expo-router
// app/index.tsx
import LoginScreen from '../components/LoginScreen';
import { UserScreen } from '../components/UserScreen';
import { useOpenfort } from '@openfort/react-native';
 
export default function Index() {
  const { user } = useOpenfort();
 
  if (user === null) {
    console.warn('Tried to fetch user from Openfort. The user is not authenticated yet.');
  } else {
    console.log('Fetched user from Openfort:', user);
  }
 
  return !user ? <LoginScreen /> : <UserScreen />;
}

Test your app

Run your app to test authentication, wallet creation, and message signing:

npm run android
# or
npm run ios

The app will show:

  1. Login Screen: Authentication options (guest, OAuth providers)
  2. User Dashboard: Simple wallet creation and message signing

Activate logging in with authentication providers

You will now see the option to login with various auth providers, these need to be set up in the Openfort Dashboard in order for them to work.

From the Openfort Dashboard, select your desired app and navigate to Configuration > Providers. Select the account types you'd like users to be able to login with: Email, Discord, Epic Games, Google, Apple and more.

Next steps

  • Add gas sponsorship policies for gasless transactions
  • Explore advanced wallet features in the React Native documentation
  • View our React Native sample app to see the full functionality of the SDK:
View sample

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

View sample

React Native Sample