Skip to content

Using Your Own Authentication

Openfort integrates with external authentication providers so you can keep your existing login while still issuing embedded wallets for users.

Supported Providers

Openfort has built-in support for these third-party authentication platforms:

ProviderConfiguration
FirebaseThirdPartyOAuthProvider.FIREBASE
SupabaseThirdPartyOAuthProvider.SUPABASE
PlayFabThirdPartyOAuthProvider.PLAYFAB
AccelByteThirdPartyOAuthProvider.ACCELBYTE
LootLockerThirdPartyOAuthProvider.LOOTLOCKER
Custom OIDCThirdPartyOAuthProvider.OIDC
Custom AuthThirdPartyOAuthProvider.CUSTOM

Setup Steps

1. Configure Your Provider in the Dashboard

Before integrating, configure your authentication provider in the Openfort Dashboard → Providers:

  • For built-in providers (Firebase, Supabase, etc.): Add your provider's Project ID or credentials
  • For OIDC providers (Auth0, Cognito, etc.): Provide your JWKS URL and audience (aud) value
  • For custom auth servers: Set up a verification endpoint and authentication headers

View detailed provider setup guides →

2. Set up the thirdPartyAuth prop in OpenfortProvider

Wrap your React Native app with OpenfortProvider and specify your authentication provider's getAccessToken function. Here's an example using Firebase:

Providers.tsx
import React from "react";
import { OpenfortProvider, RecoveryMethod, ThirdPartyOAuthProvider } from "@openfort/react-native";
 
// Firebase setup for React Native
import "@react-native-firebase/app"; 
import auth from "@react-native-firebase/auth"; 
 
export function Providers({ children }: { children: React.ReactNode }) {
 
  // Firebase's specific getAccessToken function
  const firebaseGetAccessToken = async () => { 
    const token = await auth().currentUser?.getIdToken(/* forceRefresh */ false); 
    return token ?? null; 
  }; 
 
  return (
    <OpenfortProvider
      publishableKey={"YOUR_OPENFORT_PUBLISHABLE_KEY"}
      
      thirdPartyAuth={{ 
        provider: ThirdPartyOAuthProvider.FIREBASE, // or OIDC, CUSTOM, etc.  
        getAccessToken: firebaseGetAccessToken,  
      }}
      
      walletConfig={{ 
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY", 
      }}
 
      uiConfig={{ 
        walletRecovery: { 
          defaultMethod: RecoveryMethod.PASSKEY, 
        }, 
      }}
    >
      {children}
    </OpenfortProvider>
  );
}

3. Sync Authentication State

In your main app, synchronize the third-party authentication state with Openfort's. Here's an example using Firebase:

MainApp.tsx
import { useEffect } from "react";
import { useUser, useSignOut } from "@openfort/react-native";
import auth from "@react-native-firebase/auth";
 
export default function MainApp() {
  const { getAccessToken } = useUser();  
  const { signOut: signOutOpenfort } = useSignOut();  
 
  // Sync Firebase's authentication state with Openfort's
  useEffect(() => {  
    auth().onAuthStateChanged(user => {  
      if (user) {  
        getAccessToken();  
      } else {  
        signOutOpenfort();  
      }  
    });  
  }, [getAccessToken, signOutOpenfort]);  
 
  return (
    <>
      {/* Your app content */}
    </>
  );
}

How It Works

  1. User authenticates with your provider (Firebase, Auth0, etc.)
  2. getAccessToken() is called – exchanges your provider's token for an Openfort session
  3. Openfort verifies the token and retrieves the user's session key
  4. An embedded wallet is linked to the user's identifier
  5. User can now sign transactions with their embedded wallet

Configuration Guides

For detailed setup instructions for each provider type: