Configuration

Configure Openfort Kit

In this guide, we will show you how to use the Openfort Kit configuration to customize the look and feel of the Openfort login screen, configure your signer and more.

To learn more about the provider configuration, go to the provider configuration page.

This is a full example of how to use the OpenfortKitProvider with password authentication and a retro theme, using beamTestnet and polygonAmoy chains.

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider, OpenfortKitProvider, RecoveryMethod, getDefaultConfig } from '@openfort/openfort-kit';
import { beamTestnet, polygonAmoy } from 'viem/chains';
import { WagmiProvider, createConfig } from 'wagmi';
import CustomLogo from './CustomLogo';
const config = createConfig(
  getDefaultConfig({
    appName: 'OpenfortKit Next.js demo',
    chains: [beamTestnet, polygonAmoy],
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID!,
  })
);
const queryClient = new QueryClient();
export const Web3Provider = ({ children }: { children: React.ReactNode }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <OpenfortKitProvider
          // Set the publishable key of your OpenfortKit account. This field is required.
          publishableKey={process.env.NEXT_PUBLIC_OPENFORT_PUBLIC_KEY!}
          // Set the wallet configuration. In this example, we will be using the embedded signer.
          walletConfig={{
            createEmbeddedSigner: true,
            embeddedSignerConfiguration: {
              shieldPublishableKey: process.env.NEXT_PUBLIC_SHIELD_API_KEY!,
              // Set the recovery method you want to use, in this case we will use the automatic recovery method
              recoveryMethod: RecoveryMethod.AUTOMATIC,
              // Set the encryption key endpoint to encrypt the recovery data
              createEncryptedSessionEndpoint: '/api/protected-create-encrypted-session',
              // You can set a policy id to sponsor the gas fees for your users
              ethereumProviderPolicyId: process.env.NEXT_PUBLIC_POLICY_ID,
            }
          }}
          // This is the callback that will be called when the user connects or disconnects
          onConnect={(params) => {
            console.log('onConnect', params);
          }}
          onDisconnect={() => {
            console.log('onDisconnect');
          }}
          options={{
            // You can customize the logo of your app
            logo: (<CustomLogo />),
            // Set the auth providers you want to use
            authProviders: [
              AuthProvider.GUEST,
              AuthProvider.EMAIL,
              AuthProvider.GOOGLE,
              AuthProvider.TWITTER,
              AuthProvider.FACEBOOK,
              AuthProvider.WALLET,
            ],
            // Set the chain id you want to use, by default it will use the first chain
            initialChainId: polygonAmoy.id,
            // Skip the email verification, useful for testing
            skipEmailVerification: true,
            // Other useful options
            overlayBlur: 2.5,
            hideTooltips: true,
          }}
          // Set the theme of the OpenfortKit
          theme="retro"
        >
          {children}
        </OpenfortKitProvider>
      </QueryClientProvider>
    </WagmiProvider >
  );
};

OpenfortKitButton#

The button component that will allow your users to connect to Openfort.

To learn more about the OpenfortKitButton component, go to the button configuration page.

import { OpenfortKitButton } from '@openfort/openfort-kit';
function App() {
  return (
    <div>
      <OpenfortKitButton />
    </div>
  );
};