Skip to content

useWalletAuth

Connect external wallets and complete the Sign-In With Ethereum (SIWE) authentication flow.

Request

type Request = {
  hook: 'useWalletAuth',
  params: [options?: WalletAuthOptions]
}
 
type WalletAuthOptions = {
  onSuccess?: (data: { error?: OpenfortError }) => void
  onError?: (error: OpenfortError) => void
  onSettled?: (data: { error?: OpenfortError } | undefined | null, error: OpenfortError | null) => void
  throwOnError?: boolean
}
 
type OpenfortError = {
  message: string
  type: OpenfortErrorType
  data: { [key: string]: any }
  name: string
}
 
enum OpenfortErrorType {
  AUTHENTICATION_ERROR = "AUTHENTICATION_ERROR",
  WALLET_ERROR = "WALLET_ERROR",
  CONFIGURATION_ERROR = "CONFIGURATION_ERROR",
  VALIDATION_ERROR = "VALIDATION_ERROR",
}

Response

type Response = WalletAuthReturn
 
type WalletAuthReturn = WalletAuthStatusFlags & {
  availableWallets: AvailableWallet[]
  walletConnectingTo: string | null
  connectWallet(options: ConnectWalletOptions): Promise<void | { error: OpenfortError }>
  linkWallet: (options: ConnectWalletOptions) => Promise<void | { error: OpenfortError }>
}
 
type WalletAuthStatusFlags = {
  isLoading: boolean
  isError: boolean
  isSuccess: boolean
  error?: OpenfortError | null
}
 
type ConnectWalletOptions = {
  connector: string | Connector
}
 
type AvailableWallet = {
  id: string
  connector: Connector
  name: string
  icon: any // React.ReactNode
  iconShape: 'circle' | 'square' | 'squircle' | string
  isInstalled?: boolean
  shortName?: string
  iconConnector?: any // React.ReactNode
  [key: string]: unknown
}
 
type Connector = {
  id: string
  name: string
  type: string
  // Connector type from wagmi - includes chain management, account handling, etc.
}

Example

import { embeddedWalletId, useWalletAuth } from "@openfort/react"
 
function WalletButtons() {
  const {
    walletConnectingTo,
    connectWallet,
    linkWallet,
    availableWallets,
    isLoading,
    isError,
    isSuccess,
    error,
  } = useWalletAuth({
    throwOnError: true,
    onSuccess: () => {},
    onError: () => {},
    onSettled: () => {}
  })
 
  const connect = (id: string) => connectWallet({ connector: id })
  const connectEmbedded = () => connectWallet({ connector: embeddedWalletId })
 
  return null
}