Hooks Overview

Openfort Kit provides a suite of React hooks to simplify authentication, wallet management, and UI flows for web3 applications.
These hooks abstract complex logic and expose ergonomic APIs to help you build secure, user-friendly wallets and authentication flows.

Openfort playground

You can try out the Openfort Kit hooks in our Openfort playground.

Available Hooks

Below is a summary of the main hooks exposed by Openfort Kit:

Hook Name	Purpose & Usage
`useStatus`	Get current SDK connection status and flags (connected, loading, etc)
`useUser`	Access the current user object and refresh access tokens
`useProviders`	List available and linked authentication providers
`useWallets`	Manage wallets connected to the user, switch and export wallets
`useEmailAuth`	Email/password authentication flows (sign up, login, reset, link)
`useOAuth`	OAuth authentication and linking (Google, Facebook, Twitter, etc)
`useGuestAuth`	Guest user authentication for instant onboarding
`useAuthCallback`	Handles callback logic after OAuth or email verification flows
`useWalletAuth`	Wallet connection and SIWE authentication flows
`useSignOut`	Log out the user and disconnect wallet
`useUI`	UI modal control and navigation for wallet/auth flows

Common Patterns Across Hooks

Nearly all Openfort Kit hooks share some core design principles:

1. State Management

Hooks typically expose status flags to help you manage UI and side-effects:

isLoading: Operation in progress
isError: Last operation failed
isSuccess: Last operation completed successfully
error: Optional error object with details

This makes it easy to display loading spinners, error messages, and success notifications.

2. Async Actions

Most hooks return async functions for initiating authentication, connection, or UI changes:

e.g. signInEmail, connectWallet, signOut, verifyEmail

These are designed to be called from UI event handlers.

3. Callback Support

Many hooks accept or invoke callbacks for success/error handling, allowing you to customize flow or side effects.

import { useEmailAuth } from '@openfort/react';
 
function LoginForm() {
  const { signInEmail, isLoading, isError, error } = useEmailAuth({
    onSuccess: (user) => {
      console.log('Login successful:', user);
      // Redirect or update UI
    },
    onError: (err) => {
      console.error('Login failed:', err);
      // Show error message
    }
  });
 
  // ...
  const handleSignIn = async (email, password) => {
    signInEmail({
      email,
      password,
      // here you can also handle callbacks
      onError: (error) => {
        console.error("Error signing in:", error);
      },
      onSuccess: () => {
        console.log("Sign in successful");
      },
    })
  };
}

4. Response Handling

Most hooks return structured responses for more convenient access:

import { useEmailAuth } from '@openfort/react';
 
function LoginForm() {
  const { signInEmail } = useEmailAuth()
 
  const handleSignIn = async () => {
    // You can also handle the result based on the response of the hook
    const { error, user, wallet, requiresEmailVerification } 
      = await signInEmail({ email, password })
 
    if (error) {
      console.error("Error signing in:", error);
      // Handle error (e.g., show a message to the user)
      return;
    }
    // ...
  }
}

5. Separation of Concerns

Hooks divide responsibilities logically:

Authentication (useEmailAuth, useOAuth,useWalletAuth, useGuestAuth)
Wallet management (useWallets)
UI control (useUI)
State & status (useStatus, useAuthCallback)

Example of State Usage

import { useEmailAuth } from '@openfort/react';
 
function LoginForm() {
  const { signInEmail, isLoading, isError, error } = useEmailAuth();
 
  // Use isLoading to show spinner, isError to display error, etc.
}

Extensibility

Openfort Kit hooks are designed to be composable. You can integrate them with other state management, routing, or UI frameworks as needed.