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.

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>
  )
}