Openfort

Overview

Openfort provides embedded wallet infrastructure that enables seamless user authentication and wallet management with built-in Shield security. This guide shows you how to integrate Openfort signers with Rhinestone smart accounts to create a secure, cross-chain wallet experience. How it works: Openfort handles user authentication and embedded wallet creation with Shield security, providing wagmi-compatible clients. We use wagmi hooks to access these clients and pass them to Rhinestone’s SDK, which wraps them with cross-chain capabilities.

Prerequisites

An Openfort account
Openfort publishable key
Shield publishable key
React application setup

Install Dependencies

Install the required dependencies:

npm install @openfort/react @tanstack/react-query @rhinestone/sdk viem wagmi

pnpm add @openfort/react @tanstack/react-query @rhinestone/sdk viem wagmi

bun install @openfort/react @tanstack/react-query @rhinestone/sdk viem wagmi

Set Up Openfort Provider

First, set up the Openfort provider with wagmi and React Query in your React application:

import { OpenfortProvider, getDefaultConfig, AccountTypeEnum, AuthProvider } from '@openfort/react'
import { WagmiProvider, createConfig } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { sepolia } from 'viem/chains'

// Configure wagmi
const wagmiConfig = createConfig(
  getDefaultConfig({
    appName: 'My App',
    chains: [sepolia],
    ssr: true
  })
)

// Create query client
const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <OpenfortProvider
          publishableKey={process.env.NEXT_PUBLIC_OPENFORT_PUBLISHABLE_KEY}
          walletConfig={{
            shieldPublishableKey: process.env.NEXT_PUBLIC_SHIELD_PUBLISHABLE_KEY,
            accountType: AccountTypeEnum.EOA
          }}
          uiConfig={{
            authProviders: [
              AuthProvider.EMAIL,
              AuthProvider.GOOGLE,
              AuthProvider.GUEST
            ]
          }}
        >
          {/* Your app components */}
        </OpenfortProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Create Integration Hook

Create a production-ready hook that integrates Openfort wallets with Rhinestone accounts. This demonstrates the core pattern: get the wallet client from Openfort’s embedded wallet, then pass it to Rhinestone.

Openfort provides embedded wallets with Shield security that can be accessed via a viem-compatible provider.

import { useState, useEffect, useCallback } from 'react'
import { useUser, useWallets, useOpenfort } from '@openfort/react'
import { createWalletClient, custom } from 'viem'
import { sepolia } from 'viem/chains'
import { RhinestoneSDK } from '@rhinestone/sdk'
import { walletClientToAccount } from '@rhinestone/sdk/utils'

interface OpenfortWalletState {
  rhinestoneAccount: any | null
  address: string | null
  isLoading: boolean
  error: string | null
  isAuthenticated: boolean
}

export function useOpenfortWallet(): OpenfortWalletState & {
  reconnect: () => Promise<void>
} {
  const { isAuthenticated } = useUser()
  const { wallets } = useWallets()
  const { client } = useOpenfort()
  const [state, setState] = useState<OpenfortWalletState>({
    rhinestoneAccount: null,
    address: null,
    isLoading: false,
    error: null,
    isAuthenticated: false,
  })

  const initializeAccount = useCallback(async () => {
    if (!isAuthenticated || !wallets || wallets.length === 0) {
      setState(prev => ({
        ...prev,
        rhinestoneAccount: null,
        address: null,
        isAuthenticated: false,
        error: null,
      }))
      return
    }

    setState(prev => ({ ...prev, isLoading: true, error: null }))

    try {
      // Get Ethereum provider from Openfort's embedded wallet
      const ethereumProvider = await client.embeddedWallet.getEthereumProvider()

      // Get signer address from Openfort wallet
      const signerAddress = wallets[0].address as `0x${string}`

      // Create wallet client with viem
      const walletClient = createWalletClient({
        chain: sepolia,
        transport: custom(ethereumProvider),
        account: signerAddress
      })

      // Wrap wallet client for Rhinestone compatibility
      const wrappedWalletClient = walletClientToAccount(walletClient)

      const apiKey = process.env.NEXT_PUBLIC_RHINESTONE_API_KEY
      if (!apiKey) {
        throw new Error('NEXT_PUBLIC_RHINESTONE_API_KEY is not configured')
      }

      // Create Rhinestone account using Openfort's wallet client
      const rhinestone = new RhinestoneSDK({
        apiKey,
      })
      const account = await rhinestone.createAccount({
        owners: {
          type: "ecdsa",
          accounts: [wrappedWalletClient],
        },
      })

      setState(prev => ({
        ...prev,
        rhinestoneAccount: account,
        address: signerAddress,
        isAuthenticated: true,
        isLoading: false,
      }))
    } catch (error) {
      console.error('Failed to initialize Rhinestone account:', error)
      setState(prev => ({
        ...prev,
        error: error instanceof Error ? error.message : 'Failed to initialize account',
        isLoading: false,
        isAuthenticated: false,
      }))
    }
  }, [isAuthenticated, wallets, client])

  useEffect(() => {
    initializeAccount()
  }, [initializeAccount])

  return {
    ...state,
    reconnect: initializeAccount,
  }
}

Usage

Basic Component Integration

Use the enhanced hook in your React components with Openfort’s pre-built authentication UI:

import { useOpenfortWallet } from './hooks/useOpenfortWallet'
import { OpenfortButton } from '@openfort/react'

