Embedded wallet Configuration

To configure Openfort embedded wallets in your React app, set up the OpenfortProvider with your wallet configuration.

import { OpenfortProvider, RecoveryMethod } from '@openfort/react'
 
function App() {
  return (
    <OpenfortProvider
      // ... other configuration
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
 
      // Set the wallet configuration. 
      walletConfig={{ 
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY", 
        recoverWalletAutomaticallyAfterAuth: true, // default:true. We will manually call create/setActive wallet after authentication.
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

Wallet recovery

Recovering the embedded wallet is needed when a user logs into a new device. There are three recovery methods available:

Automatic recovery: This method uses an encrypted session to securely recover the wallet without user intervention. It requires setting up a backend endpoint to create the encrypted session. (see below)
Password recovery: This method allows users to recover their wallet using a password. It requires setting up a backend endpoint to handle password verification and recovery.
Passkey recovery: This method allows users to recover their wallet using a passkey (WebAuthn). It does not require a backend endpoint but requires users to set up a pass

Not sure what wallet recovery method you need? Don't miss our guide.

Automatic recovery

Automatic recovery requires a backend to store the recovery data. This method provides a seamless experience for users.

Then, set up the walletConfig with the createEncryptedSessionEndpoint or the getEncryptionSession function to fetch the encryption session from your backend.

with createEncryptedSessionEndpoint

import { OpenfortProvider, RecoveryMethod } from '@openfort/react'
 
function App() {
  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      // ... other configuration
 
      // Set the wallet configuration.
      walletConfig={{
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
        // If you want to use AUTOMATIC embedded wallet recovery, an encryption session is required. 
        // (e.g., http://localhost:4001/api/create-encryption-session).
        createEncryptedSessionEndpoint: "YOUR_BACKEND_ENDPOINT", 
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

Account type

By default, when creating a wallet it will create a Smart Account, but you can also create an Externally Owned Account (EOA) by specifying the accountType parameter.

import { OpenfortProvider } from '@openfort/react'
import {AccountTypeEnum} from "@openfort/openfort-js"
 
function App() {
  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      // ... other configuration
 
      // Set the wallet configuration.
      walletConfig={{
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
 
        accountType: AccountTypeEnum.SMART_ACCOUNT, // or AccountTypeEnum.EOA
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

EOA wallets on an unsupported chain

EOA wallets are chain-agnostic in Openfort. Once created, the same address works across every chain - even ones that are not part of the built-in chain list. All you need to do is make sure your app (wagmi + Openfort) knows about the chain ID when setting up the provider. Here is an example of how you can set up the wagmi configuration:

Providers.tsx

import React from "react";
import { defineChain } from "viem";
import { WagmiProvider, createConfig, http } from "wagmi";
import { getDefaultConfig, OpenfortProvider } from "@openfort/react";
import { AccountTypeEnum } from "@openfort/openfort-js";
 
// Define your custom chain (may be a local fork).
const customMainnet = defineChain({ 
  id: 12345, 
  name: "Custom Mainnet", 
  network: "custom", 
  nativeCurrency: { name: "Cust", symbol: "CUST", decimals: 18 }, 
  rpcUrls: { 
    default: { 
      http: [ 
        'https://rpc.custom.xyz'
      ] 
    }, 
  }, 
  blockExplorers: { 
    default: { 
      name: 'customscan', 
      url: 'https://customscan.io', 
    }, 
  },
  testnet: true, // or true, if live
});
 
const wagmiConfig = createConfig(
  getDefaultConfig({
    appName: "Your App Name",
    chains: [customMainnet], 
    transports: {
      [customMainnet.id]: http(), 
    },
    walletConnectProjectId: "YOUR_WALLETCONNECT_PROJECT_ID", // optional, only needed if you want to use WalletConnect
  }),
);
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <OpenfortProvider
        publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
        walletConfig={{
          shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
          accountType: AccountTypeEnum.EOA, 
        }}
        uiConfig={{
          enforceSupportedChains: false, // allow custom chains in the UI
        }}
      >
        {children}
      </OpenfortProvider>
    </WagmiProvider>
  );
}