Skip to content

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>
);
}
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

Wallet UI with Passkeys Sample

Sample wallet UI with all the necessary screens.