Signing Transactions With WebAuthn

Prerequisites

• Make sure your machine satisfies the system requirements.
• You should have the latest version of Google Chrome installed.
• You should have Node.js version 20.16.0 installed.
• You should have era_test_node installed.
• If you aren't familiar with paymasters and smart accounts on ZKsync Era, check out the General Paymaster and Native AA Multisig tutorials.

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.

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.

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