Management API Reference

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

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

Components:

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#

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#