Management API Reference

OpenfortKitProvider Configuration

Configure Openfort Kit Provider

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.

It has the following props:

  • publishableKey: The Openfort publishable key. You can get it from the Openfort dashboard.
  • walletConfig: Configuration for the Fort wallet. It is explained in the Wallet Configuration section.
  • theme: The theme to be used, default is 'auto'. Learn more about themes in the Custom UI guide.
  • mode: The theme mode to be used, default is 'auto'.
  • customTheme: Custom theme configuration.
  • options: Additional configuration options. It is explained in the Options Configuration section.
  • onConnect: Callback function to be called on connect.
  • onDisconnect: Callback function to be called on disconnect.
  • debugMode: Enable or disable debug mode, default is false.

Options Configuration#

In this section we will describe the most important properties of the options object.

Auth Providers#

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

  • Guest
  • Email
  • Wallet
  • Google
  • Facebook
  • Twitter
Social login configuration

Social login like Google, Facebook, and Twitter require some additional configuration to let Openfort know about your app. You can find more information in the Social login guide.

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#

  • skipEmailVerification: Skip email verification. Useful for testing.
  • 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.

Wallet Configuration#

In this section we will describe the properties of the walletConfig object.

How will the user sign transactions?#

There are two ways to configure the signer, you can either use the embedded signer - a non-custodial signer provided by Openfort - or have the user sign transactions with a web3 provider.

Embedded Signer#

If you are using the embedded signer, you will need to set the following properties:

  • createEmbeddedSigner: Set to true to use the embedded signer.
  • embeddedSignerConfiguration: The configuration for the embedded signer. Explained in the following section.

Embedded Signer Configuration#

The most important properties of the embeddedSignerConfiguration object are:

  • shieldPublishableKey: This is the publishable key of the shield. You can get it from the Openfort dashboard.

  • recoveryMethod: The recovery method you want to use. Currently, the following methods are supported:

    • RecoveryMethod.AUTOMATIC
    • RecoveryMethod.PASSWORD

    If you need help deciding which method to use, check the embedded signer guide.

  • ethereumProviderPolicyId: Optional policy ID when they use the Embedded Signer. This can be used to sponsor the gas fees for your users. Create one using Openfort dashboard. Learn more about sponsoring gas fees.

Automatic Recovery#

If you use automatic recovery, you will need a backend service to create an encryption session for the user. This endpoint should be protected and only accessible by the user who is requesting the encryption session (i.e. the user who is logging in).

For example, in a Next.js API route, you can create an endpoint like this:

protected-create-encryption-session.ts
openfortAdminConfig.ts

_11
import openfort from './openfortAdminConfig';
_11
_11
export default async function handler(
_11
req: NextApiRequest,
_11
res: NextApiResponse
_11
) {
_11
const session = await openfort.registerRecoverySession('YOUR_SHIELD_PUBLISHABLE_KEY', 'YOUR_SHIELD_SECRET_KEY', 'YOUR_SHIELD_ENCRYPTION_SHARE')
_11
res.status(200).send({
_11
session: session,
_11
});
_11
}

In the embeddedSignerConfiguration you will need to specify one of the following properties:

  • createEncryptedSessionEndpoint: the URL of the endpoint you created
  • getEncryptedSession: the function that will return the encrypted session.

Password Recovery#

If you use password recovery, you can set the shieldEncryptionKey property with the encryption key to encrypt the recovery data.

You can also create a backend service, the same way as with automatic recovery instead of setting the shieldEncryptionKey property.

Web3 Provider#

If you don't want to use the embedded signer, you can use a web3 provider. You will need to enable AuthProvider.Wallet in the authProviders array, and make the users sign transactions with their web3 provider:

  • linkWalletOnSignUp: This will ensure that the user links their wallet on sign up.