useOpenfort

import { useOpenfort } from '@openfort/react';
 
function AdvancedComponent() {
  const { client, embeddedState, user, isLoading } = useOpenfort();
 
  // Access the underlying Openfort SDK client for advanced operations
  const handleAdvancedOperation = async () => {
    const accessToken = await client.getAccessToken();
    // Use the token for custom API calls
  };
 
  if (isLoading) return <div>Loading...</div>;
 
  return (
    <div>
      <p>Embedded State: {embeddedState}</p>
      <p>User ID: {user?.id}</p>
      <button onClick={handleAdvancedOperation}>
        Get Access Token
      </button>
    </div>
  );
}

type UseOpenfortReturn = {
  // The Openfort SDK client instance
  client: Openfort
  // Current embedded wallet state
  embeddedState: EmbeddedState
  // Whether the SDK is loading/initializing
  isLoading: boolean
  // Whether wallet recovery is needed
  needsRecovery: boolean
  // Current authenticated user
  user: User | null
  // Linked authentication accounts
  linkedAccounts: UserAccount[]
  // Embedded wallet accounts
  embeddedAccounts?: EmbeddedAccount[]
  // Whether embedded accounts are loading
  isLoadingAccounts: boolean
  // Sign out the current user
  logout(): void
  // Sign up as guest user
  signUpGuest(): Promise<void>
  // Update the user object
  updateUser(user?: User): Promise<User | null>
  // Refresh embedded accounts data
  updateEmbeddedAccounts(options?: RefetchOptions): Promise<QueryObserverResult<EmbeddedAccount[], Error>>
  // Current wallet flow status
  walletStatus: WalletFlowStatus
  // Update wallet flow status
  setWalletStatus(status: WalletFlowStatus): void
}
 
// Embedded wallet states
enum EmbeddedState {
  NONE = 'none',
  UNAUTHENTICATED = 'unauthenticated',
  EMBEDDED_SIGNER_NOT_CONFIGURED = 'embedded_signer_not_configured',
  CREATING_ACCOUNT = 'creating_account',
  READY = 'ready',
}
 
type WalletFlowStatus =
  | { status: 'idle'; error?: never }
  | { status: 'awaiting-input'; error?: never }
  | { status: 'loading'; error?: never }
  | { status: 'success'; error?: never }
  | { status: 'error'; error: OpenfortError | null }
  | { status: 'creating' | 'connecting'; address?: `0x${string}`; error?: never }

import { useOpenfort } from '@openfort/react';
 
function CustomApiExample() {
  const { client } = useOpenfort();
 
  const fetchUserData = async () => {
    const accessToken = await client.getAccessToken();
 
    const response = await fetch('https://your-api.com/user-data', {
      headers: {
        'Authorization': `Bearer ${accessToken}`,
      },
    });
 
    return response.json();
  };
 
  return <button onClick={fetchUserData}>Fetch Data</button>;
}

import { useOpenfort, EmbeddedState } from '@openfort/react';
 
function WalletStateChecker() {
  const { embeddedState, needsRecovery } = useOpenfort();
 
  const getStateMessage = () => {
    switch (embeddedState) {
      case EmbeddedState.NONE:
        return 'No wallet configured';
      case EmbeddedState.UNAUTHENTICATED:
        return 'Please sign in';
      case EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED:
        return 'Wallet signer not configured';
      case EmbeddedState.CREATING_ACCOUNT:
        return 'Creating wallet...';
      case EmbeddedState.READY:
        return needsRecovery ? 'Wallet needs recovery' : 'Wallet ready';
      default:
        return 'Unknown state';
    }
  };
 
  return <p>{getStateMessage()}</p>;
}