Passkey (Webauthn) signer
Install the required dependencies
In this sample, we'll be using the Safe smart account, with Safe7579 adapter to add support for Passkeys and session keys.
npm
npm install @openfort/ecosystem-js permissionless wagmi viem@2.x @tanstack/react-query
- TypeScript is optional, but highly recommended.
Implementation
Create React App
index.tsx
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 } from '@openfort/ecosystem-js/react';
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='RapidSafe'
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}
>
<RapidsafeProvider
debugMode={true}
onRedirectCallback={(appState) => {
return nav(appState?.returnTo || window.location.pathname);
}}
>
{children}
</RapidsafeProvider>
</QueryClientProvider>
</WagmiProvider>
</EcosystemProvider>
);
}
- 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
Wallet UI with Passkeys Sample
Sample wallet UI with all the necessary screens.