Using Openfort signer
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.
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.
Create React App
// 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.io/developers/configuration/api-keys
// See your ecosystem ID here: https://dashboard.openfort.io/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/embedded-wallet/react/kit/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>
);
}
- 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 global 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 global wallet.