function WalletDashboard() {
  const {
    rhinestoneAccount,
    address,
    isLoading,
    error,
    isAuthenticated,
    reconnect
  } = useOpenfortWallet()

  // Handle loading state
  if (isLoading) {
    return (
      <div>
        <div></div>
        <span>Setting up your wallet...</span>
      </div>
    )
  }

  // Handle error state
  if (error) {
    return (
      <div>
        <h3>Wallet Setup Error</h3>
        <p>{error}</p>
        <button onClick={reconnect}>
          Try Again
        </button>
      </div>
    )
  }

  // Handle disconnected state - use OpenfortButton for auth
  if (!isAuthenticated || !rhinestoneAccount) {
    return (
      <div>
        <h2>
          Connect Your Wallet
        </h2>
        <p>
          Connect with Openfort to access cross-chain functionality
        </p>
        <OpenfortButton />
      </div>
    )
  }

  // Connected state
  return (
    <div>
      <h2>
        Wallet Connected
      </h2>
      <div>
        <p><strong>EOA Address:</strong> {address}</p>
        <p><strong>Smart Account:</strong> {rhinestoneAccount.getAddress()}</p>
        <p>Ready for cross-chain transactions!</p>
      </div>
      <div>
        <OpenfortButton />
      </div>
    </div>
  )
}

Cross-Chain Transactions

Send transactions using the Openfort-connected wallet with proper error handling:

import { useState } from 'react'
import { encodeFunctionData, parseUnits, erc20Abi } from 'viem'
import { baseSepolia, arbitrumSepolia } from 'viem/chains'

const usdc = '0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d' // USDC on Arbitrum Sepolia

function CrossChainTransfer({ rhinestoneAccount }) {
  const [isTransacting, setIsTransacting] = useState(false)
  const [txResult, setTxResult] = useState(null)
  const [error, setError] = useState(null)

  const handleCrossChainTransfer = async () => {
    if (!rhinestoneAccount) return

    setIsTransacting(true)
    setError(null)
    setTxResult(null)

    try {
      const prepared = await rhinestoneAccount.prepareTransaction({
        sourceChains: [baseSepolia],
        targetChain: arbitrumSepolia,
        calls: [
          {
            to: usdc,
            data: encodeFunctionData({
              abi: erc20Abi,
              functionName: "transfer",
              args: ["0xrecipient", parseUnits("10", 6)],
            }),
          },
        ],
        tokenRequests: [
          {
            address: usdc,
            amount: parseUnits("10", 6),
          },
        ],
      })
      const signed = await rhinestoneAccount.signTransaction(prepared)
      const transaction = await rhinestoneAccount.submitTransaction(signed)

      // Wait for transaction execution
      const result = await rhinestoneAccount.waitForExecution(transaction)

      setTxResult({
        id: transaction.id,
        hash: result.transactionHash,
        status: 'success',
      })
    } catch (err) {
      console.error('Transaction failed:', err)
      setError(err instanceof Error ? err.message : 'Transaction failed')
    } finally {
      setIsTransacting(false)
    }
  }

  return (
    <div>
      <button
        onClick={handleCrossChainTransfer}
        disabled={isTransacting || !rhinestoneAccount}
      >
        {isTransacting ? 'Sending...' : 'Send 10 USDC (Base → Arbitrum)'}
      </button>

      {error && (
        <div>
          Error: {error}
        </div>
      )}

      {txResult && (
        <div>
          Transaction successful!
          <a
            href={`https://arbiscan.io/tx/${txResult.hash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            View on Arbiscan
          </a>
        </div>
      )}
    </div>
  )
}

The Integration Pattern

All embedded signer integrations follow the same pattern:

Provider Setup: Configure the embedded wallet provider (Openfort, Dynamic, Privy, etc.)
Get Wallet Client: Use the provider’s SDK to access the authenticated wallet and create a viem wallet client
Pass to Rhinestone: Create a Rhinestone account using the wallet client as a signer
Use Cross-Chain Features: The resulting account has all of Rhinestone’s capabilities

This pattern means you can easily switch between providers or support multiple providers in the same app.

Authentication Methods

Openfort supports multiple authentication methods out of the box:

Email: Users can sign in with their email address
Social: Google and other OAuth providers
Guest: Anonymous authentication for quick onboarding

The <OpenfortButton /> component automatically handles the authentication flow with all configured methods.

Shield Security

Openfort’s Shield provides additional security for embedded wallets:

Key Management: Secure key storage and recovery
Transaction Protection: Advanced fraud detection
Recovery Options: User-friendly account recovery flows

Configure Shield in your OpenfortProvider with the shieldPublishableKey.

Environment Variables

Make sure to set the following environment variables:

NEXT_PUBLIC_OPENFORT_PUBLISHABLE_KEY=your_openfort_publishable_key
NEXT_PUBLIC_SHIELD_PUBLISHABLE_KEY=your_shield_publishable_key
NEXT_PUBLIC_RHINESTONE_API_KEY=your_rhinestone_api_key

Next Steps

Learn more about Openfort’s embedded wallets
Explore chain abstraction capabilities
Check out creating an account for more details

Tutorials

Smart account setup

Gas & fee sponsorship

Smart Sessions

More features

Configuration

Module development

SDK Reference

Overview

Prerequisites

Usage

Basic Component Integration

Cross-Chain Transactions

The Integration Pattern

Authentication Methods

Shield Security

Environment Variables

Next Steps

​Overview

​Prerequisites

​Usage

​Basic Component Integration

​Cross-Chain Transactions

​The Integration Pattern

​Authentication Methods

​Shield Security

​Environment Variables

​Next Steps

Overview

Prerequisites

Usage

Basic Component Integration

Cross-Chain Transactions

The Integration Pattern

Authentication Methods

Shield Security

Environment Variables

Next Steps