# Using Your Own Authentication

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

:::warning\[No UI Components with Third-Party Auth]
When using third-party authentication (Firebase, Supabase, etc.), you must handle your own login UI. Openfort's built-in UI components (like `OpenfortButton`) and the `uiConfig` settings in `OpenfortProvider` do not apply—they are designed for Openfort's native authentication methods only.
:::

## Ready-Made Quickstarts

Get started quickly with complete working examples that integrate third-party authentication:

* [Quickstart w/ Firebase](https://github.com/openfort-xyz/openfort-react/tree/main/examples/quickstarts/firebase#firebase-quickstart) – Complete Firebase integration example
* [Quickstart w/ Supabase](https://github.com/openfort-xyz/openfort-react/tree/main/examples/quickstarts/supabase#supabase-quickstart) – Complete Supabase integration example
* [Quickstart w/ Better Auth](https://github.com/openfort-xyz/openfort-react/tree/main/examples/quickstarts/betterauth#better-auth-quickstart) – Complete Better Auth integration example

## Supported Providers

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

| Provider | Configuration |
|----------|---------------|
| [**Firebase**](/docs/configuration/external-auth/firebase) | `ThirdPartyOAuthProvider.FIREBASE` |
| [**Better-Auth**](/docs/configuration/external-auth/better-auth) | `ThirdPartyOAuthProvider.BETTER_AUTH` |
| [**Supabase**](/docs/configuration/external-auth/supabase) | `ThirdPartyOAuthProvider.SUPABASE` |
| [**PlayFab**](/docs/configuration/external-auth/playfab) | `ThirdPartyOAuthProvider.PLAYFAB` |
| [**AccelByte**](/docs/configuration/external-auth/accelbyte) | `ThirdPartyOAuthProvider.ACCELBYTE` |
| [**LootLocker**](/docs/configuration/external-auth/lootlocker) | `ThirdPartyOAuthProvider.LOOTLOCKER` |
| [**Custom OIDC**](/docs/configuration/custom-auth/oidc-token) | `ThirdPartyOAuthProvider.OIDC` |
| [**Custom Auth**](/docs/configuration/custom-auth/auth-token) | `ThirdPartyOAuthProvider.CUSTOM` |

## Setup Steps

### 1. Configure Your Provider in the Dashboard

Before integrating, configure your authentication provider in the [Openfort Dashboard → Providers](https://dashboard.openfort.io/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 →](/docs/configuration/external-auth)

### 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:

```tsx [Providers.tsx]
import React from "react"
import { OpenfortProvider, RecoveryMethod, ThirdPartyOAuthProvider } from "@openfort/react"
import { auth as firebaseAuth } from "./lib/firebase"

export function Providers({ children }: { children: React.ReactNode }) {
  const firebaseGetAccessToken = async () => {
    const token = await firebaseAuth.currentUser?.getIdToken(false)
    return token ?? null
  }

  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      thirdPartyAuth={{ // [!code focus]
        provider: ThirdPartyOAuthProvider.FIREBASE, // [!code focus]
        getAccessToken: firebaseGetAccessToken, // [!code focus]
      }} // [!code focus]
      walletConfig={{ // [!code focus]
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY", // [!code focus]
        ethereum: { chainId: 84532 }, // [!code focus]
        solana: { cluster: "devnet" }, // [!code focus]
      }} // [!code focus]
      uiConfig={{
        walletRecovery: { defaultMethod: RecoveryMethod.PASSKEY },
      }}
    >
      {children}
    </OpenfortProvider>
  )
}
```

```tsx [App.tsx]
import { Providers } from "./Providers"
import MainApp from "./MainApp"

export default function App() {
  return (
    <Providers>
      <MainApp />
    </Providers>
  )
}
```

:::info
Need external wallet support alongside third-party auth? See [useWalletAuth](/docs/products/embedded-wallet/react/hooks/useWalletAuth) for adding wagmi.
:::

### 3. Sync Authentication State

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

```tsx [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()  // [!code focus]
  const { signOut: signOutOpenfort } = useSignOut()  // [!code focus]

  // Sync Firebase's authentication state with Openfort's [!code focus]
  useEffect(() => {  // [!code focus]
    firebaseAuth.onAuthStateChanged(user => {  // [!code focus]
      if (user) {  // [!code focus]
        getAccessToken();  // [!code focus]
      } else {  // [!code focus]
        signOutOpenfort();  // [!code focus]
      }  // [!code focus]
    });  // [!code focus]
  }, []);  // [!code focus]

  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** (Ethereum or Solana, depending on your provider configuration) 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:

* [Firebase Setup](/docs/configuration/external-auth/firebase)
* [Supabase Setup](/docs/configuration/external-auth/supabase)
* [Better-Auth Setup](/docs/configuration/external-auth/better-auth)
* [PlayFab Setup](/docs/configuration/external-auth/playfab)
* [AccelByte Setup](/docs/configuration/external-auth/accelbyte)
* [LootLocker Setup](/docs/configuration/external-auth/lootlocker)
* [Custom OIDC Setup](/docs/configuration/custom-auth/oidc-token) (for Auth0, Cognito, etc.)
* [Custom Auth Server Setup](/docs/configuration/custom-auth/auth-token)