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:
Provider | Configuration |
---|---|
Firebase | ThirdPartyOAuthProvider.FIREBASE |
Supabase | ThirdPartyOAuthProvider.SUPABASE |
PlayFab | ThirdPartyOAuthProvider.PLAYFAB |
AccelByte | ThirdPartyOAuthProvider.ACCELBYTE |
LootLocker | ThirdPartyOAuthProvider.LOOTLOCKER |
Custom OIDC | ThirdPartyOAuthProvider.OIDC |
Custom Auth | ThirdPartyOAuthProvider.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
- User authenticates with your provider (Firebase, Auth0, etc.)
getAccessToken()
is called – exchanges your provider's token for an Openfort session- Openfort verifies the token and retrieves the user's session key
- An embedded wallet is linked to the user's identifier
- User can now sign transactions with their embedded wallet
Configuration Guides
For detailed setup instructions for each provider type:
- Firebase Setup
- Supabase Setup
- PlayFab Setup
- AccelByte Setup
- LootLocker Setup
- Custom OIDC Setup (for Auth0, Cognito, etc.)
- Custom Auth Server Setup