Signing Transactions With WebAuthn

Learn how to sign transactions with WebAuthn.

In this tutorial, you will learn how to use WebAuthn to sign transactions for smart accounts.

What you'll learn:

  • How to use WebAuthn
  • How to send transactions with custom signatures
  • How to validate WebAuthn signatures
  • How to use the P256Verify precompile
GitHub

Tools:

  • - WebAuthn
  • - zksync-ethers
  • - zksync-cli
  • - era_test_node
  • - hardhat
webauthnaccount abstraction
Last Updated: Sep 13, 2024

Prerequisites

What You Will Build

In this tutorial, we will build an app that allows users to sign transactions with WebAuthn.

To break this down, the app will allow users to:

  • Deploy a new instance of a smart account.
  • Create a new WebAuthn passkey.
  • Register the WebAuthn passkey as an authorized user of the smart account.
  • Use WebAuthn to transfer ETH.
  • Use WebAuthn to mint an NFT.
  • Have gasless transactions.

You can find the completed code inside the Community Code repo.

Special thanks to the Clave team for helping with this example.

Introduction to WebAuthn

WebAuthn, short for Web Authentication API, is an API built-in to your browser that allows your app to register and authenticate users. It allows users to authenticate using passkeys, including using biometric data (such as Apple's TouchID) or portable hardware devices (such as a Yubikey).

Ceremonies

There are two steps, or "ceremonies", for using WebAuthn: registration and authentication.

  1. The first step, registration, is when the user creates a new key pair specific to the application they are using.
  2. The second step, authentication, is used to send a challenge to WebAuthn to sign using that key pair, and receive a signature in return.

In the frontend section, you will see in more detail what these ceremonies look like.

Signatures

WebAuthn supports different signature schemes than what is typically used in blockchain. While standard accounts in blockchain use the secp256k1 curve, WebAuthn supports several different signature schemes for signing, including the secp256r1 elliptic curve used in many hardware devices.

Without a helper function to handle verifying secp256r1 signatures, it can be really difficult to integrate a smart account with WebAuthn. Luckily, we can utilize the P256Verify precompile to verify that a given WebAuthn signature matches a known public key.

Curious to learn more about WebAuthn? Check out webauthn.wtf and webauthn.guide.

In the next section, we will create the contracts for the app.


Made with ❤️ by the ZKsync Community