Passkey (Webauthn) signer

Self-custodial wallet secured by Passkeys (Webauthn)

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

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.

Terminal

npm install @openfort/ecosystem-js permissionless wagmi viem@2.x @tanstack/react-query

TypeScript is optional, but highly recommended.

Implementation#

Please refer to the complete code for the Wallet UI if you want to see the full implementation of the Passkey signer.

index.tsx

App.tsx

Loading.tsx

lib/Wagmi.ts

lib/Query.ts

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:

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.