Embed Passkey Accounts

Create a domain-bound passkey account on Tempo using WebAuthn signatures for secure, passwordless authentication with Tempo transactions.

Passkeys enable users to authenticate with biometrics (fingerprint, Face ID, Touch ID) they already use for other apps. Keys are stored in the device's secure enclave and sync across devices via iCloud Keychain or Google Password Manager.

Demo

By the end of this guide, you will be able to embed passkey accounts into your application.

Passkey Accounts

demo

Steps

Set up Wagmi

Ensure that you have set up your project with Wagmi by following the guide.

Configure the WebAuthn Connector

Next, we will need to configure the webAuthn connector in our Wagmi config.

config.ts

import { ,  } from 'wagmi'
import {  } from 'viem/chains'
import { ,  } from 'wagmi/tempo'
 
export const  = ({
  : [],
  : [({ 
    : .(), 
  })], 
  : false,
  : {
    [tempo.id]: (),
  },
})

After that, we will set up "Sign in" and "Sign up" buttons so that the user can create or use a passkey with the application.

We will create a new Example.tsx component to work in.

import { ,  } from 'wagmi'
 
export function () {
  const  = ()
  const [] = ()
 
  return (
    <>
      <
        ={() =>
          .({
            ,
            : { : 'sign-up' },
          })
        }
      >
        Sign up
      </>
 
      < ={() => .({  })}>
        Sign in
      </>
    </>
  )
}

Display Account & Sign Out

After the user has signed in, we can display the account information and a sign out button.

import { , , ,  } from 'wagmi'
 
export function () {
  const  = () 
  const  = ()
  const [] = ()
  const  = () 
 
  if (.) 
    return ( 
      <> 
        <>{..(0, 6)}...{..(-4)}</> 
        < ={() => .()}>Sign out</> 
      </> {}
    ) 
 
  return (
    <>
      <
        ={() =>
          .({
            ,
            : { : 'sign-up' },
          })
        }
      >
        Sign up
      </>
 
      < ={() => .({  })}>
        Sign in
      </>
    </>
  )
}

Next Steps

Now that you have created your first passkey account, you can now:

learn the Best Practices below
follow a guide on how to make a payment, create a stablecoin, and more with a passkey account.

Best Practices

Loading State

When the user is logging in or signing out, we should show loading state to indicate that the process is happening.

We can use the isPending property from the useConnect hook to show pending state to the user.

Example.tsx

import { , , ,  } from 'wagmi'
 
export function () {
  const  = ()
  const  = ()
  const [] = ()
  const  = ()
 
  if (.) 
    return <>Check prompt...</> {}
  return (/* ... */)
}

Error Handling

If an error unexpectedly occurs, we should display an error message to the user.

We can use the error property from the useConnect hook to show error state to the user.