Openfort signer

Non-custodial signer with social login

If you want to check out a live sample app using Openfort signers, check out the live demo with RapidFire.

Configure Authentication Methods#

Navigate to the auth providers page on the Openfort dashboard by selecting your project and then clicking Auth providers Methods in the side bar in the players page. Select the account types you'd like users to be able to login with. For more information on how to enable social logins, check out the dashboard docs.

As soon as you enable each provider from your dashboard, it will automatically appear as an option in the authentication page.

From the Openfort Dashboard for select your desired app, navigate to the developers page in the top bar. On the de tab, find the API keys section. Get your Openfort API keys, you will need it in the next step.

You will find two keys:

Publishable Key: This value can be safely exposed in a client-side environment.
Secret Key: This value should never be exposed in a client-side environment. It should be kept secure and used only in a server-side environment. Learn more on how to use it in the server-side guide. You can further secure it for production applications.

To generate non custodial wallets, you will need to create a Shield instance. At the API keys page, scroll down to the Shield section and click on the Create Shield keys button. A one time pop-up will appear with a variable called encryption share. Its very important that you store it safely. You will not be able to see it again.

Then, in your page, you will see two Shield keys:

Publishable Key: This value can be safely exposed in a client-side environment.
Secret Key: This value should never be exposed in a client-side environment.

Creating your wallet UI#

The wallet UI is how information is shown to wallet users. Under your wallet UI folder, install the latest version of Ecosystem SDK using your package manager of choice. Remember to comply with the requirements to benefit from code splitting.

Getting the ecosystem id

When creating your wallet UI you need to add the ecosystem ID. It can be found in your dashboard in the settings section.

index.tsx

App.tsx

Loading.tsx

lib/Wagmi.ts

lib/Query.ts

// Set your publishable key, shield publishable key and ecosystem id. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.openfort.xyz/developers/configuration/api-keys
// See your ecosystem ID here: https://dashboard.openfort.xyz/settings/project/overview
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, useNavigate } from 'react-router-dom';
import { WagmiProvider } from 'wagmi';
import { QueryClientProvider } from '@tanstack/react-query';
import * as Wagmi from './lib/Wagmi';
import * as Query from './lib/Query'
import { EcosystemProvider, OpenfortProvider, RecoveryMethod } from '@openfort/ecosystem-js/react';
async function getShieldSession(accessToken:string):Promise<string> {
  // When using AUTOMATIC embedded wallet recovery, an encryption session is required.
  // Sample encryption session generation backend: https://github.com/openfort-xyz/ecosystem-sample/tree/main/wallet-ui/backend
  const response = await fetch(`${process.env.REACT_APP_BACKEND_URL!}/api/protected-create-encryption-session`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`
    }
  });
  if (!response.ok) {
    throw new Error('Failed to fetch shield session');
  }
  const data = await response.json();
  return data.session;
}
const ProtectedRoute = ({ component, ...args }: any) => {
  const Component = withAuthenticationRequired(component, {
    onRedirecting: () => <Loading />,
  });
  return <Component {...args} />;
};
export default function Providers({children}: {children: React.ReactNode}) {
const nav = useNavigate()
return (
  <EcosystemProvider
    appName='Rapidfire ID'
    navigateTo={(appState) => {
      nav({
        pathname: appState?.to,
        search: appState?.search
      })
    }}
    theme='midnight'
    logoUrl='https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV'
  >
    <WagmiProvider config={Wagmi.config}>
      <QueryClientProvider
        client={Query.client}
      >
        <OpenfortProvider
          // If you're using third party authentication with Openfort (i.e. your own auth or providers like Firebase), set thirdPartyAuthentication to true.
          thirdPartyAuthentication={false}
          ecosystemId={process.env.REACT_APP_OPENFORT_ECOSYSTEM_ID!}
          onRedirectCallback={(appState) => {
            return nav(appState?.returnTo || window.location.pathname);
          }}
          overrides={{}}      
          publishableKey={process.env.REACT_APP_OPENFORT_PUBLIC_KEY!}
          // To choose your recovery method, set the recoveryMethod to either 'AUTOMATIC' or 'PASSWORD'
          // Learn more about configure embedded signers: https://openfort.io/docs/products/kit/react/wallets/
          embeddedSignerConfiguration={
            {
              shieldPublishableKey: process.env.REACT_APP_SHIELD_PUBLIC_KEY!,
              recoveryMethod: RecoveryMethod.AUTOMATIC,
              // If you're using AUTOMATIC recovery, you need to provide an encryption session. 
              // If you're only using PASSWORD recovery, you can remove this function.
              getEncryptionSessionFn(getAccessToken) {
                return getShieldSession(getAccessToken);
              }
            }
          }
        >
          {children}
        </OpenfortProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </EcosystemProvider>
);
}

Components:

Check all the available OpenfortProvider configuration methods at OpenfortProvider SDK reference.
Check all the available EcosystemProvider configuration methods at EcosystemProvider SDK reference.

Configure Supported Chains#

As you can see above, its required that you configure Wagmi and the chains you plan on enabling for your wallet.

Note that, to enable transaction simulation through asset changes, the Ecosystem SDK internally requires the eth_simulateV1 JSON-RPC method, so you will need to provide an RPC endpoint that supports this method (or disable simulation through the EcosystemProvider using disableTransactionSimulation).

Sample Openfort authentication#

Wallet UI Sample

Sample wallet UI with all the necessary screens.

Using a custom auth provider#

Openfort's cross-app wallets are fully-compatible with any authentication provider that supports JWT-based, stateless authentication.

Use a custom authentication provider (easy to integrate alongside your existing stack).

Sample third-party authentication#

Wallet SDK Sample

Complete sample using Firebase as an authentication provider for the cross-app wallet.