Skip to content

Openfort UI Configuration

Configure the Openfort UI to fit the needs of your application. The SDK exposes options to:

  • Configure supported authentication providers.
  • Configure the feel of your application.

Openfort Provider is the main component that you will use to wrap your application. It will provide the context to all the components that need to interact with Openfort SDK.

UI Configuration options

Auth Providers

The authProviders property is an array of AuthProvider authentication providers. Currently, the following providers are supported:

  • AuthProvider.GUEST
  • AuthProvider.EMAIL
  • AuthProvider.WALLET
  • AuthProvider.GOOGLE
  • AuthProvider.FACEBOOK
  • AuthProvider.TWITTER

Example configuration:

import { OpenfortProvider, AuthProvider } from '@openfort/react'
 
function App() {
  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      // ... other configuration
 
      uiConfig={{ 
        authProviders: [ 
          AuthProvider.GUEST, 
          AuthProvider.EMAIL, 
          AuthProvider.GOOGLE, 
          AuthProvider.WALLET, 
        ], 
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

Theme

Customize the feel of your application with a variety of themes. Learn more about themes in the customization guide.

  • theme: The theme to be used, default is 'auto'.
  • mode: The theme mode to be used, default is 'auto'.
  • customTheme: Custom theme configuration.
import { OpenfortProvider, AuthProvider } from '@openfort/react'
 
function App() {
  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      // ... other configuration
 
      uiConfig={{ 
        theme: "auto", 
        customTheme: {  
          '--ck-font-family': 'monospace',  
          '--ck-color-background': '#ccc'
          } 
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

Wallet recovery methods

Configure the wallet recovery methods available to your users. By default, all recovery methods are enabled.

If you configure automatic recovery in the OpenfortProvider (view the wallet recovery guide), it will be used as the default recovery method when creating a wallet.

You can set the default method and the available methods with the walletRecovery property:

import { OpenfortProvider, RecoveryMethod } from '@openfort/react'
 
function App() {
  return (
    <OpenfortProvider
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
      // ... other configuration
 
      uiConfig={{ 
        walletRecovery:{ 
          defaultMethod: RecoveryMethod.PASSKEY, 
          allowedMethods: [ 
            RecoveryMethod.PASSWORD, 
            RecoveryMethod.AUTOMATIC, 
            RecoveryMethod.PASSKEY], 
        }, 
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

Disclaimer

There are two ways to configure the disclaimer, you can either set the terms of service and privacy policy URLs:

  • privacyPolicyUrl: The privacy policy URL.
  • termsOfServiceUrl: The terms of service URL.

or customize the disclaimer component:

  • disclaimer: A disclaimer to be shown in the wallet.

Other options

  • enforceSupportedChains: This will enforce the supported chains, it will open the modal until the user selects a supported chain.
  • logo: The logo to be shown in the wallet.
  • openfortUrlOverrides: The Openfort URL overrides.
  • hideBalance: Hide the balance in the wallet.
  • hideTooltips: Hide the tooltips in the wallet.
  • hideRecentBadge: Hide the recent badge in the wallet.
  • walletConnectCTA: Show the WalletConnect CTA as a link, modal or both.
  • avoidLayoutShift: Avoid layout shift when the wallet is loaded.
  • embedGoogleFonts: Embed Google Fonts in the wallet.
  • truncateLongENSAddress: Truncate long ENS addresses.
  • walletConnectName: The name to be used for WalletConnect.
  • reducedMotion: Enable reduced motion.
  • bufferPolyfill: Enable buffer polyfill.
  • customAvatar: Custom avatar component.
  • initialChainId: The initial chain ID.
  • overlayBlur: The overlay blur.