Choose your Authentication Method

Openfort React supports multiple authentication methods. Pick the one that fits your UX and security requirements.

Prefer the prebuilt UI? Configure providers and flows in the dashboard, then follow the setup guide at Openfort UI Configuration.
Building a custom flow? The hooks below cover every scenario, and useAuthCallback simplifies OAuth and email verification callbacks.

Using Email Authentication

Use useEmailAuth for traditional email/password authentication. It covers sign up, login, password reset, and email linking.

import { useEmailAuth } from "@openfort/react"
 
function EmailLogin() {
  const { signInEmail, signUpEmail, isLoading } = useEmailAuth()
 
  const handleSignIn = async () => {
    const result = await signInEmail({
      email: "user@example.com",
      password: "password123",
    })
 
    if (result.requiresEmailVerification) {
      // Prompt the user to check their inbox for a verification code
    }
  }
 
  return (
    <button onClick={handleSignIn} disabled={isLoading}>
      Sign in
    </button>
  )
}

View full documentation →

Using Social Authentication

Use useOAuth for social login (Google, Facebook, Twitter, etc.) and account linking.

import { OAuthProvider, useOAuth } from "@openfort/react"
 
function SocialLogin() {
  const { initOAuth, isLoading } = useOAuth()
 
  const loginWithGoogle = () => initOAuth({ provider: OAuthProvider.GOOGLE })
 
  return (
    <button onClick={loginWithGoogle} disabled={isLoading}>
      Sign in with Google
    </button>
  )
}

View full documentation →

Using Wallet Authentication

Use useWalletAuth to connect external wallets (MetaMask, WalletConnect, etc.) with SIWE.

import { useWalletAuth } from "@openfort/react"
 
function WalletLogin({ walletAddress }: { walletAddress: string }) {
  const { generateSiweMessage, signInWithSiwe, isLoading } = useWalletAuth()
 
  const startLogin = async () => {
    const { message } = await generateSiweMessage({
      wallet: walletAddress,
      from: { domain: "example.com", uri: "https://example.com" },
    })
 
    if (!message) return
 
    const signature = await signMessageWithWallet(message)
    await signInWithSiwe({ walletAddress, signature, messageOverride: message })
  }
 
  return (
    <button onClick={startLogin} disabled={isLoading}>
      Connect wallet
    </button>
  )
}

View full documentation →

Using Guest Authentication

Use useGuestAuth for anonymous users and instant onboarding.

import { useGuestAuth } from "@openfort/react"
 
function GuestLogin() {
  const { signUpGuest, isLoading } = useGuestAuth()
 
  return (
    <button onClick={() => signUpGuest()} disabled={isLoading}>
      Continue as guest
    </button>
  )
}

View full documentation →

Using Your Own Authentication

Openfort integrates with external authentication providers like Firebase, Supabase, Auth0, and custom auth systems so you can keep your existing login flow while issuing embedded wallets for users.

View full documentation →