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 Kit 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 the Openfort Kit.

Example configuration

To customize openfort theme

<OpenfortProvider 
  uiConfig={
    authProviders: [
      AuthProvider.GUEST,
      AuthProvider.EMAIL,
      AuthProvider.GOOGLE,
      AuthProvider.WALLET,
    ],
    theme:"YOUR THEME",
    {/* other configuration */}
  }
  {/* other props */}
>
  {/* Your app here */}
</OpenfortProvider>

UI Configuration options

Auth Providers

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

  • Guest
  • Email
  • Wallet
  • Google
  • Facebook
  • Twitter

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.

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.