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 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, getDefaultConfig, RecoveryMethod, ThirdPartyOAuthProvider } from "@openfort/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider, createConfig } from "wagmi";
import { polygonAmoy, baseSepolia } from "viem/chains";
 
// Your third-party auth provider's import
import { auth: firebaseAuth } from "./lib/firebase";  
 
const config = createConfig(
  getDefaultConfig({
    appName: "Openfort demo",
    chains: [polygonAmoy, baseSepolia], // add you supported chains here
    ssr: true,
  }),
);
 
const queryClient = new QueryClient();
 
export function Providers({ children }: { children: React.ReactNode }) {
 
  // Firebase's specific getAccessToken function
  const firebaseGetAccessToken = async () => { 
    const token = await firebaseAuth.currentUser?.getIdToken(/* forceRefresh */ false); 
    return token ?? null; 
  } 
 
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <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>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

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"
import { auth: firebaseAuth } from "./lib/firebase";
 
export default function MainApp() {
  const { getAccessToken } = useUser()  
  const { signOut: signOutOpenfort } = useSignOut()  
 
  // Sync Firebase's authentication state with Openfort's
  useEffect(() => {  
    firebaseAuth.onAuthStateChanged(user => {  
      if (user) {  
        getAccessToken();  
      } else {  
        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