From 72cf03efcfe8e58b0806c4b9050aa5bbea808bb5 Mon Sep 17 00:00:00 2001
From: Sarah Schwartz <58856580+sarahschwartz@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:27:52 -0600
Subject: [PATCH] docs: update webauthn tutorial draft

---
 code/webauthn/contracts/contracts/Account.sol |   2 +
 .../frontend/src/pages/create-account.tsx     |   4 +-
 code/webauthn/frontend/src/pages/mint.tsx     |   2 +-
 code/webauthn/frontend/utils/tx.ts            |  17 +-
 code/webauthn/frontend/utils/webauthn.ts      |   2 +-
 content/tutorials/erc20-paymaster/10.index.md |   4 +-
 .../10.index.md                               |  17 +-
 ...tracts.md => 20.building-the-contracts.md} |  99 +++++---
 .../30.building-the-frontend.md               | 238 ++++++++++++++++++
 .../30.frontend.md                            | 227 -----------------
 .../40.completing-the-frontend.md             | 211 ++++++++++++++++
 .../_dir.yml                                  |   4 +-
 12 files changed, 533 insertions(+), 294 deletions(-)
 rename content/tutorials/signing-transactions-with-webauthn/{20.contracts.md => 20.building-the-contracts.md} (70%)
 create mode 100644 content/tutorials/signing-transactions-with-webauthn/30.building-the-frontend.md
 delete mode 100644 content/tutorials/signing-transactions-with-webauthn/30.frontend.md
 create mode 100644 content/tutorials/signing-transactions-with-webauthn/40.completing-the-frontend.md

diff --git a/code/webauthn/contracts/contracts/Account.sol b/code/webauthn/contracts/contracts/Account.sol
index c7701ea3..b3dedfff 100644
--- a/code/webauthn/contracts/contracts/Account.sol
+++ b/code/webauthn/contracts/contracts/Account.sol
@@ -203,9 +203,11 @@ contract Account is IAccount, IERC1271 {
     _transaction.processPaymasterInput();
   }
 
+  // ANCHOR: updateR1Owner
   function updateR1Owner(bytes memory _r1Owner) external onlySelf {
     r1Owner = _r1Owner;
   }
+  // ANCHOR_END: updateR1Owner
 
   // ANCHOR: validateWebAuthnSignature
   function validateWebAuthnSignature(bytes memory webauthnSignature, bytes32 txHash) private view returns (bool valid) {
diff --git a/code/webauthn/frontend/src/pages/create-account.tsx b/code/webauthn/frontend/src/pages/create-account.tsx
index 41ed1c7f..c080505b 100644
--- a/code/webauthn/frontend/src/pages/create-account.tsx
+++ b/code/webauthn/frontend/src/pages/create-account.tsx
@@ -4,7 +4,7 @@ import { buttonStyles, AA_FACTORY_ADDRESS, BUTTON_COLORS } from './index';
 import { containerStyles, headerStyles } from './register';
 import { type Provider, utils, Wallet } from 'zksync-ethers';
 import { ethers } from 'ethers';
-import * as factoryAbiJSON from '../../../contracts/artifacts-zk/contracts/AAFactory.sol/AAFactory.json';
+import factoryAbiJSON from '../../../contracts/artifacts-zk/contracts/AAFactory.sol/AAFactory.json';
 import { getPaymasterOverrides } from '../../utils/tx';
 import { useAccount, useSetAccount } from '@/hooks/useAccount';
 import {
@@ -36,7 +36,7 @@ export default function CreateAccount({ provider }: { provider: Provider }) {
   async function deployNewAccount() {
     const owner = Wallet.createRandom().connect(provider);
     const aaFactory = new ethers.Contract(AA_FACTORY_ADDRESS, factoryAbiJSON.abi, owner);
-    const salt = '0x0000000000000000000000000000000000000000000000000000000000000000';
+    const salt = ethers.utils.hexlify(ethers.utils.randomBytes(32));
     const overrides = await getPaymasterOverrides();
     const tx = await aaFactory.deployAccount(salt, owner.address, overrides);
     await tx.wait();
diff --git a/code/webauthn/frontend/src/pages/mint.tsx b/code/webauthn/frontend/src/pages/mint.tsx
index a3b33609..4ef1b531 100644
--- a/code/webauthn/frontend/src/pages/mint.tsx
+++ b/code/webauthn/frontend/src/pages/mint.tsx
@@ -7,7 +7,7 @@ import { Layout } from '../components/Layout';
 import { buttonStyles } from '.';
 import { containerStyles } from './register';
 import { ethers } from 'ethers';
-import * as NFT_ABI_JSON from '../../../contracts/artifacts-zk/contracts/MyNFT.sol/MyNFT.json';
+import NFT_ABI_JSON from '../../../contracts/artifacts-zk/contracts/MyNFT.sol/MyNFT.json';
 import { BUTTON_COLORS, NFT_CONTRACT_ADDRESS } from '@/pages/index';
 import { useAccount } from '@/hooks/useAccount';
 
diff --git a/code/webauthn/frontend/utils/tx.ts b/code/webauthn/frontend/utils/tx.ts
index 5c664ebb..46209003 100644
--- a/code/webauthn/frontend/utils/tx.ts
+++ b/code/webauthn/frontend/utils/tx.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_GAS_PER_PUBDATA_LIMIT, getPaymasterParams } from 'zksync-ethers/build/utils';
 import { EIP712Signer, type Wallet, type Provider, utils, type types } from 'zksync-ethers';
 import { ethers } from 'ethers';
-import * as accountAbiJSON from '../../contracts/artifacts-zk/contracts/Account.sol/Account.json';
+import accountAbiJSON from '../../contracts/artifacts-zk/contracts/Account.sol/Account.json';
 import { PAYMASTER_ADDRESS } from '@/pages/index';
 
 export async function getTransaction(to: string, from: string, value: string, data: string, provider: Provider) {
@@ -42,20 +42,7 @@ export async function registerKeyInAccount(pubKey: string, account: string, prov
     const contract = new ethers.Contract(account, accountAbiJSON.abi, provider);
     const data = contract.interface.encodeFunctionData('updateR1Owner', [pubKey]);
     const transferAmount = '0';
-    const overrides = await getPaymasterOverrides();
-
-    const registerTx = {
-      to: account,
-      from: account,
-      chainId: (await provider.getNetwork()).chainId,
-      nonce: await provider.getTransactionCount(account),
-      type: 113,
-      customData: overrides.customData,
-      value: ethers.utils.parseEther(transferAmount),
-      gasPrice: await provider.getGasPrice(),
-      gasLimit: BigInt(2000000000),
-      data,
-    };
+    const registerTx = await getTransaction(account, account, transferAmount, data, provider);
     const signedTxHash = EIP712Signer.getSignedDigest(registerTx);
     const signingKey: ethers.utils.SigningKey = new ethers.utils.SigningKey(wallet.privateKey);
     const walletSignature = signingKey.signDigest(signedTxHash);
diff --git a/code/webauthn/frontend/utils/webauthn.ts b/code/webauthn/frontend/utils/webauthn.ts
index 4ec9234b..1672826c 100644
--- a/code/webauthn/frontend/utils/webauthn.ts
+++ b/code/webauthn/frontend/utils/webauthn.ts
@@ -4,7 +4,7 @@ import { defaultAbiCoder } from 'ethers/lib/utils';
 import { EIP712Signer, type Provider, utils } from 'zksync-ethers';
 import type { AuthenticatorAssertionResponseJSON } from '@simplewebauthn/types';
 import { BigNumber } from 'ethers';
-import type { TransactionRequest } from 'zksync-ethers/build/types';
+import type { TransactionRequest } from 'zksync-ethers/src/types';
 import * as cbor from 'cbor';
 
 export async function authenticate(challenge: string) {
diff --git a/content/tutorials/erc20-paymaster/10.index.md b/content/tutorials/erc20-paymaster/10.index.md
index 67a4d5e1..c40dbb25 100644
--- a/content/tutorials/erc20-paymaster/10.index.md
+++ b/content/tutorials/erc20-paymaster/10.index.md
@@ -596,7 +596,7 @@ Make sure you delete the `artifacts-zk` and `cache-zk` folders before recompilin
       paymasterBalance = await provider.getBalance(PAYMASTER_ADDRESS);
 
       console.log(`Paymaster ETH balance is now ${paymasterBalance.toString()}`);
-      console.log(`ERC20 token balance of the the wallet after mint: ${await wallet.getBalance(TOKEN_ADDRESS)}`);
+      console.log(`ERC20 token balance of the wallet after mint: ${await wallet.getBalance(TOKEN_ADDRESS)}`);
     }
     ```
 
@@ -628,7 +628,7 @@ Make sure you delete the `artifacts-zk` and `cache-zk` folders before recompilin
     Minting 5 tokens for the wallet via paymaster...
     Paymaster ERC20 token balance is now 1
     Paymaster ETH balance is now 59650952750000000
-    ERC20 token balance of the the wallet after mint: 7
+    ERC20 token balance of the wallet after mint: 7
     ```
 
 The wallet had 3 tokens after running the deployment script and, after sending the transaction to `mint` 5 more tokens,
diff --git a/content/tutorials/signing-transactions-with-webauthn/10.index.md b/content/tutorials/signing-transactions-with-webauthn/10.index.md
index 4450082e..fb248b23 100644
--- a/content/tutorials/signing-transactions-with-webauthn/10.index.md
+++ b/content/tutorials/signing-transactions-with-webauthn/10.index.md
@@ -7,6 +7,7 @@ description: Learn how to sign transactions with WebAuthn
 
 - Make sure your machine satisfies the [system
   requirements](https://github.com/matter-labs/era-compiler-solidity/tree/main#system-requirements).
+- You should have the latest version of Google Chrome installed.
 - You should have [Node.js](https://nodejs.org/en/download) installed.
 - You should have [`era_test_node`](https://docs.zksync.io/build/test-and-debug/in-memory-node#install-and-set-up-era_test_node) installed.
 - If you aren't familiar with paymasters and smart accounts on ZKsync Era, check out the
@@ -22,13 +23,12 @@ 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 transfer ETH.
 - Use WebAuthn to mint an NFT.
 - Have gasless transactions.
 
-<video width="100%" height="100%" controls>
+<video style="clip-path:inset(2px 2px);" width="100%" height="100%" controls>
   <source src="/videos/webauthn-demo.mp4" type="video/mp4">
-  Your browser does not support the video tag.
 </video>
 
 You can find the completed code inside the [Community Code repo](https://github.com/zkSync-Community-Hub/community-code/code/webauthn).
@@ -36,7 +36,8 @@ You can find the completed code inside the [Community Code repo](https://github.
 ## 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 biometric data (such as Apple's TouchID) or hardware devices (such as a Yubikey).
+It allows users to authenticate using [passkeys](https://passkeys.dev/docs/intro/what-are-passkeys/),
+including using biometric data (such as Apple's TouchID) or portable hardware devices (such as a Yubikey).
 
 ### Ceremonies
 
@@ -45,14 +46,14 @@ There are two steps, or "ceremonies", for using WebAuthn: registration and authe
 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 for WebAuthn to sign, and receive a signature in return.
 
+In the frontend section, you will see in detail what these ceremonies look like.
+
 ### Signatures
 
 WebAuthn uses a different signature scheme than what is typically used in blockchain.
-
 WebAuthn uses the secp256r1 elliptic curve for signing, while standard accounts in blockchain use the secp256k1 curve.
 
-Without a helper function to handle verifying secp256r1 signatures, it's very 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.
+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 demo app.
diff --git a/content/tutorials/signing-transactions-with-webauthn/20.contracts.md b/content/tutorials/signing-transactions-with-webauthn/20.building-the-contracts.md
similarity index 70%
rename from content/tutorials/signing-transactions-with-webauthn/20.contracts.md
rename to content/tutorials/signing-transactions-with-webauthn/20.building-the-contracts.md
index 2cd570ca..c463ef5b 100644
--- a/content/tutorials/signing-transactions-with-webauthn/20.contracts.md
+++ b/content/tutorials/signing-transactions-with-webauthn/20.building-the-contracts.md
@@ -37,102 +37,129 @@ rm -rf ./test/*
 
 ## Contracts
 
-Open the `zksync-webauthn` folder in your preferred IDE.
+Open the `zksync-webauthn/contracts` folder in your preferred IDE.
 
 We will be creating 4 contracts:
 
-- `AAFactory.sol`: a factory contract to deploy new instances of smart accounts.
-- `Account.sol`: the contract for the smart account.
 - `GeneralPaymaster.sol`: a general paymaster contract to sponsor transactions.
 - `MyNFT.sol`: a generic NFT contract.
+- `AAFactory.sol`: a factory contract to deploy new instances of smart accounts.
+- `Account.sol`: the contract for the smart account.
 
-Create the new contract files in the `contracts/contracts` folder:
+### Paymaster Contract
+
+Create a new file in the `contracts/contracts` folder called `GeneralPaymaster.sol`.
 
 ```shell
-touch {contracts/AAFactory.sol,contracts/Account.sol,contracts/GeneralPaymaster.sol,contracts/MyNFT.sol}
+touch contracts/GeneralPaymaster.sol
 ```
 
-Copy and paste the code below into respective files:
-
-### AA Factory
-
 ::drop-panel
-::panel{label="AAFactory.sol"}
+::panel{label="GeneralPaymaster.sol"}
 
-  ```solidity [contracts/AAFactory.sol]
-  :code-import{filePath="webauthn/contracts/contracts/AAFactory.sol"}
-  ```
+```solidity [contracts/GeneralPaymaster.sol]
+:code-import{filePath="webauthn/contracts/contracts/GeneralPaymaster.sol"}
+```
 
 ::
 ::
 
-### Smart Contract Account
+This is a basic paymaster contract that allows us to sponsor transactions for users of our app.
+
+### NFT Contract
+
+Create a file in the `contracts/contracts` folder called `MyNFT.sol`.
+
+```shell
+touch contracts/MyNFT.sol
+```
 
 ::drop-panel
-::panel{label="Account.sol"}
+::panel{label="MyNFT.sol"}
 
-```solidity [contracts/Account.sol]
-:code-import{filePath="webauthn/contracts/contracts/Account.sol"}
+```solidity [contracts/MyNFT.sol]
+:code-import{filePath="webauthn/contracts/contracts/MyNFT.sol"}
 ```
 
 ::
 ::
 
-### Paymaster Contract
+This is a generic NFT contract that mints svg images of Zeek using different colors.
+We will use this to test interacting with smart contracts using WebAuthn.
 
-::drop-panel
-::panel{label="GeneralPaymaster.sol"}
+### AA Factory
 
-```solidity [contracts/GeneralPaymaster.sol]
-:code-import{filePath="webauthn/contracts/contracts/GeneralPaymaster.sol"}
+Create a file in the `contracts/contracts` folder called `AAFactory.sol`.
+
+```shell
+touch contracts/AAFactory.sol
 ```
 
+::drop-panel
+::panel{label="AAFactory.sol"}
+
+  ```solidity [contracts/AAFactory.sol]
+  :code-import{filePath="webauthn/contracts/contracts/AAFactory.sol"}
+  ```
+
 ::
 ::
 
-### NFT Contract
+This contract is a factory contract responsbile for deploying new instances of the `Account.sol` contract.
+
+### Smart Contract Account
+
+Finally, create a file in the `contracts/contracts` folder called `Account.sol`.
+
+```shell
+touch contracts/Account.sol
+```
 
 ::drop-panel
-::panel{label="MyNFT.sol"}
+::panel{label="Account.sol"}
 
-```solidity [contracts/MyNFT.sol]
-:code-import{filePath="webauthn/contracts/contracts/MyNFT.sol"}
+```solidity [contracts/Account.sol]
+:code-import{filePath="webauthn/contracts/contracts/Account.sol"}
 ```
 
 ::
 ::
 
-## Understanding the WebAuthn Signature Validation
+The smart account contract is where we perform the WebAuthn signature validation.
+
+### Understanding WebAuthn Signature Validation
 
 The smart contract account implements a way to validate signatures created with WebAuthn.
 
 The `_validateTransaction` function first checks to see if there is a valid secp256k1 signature from the account owner,
-just like the example in the TUTORIAL TODO: LINK.
-
+just like the example in the [Native AA Multisig](https://code.zksync.io/tutorials/native-aa-multisig) tutorial.
 If the transaction is not signed by the standard account owner, the next check is to see if the transaction contains a valid WebAuthn signature.
 
 ```solidity [contracts/Account.sol]
 :code-import{filePath="webauthn/contracts/contracts/Account.sol:_validateTransaction"}
 ```
 
-The contract contains a state variable `r1Owner` to store the the public key of the WebAuthn account that the owner can register.
+The contract contains a state variable `r1Owner` to store the public key of the WebAuthn account that the owner wants to use.
+The `updateR1Owner` function can update the value of the `r1Owner`.
 
 ```solidity [contracts/Account.sol]
 :code-import{filePath="webauthn/contracts/contracts/Account.sol:r1Owner"}
 ```
 
 ```solidity [contracts/Account.sol]
-:code-import{filePath="webauthn/contracts/contracts/Account.sol:validateWebAuthnSignature"}
+:code-import{filePath="webauthn/contracts/contracts/Account.sol:updateR1Owner"}
 ```
 
-### Validating the Signature
-
 To validate the signature, the `_validateWebAuthnSignature` first extracts the `authenticatorData`, `clientData`, and `rs` values from the decoded signature.
 
-It extracts the WebAuthn challenge from the `clientData`, and checks to see if it matches the transaction hash.
+It's important to note that the WebAuthn authentication process doesn't just sign the transaction data we send as a challenge.
+The WebAuthn authentication process returns three pieces of information that we need for the validation process:
+the WebAuthn signature, the `authenticatorData`, and the `clientData`.
+
+The `extractChallengeFromClientData` extracts the WebAuthn challenge from the `clientData`, and checks to see if it matches the transaction hash.
 This means that the exact transaction data that is submitted to the contract matches the transaction data signed by the WebAuthn account.
 
-It checks for the malleability of the signature,
+Next, the `_validateWebAuthnSignature` function checks for the malleability of the signature,
 and checks to see if the WebAuthn user flags are set.
 
 Finally, it calls the `callVerifier` function to call the `P256Verify` precompile.
@@ -141,7 +168,7 @@ Finally, it calls the `callVerifier` function to call the `P256Verify` precompil
 :code-import{filePath="webauthn/contracts/contracts/Account.sol:_validateWebAuthnSignature"}
 ```
 
-The `callVerifier` function encodes the input for into the correct format and calls the `P256Verify` precompile.
+The `callVerifier` function encodes the input into the correct format and calls the `P256Verify` precompile.
 
 If the returned output is empty, the validation evaluated to false.
 This means that the public key derived from the WebAuthn signature does not match the registered `r1Owner` public key.
diff --git a/content/tutorials/signing-transactions-with-webauthn/30.building-the-frontend.md b/content/tutorials/signing-transactions-with-webauthn/30.building-the-frontend.md
new file mode 100644
index 00000000..1f51bf7e
--- /dev/null
+++ b/content/tutorials/signing-transactions-with-webauthn/30.building-the-frontend.md
@@ -0,0 +1,238 @@
+---
+title: Building the Frontend
+description: Build the frontend for the WebAuthn app.
+
+---
+
+## Frontend Setup
+
+We will use Next.js to build the frontend.
+
+Move out of your `contract` folder and into the `zksync-webauthn` folder.
+Make a new Next.js project for the frontend using the configuration below:
+
+```shell
+npx create-next-app@latest
+```
+
+```txt
+✔ What is your project named? … frontend
+✔ Would you like to use TypeScript? Yes
+✔ Would you like to use ESLint? Yes
+✔ Would you like to use Tailwind CSS? No
+✔ Would you like to use `src/` directory? Yes
+✔ Would you like to use App Router? (recommended) No
+✔ Would you like to customize the default import alias (@/*)? No
+```
+
+Move into your projects and install the dependencies below:
+
+```shell
+cd frontend
+npm install @simplewebauthn/browser@10.0.0 @simplewebauthn/server@10.0.1 cbor@9.0.2 ethers@5.7.2 zksync-ethers@5.1.0
+```
+
+## Home Page
+
+We can start by replacing the home page with one that has four links for each page we will make.
+
+Replace your `frontend/src/pages/index.tsx` file with the code below.
+Then, replace the `AA_FACTORY_ADDRESS`, `NFT_CONTRACT_ADDRESS`, and `PAYMASTER_ADDRESS`
+variables at the top with the deployed addresses from the last section.
+
+::drop-panel
+::panel{label="index.tsx"}
+
+```ts [frontend/src/pages/index.tsx]
+:code-import{filePath="webauthn/frontend/src/pages/index.tsx"}
+```
+
+::
+::
+
+### Layout
+
+Next, let's create the `Layout` component used in the home page.
+
+Create a `src/components` folder and a new file inside called `Layout.tsx`.
+
+```shell
+mkdir src/components
+touch src/components/Layout.tsx
+```
+
+Copy the `Layout` component below to your file:
+
+::drop-panel
+::panel{label="Layout.tsx"}
+
+```ts [frontend/src/components/Layout.tsx]
+:code-import{filePath="webauthn/frontend/src/components/Layout.tsx"}
+```
+
+::
+::
+
+### Styles
+
+Let's also update the styles in `globals.css`.
+
+::drop-panel
+::panel{label="globals.css"}
+
+```ts [frontend/src/styles/globals.css]
+:code-import{filePath="webauthn/frontend/src/styles/globals.css"}
+```
+
+::
+::
+
+## API
+
+Let's setup our API endpoints next.
+We need to do this because some parts of the WebAuthn ceremonies must run on a server instead of the client.
+
+### Get Registration Options
+
+Create a new file in the `src/pages/api` folder called `get-registration-options.ts`.
+
+```shell
+touch src/pages/api/get-registration-options.ts
+```
+
+::drop-panel
+::panel{label="get-registration-options.ts"}
+
+```ts [frontend/src/pages/api/get-registration-options.ts]
+:code-import{filePath="webauthn/frontend/src/pages/api/get-registration-options.ts"}
+```
+
+::
+::
+
+The `get-registration-options` endpoint is used to generate the options input object for the WebAuthn registration ceremony.
+
+These options tell the browser how to configure the registration,
+including setting the name of the passkey, the domain of the application making the request, and whether user verification is required.
+You can learn more about the options available for registration in the [`simplewebauthn` docs](https://simplewebauthn.dev/docs/packages/server#1-generate-registration-options).
+
+### Get Authentication Options
+
+Create another file in the `src/pages/api` folder called `generate-authentication-options.ts`.
+
+```shell
+touch src/pages/api/generate-authentication-options.ts
+```
+
+::drop-panel
+::panel{label="generate-authentication-options.ts"}
+
+```ts [frontend/src/pages/api/generate-authentication-options.ts]
+:code-import{filePath="webauthn/frontend/src/pages/api/generate-authentication-options.ts"}
+```
+
+::
+::
+
+The `generate-authentication-options` endpoint is used to generate the options input object for the WebAuthn authentication ceremony.
+You can learn more about the options available for authentication in the [`simplewebauthn` docs](https://simplewebauthn.dev/docs/packages/server#1-generate-authentication-options).
+
+The challenge passed in through the request body represents the transaction data that would normally be signed by a wallet like Metamask.
+The `generateAuthenticationOptions` method converts the challenge to a base64 URL for the options input object.
+
+If you want to verify that the final base64URL challenge is indeed equal to the input challenge,
+you can use the `isoBase64URL` method provided by `@simplewebauthn`.
+
+```ts
+import { isoBase64URL } from '@simplewebauthn/server/helpers';
+```
+
+## Utils
+
+Next, let's make a new folder called `utils` where we can add some utility functions.
+
+```shell
+mkdir utils
+```
+
+### String Conversions
+
+Create a new file inside the `utils` folder called `string.ts` to help handle some string conversions we will need to work with hex values and base64 URLs.
+
+```shell
+touch utils/string.ts
+```
+
+::drop-panel
+::panel{label="string.ts"}
+
+```ts [frontend/utils/string.ts]
+:code-import{filePath="webauthn/frontend/utils/string.ts"}
+```
+
+::
+::
+
+### Transaction Utils
+
+Next, create a file called `tx.ts`.
+
+```shell
+touch utils/tx.ts
+```
+
+::drop-panel
+::panel{label="tx.ts"}
+
+```ts [frontend/utils/tx.ts]
+:code-import{filePath="webauthn/frontend/utils/tx.ts"}
+```
+
+::
+::
+
+This file contains helper functions to get data for a transaction
+and register a new passkey in a smart account.
+
+- The `getTransaction` function constructs a transaction that is sponsored by the paymaster contract using the `getPaymasterOverrides` function.
+
+- The `registerKeyInAccount` function sends a transaction to register a new passkey as the `r1Owner` of a smart account.
+The `updateR1Owner` function must be called by the smart contract account itself.
+Because there is no passkey registered yet, the original wallet that created the account must sign the transaction, which we can pass as a custom signature.
+This means that wallet passed into this function must be the same wallet created in the "Create Account" page.
+
+### WebAuthn Utils
+
+The last file we need to add in the `utils` folder is called `webauthn.ts`,
+
+```shell
+touch utils/webauthn.ts
+```
+
+::drop-panel
+::panel{label="webauthn.ts"}
+
+```ts [frontend/utils/tx.ts]
+:code-import{filePath="webauthn/frontend/utils/webauthn.ts"}
+```
+
+::
+::
+
+This file contains helper functions to start the WebAuthn authentication process and
+send transactions with a WebAuthn signature.
+
+- The `authenticate` function gets the authentication options from the endpoint we set up earlier,
+and passes them into the `startAuthentication` method provided by `@simplewebauthn`.
+
+- The `signAndSend` function takes the response from the authentication process and processes it so it's in the correct format for the smart account contract.
+Remember that WebAuthn authentication process returns three pieces of information that we need for validation:
+the WebAuthn signature, the `authenticatorData`, and the `clientData`.
+The `getSignatureFromAuthResponse` function encodes the `rs` values from the signature along with the `authenticatorData` and the `clientData`
+into one signature that can be passed into the smart contract via the transaction `customData.customSignature`.
+
+- The `getDataToSign` function generates a signed digest of a transaction.
+
+- The `getPublicKeyFromAuthenticatorData` function extracts the public key from the `authenticatorData` returned from the registration process.
+
+Let's complete the frontend in the next section.
diff --git a/content/tutorials/signing-transactions-with-webauthn/30.frontend.md b/content/tutorials/signing-transactions-with-webauthn/30.frontend.md
deleted file mode 100644
index 02dc2c32..00000000
--- a/content/tutorials/signing-transactions-with-webauthn/30.frontend.md
+++ /dev/null
@@ -1,227 +0,0 @@
----
-title: Building the Frontend
-description: Build the frontend for the WebAuthn app.
-
----
-
-## Frontend Setup
-
-We will use Next.js to build the frontend.
-
-Move out of your `contract` folder and into the `zksync-webauthn` folder.
-Make a new Next.js project for the frontend using the configuration below:
-
-```shell
-npx create-next-app@latest
-```
-
-```txt
-✔ What is your project named? … frontend
-✔ Would you like to use TypeScript? Yes
-✔ Would you like to use ESLint? Yes
-✔ Would you like to use Tailwind CSS? No
-✔ Would you like to use `src/` directory? Yes
-✔ Would you like to use App Router? (recommended) No
-✔ Would you like to customize the default import alias (@/*)? No
-```
-
-Move into your projects and install the dependencies below:
-
-```shell
-cd frontend
-npm install @simplewebauthn/browser@10.0.0 @simplewebauthn/server@10.0.1 cbor@9.0.2 ethers@5.7.2 zksync-ethers@5.1.0
-```
-
-## Home Page
-
-Replace your `frontend/src/pages/index.tsx` file with the code below:
-
-::drop-panel
-::panel{label="index.tsx"}
-
-```ts [frontend/src/pages/index.tsx]
-:code-import{filePath="webauthn/frontend/src/pages/index.tsx"}
-```
-
-::
-::
-
-## Layout
-
-Create a `src/components` folder for the `Layout` component.
-
-::drop-panel
-::panel{label="layout.tsx"}
-
-```ts [frontend/src/components/Layout.tsx]
-:code-import{filePath="webauthn/frontend/src/components/Layout.tsx"}
-```
-
-::
-::
-
-## Hooks
-
-Next, create a `src/hooks` folder and add the hooks below to manage the created smart account.
-
-The `useAccount` hook saves and retrieves the account address of the user's smart account using local storage.
-
-::drop-panel
-::panel{label="useAccount.tsx"}
-
-```ts [frontend/src/hooks/useAccount.tsx]
-:code-import{filePath="webauthn/frontend/src/hooks/useAccount.tsx"}
-```
-
-::
-::
-
-The `useWallet` hook temporarily saves the full wallet owner of the deployed smart contract account to use for registering a passkey.
-
-::drop-panel
-::panel{label="useWallet.tsx"}
-
-```ts [frontend/src/hooks/useWallet.tsx]
-:code-import{filePath="webauthn/frontend/src/hooks/useWallet.tsx"}
-```
-
-::
-::
-
-## API
-
-The `get-registration-options` route is used to generate the options input object for the WebAuthn registration ceremony.
-
-These options tell the browser how to configure the registration,
-including setting the name of the passkey, requiring multi-factor authentication, and more.
-You can learn more about the options available for registration in the [`simplewebauthn` docs](https://simplewebauthn.dev/docs/packages/server#1-generate-registration-options).
-
-::drop-panel
-::panel{label="get-registration-options.ts"}
-
-```ts [frontend/src/pages/api/get-registration-options.ts]
-:code-import{filePath="webauthn/frontend/src/pages/api/get-registration-options.ts"}
-```
-
-::
-::
-
-The `generate-authentication-options` route is used to generate the options input object for the WebAuthn authentication ceremony.
-You can learn more about the options available for authentication in the [`simplewebauthn` docs](https://simplewebauthn.dev/docs/packages/server#1-generate-authentication-options).
-
-The challenge passed in through the request body represents the transaction data that would normally be signed by a wallet like Metamask.
-In this case, however, instead of sending to a wallet we are sending the transaction to the browser to sign with WebAuthn.
-
-::drop-panel
-::panel{label="generate-authentication-options.ts"}
-
-```ts [frontend/src/pages/api/generate-authentication-options.ts]
-:code-import{filePath="webauthn/frontend/src/pages/api/generate-authentication-options.ts"}
-```
-
-::
-::
-
-## Utils
-
-Make a new folder called `frontend/utils` where you can add some utility functions for your app.
-
-Create a new file inside the `utils` folder called `string.ts` to help handle some string conversions you will need.
-
-::drop-panel
-::panel{label="string.ts"}
-
-```ts [frontend/utils/string.ts]
-:code-import{filePath="webauthn/frontend/utils/string.ts"}
-```
-
-::
-::
-
-Next, create a file called `tx.ts`.
-This file contains helper functions to get data for a transaction
-and register a new passkey in a smart account.
-
-::drop-panel
-::panel{label="tx.ts"}
-
-```ts [frontend/utils/tx.ts]
-:code-import{filePath="webauthn/frontend/utils/tx.ts"}
-```
-
-::
-::
-
-The last file in the `utils` folder is called `webauthn.ts`,
-which contains helper functions to start the WebAuthn authentication process,
-sign and send transactions.
-
-::drop-panel
-::panel{label="webauthn.ts"}
-
-```ts [frontend/utils/tx.ts]
-:code-import{filePath="webauthn/frontend/utils/webauthn.ts"}
-```
-
-::
-::
-
-## Pages
-
-Inside the `frontend/src/pages` folder create four new pages: `create-account.tsx`, `register.tsx`, `mint.tsx`, and `transfer.tsx`:
-
-::drop-panel
-::panel{label="create-account.tsx"}
-
-```ts [frontend/src/pages/create-account.tsx]
-:code-import{filePath="webauthn/frontend/src/pages/create-account.tsx"}
-```
-
-::
-::
-
-::drop-panel
-::panel{label="register.tsx"}
-
-```ts [frontend/src/pages/register.tsx]
-:code-import{filePath="webauthn/frontend/src/pages/register.tsx"}
-```
-
-::
-::
-
-::drop-panel
-::panel{label="mint.tsx"}
-
-```ts [frontend/src/pages/mint.tsx]
-:code-import{filePath="webauthn/frontend/src/pages/mint.tsx"}
-```
-
-::
-::
-
-::drop-panel
-::panel{label="transfer.tsx"}
-
-```ts [frontend/src/pages/transfer.tsx]
-:code-import{filePath="webauthn/frontend/src/pages/transfer.tsx"}
-```
-
-::
-::
-
-## Running the App
-
-Start the frontend app by running the command below in the `frontend` folder:
-
-```shell
-npm run dev
-```
-
-You can now try out the app!
-
-Follow the order of the buttons on the home page:
-
-1. Start by creating a new account.
-1. Next, register a new passkey.
-1. Finally, you can use the registered passkey to transfer ETH and mint an NFT!
diff --git a/content/tutorials/signing-transactions-with-webauthn/40.completing-the-frontend.md b/content/tutorials/signing-transactions-with-webauthn/40.completing-the-frontend.md
new file mode 100644
index 00000000..43b844b5
--- /dev/null
+++ b/content/tutorials/signing-transactions-with-webauthn/40.completing-the-frontend.md
@@ -0,0 +1,211 @@
+---
+title: Completing the Frontend
+description: Complete the frontend for the WebAuthn app.
+
+---
+
+## Hooks
+
+Next, create a `src/hooks` folder and add the hooks below to manage the created smart account.
+
+```shell
+mkdir src/hooks
+```
+
+We will create two hooks: `useAccount` and `useWallet`.
+
+::callout{icon="i-heroicons-exclamation-circle"}
+Note that these hooks are not the ideal implementation to manage the created smart account.
+They should only be used for demonstration purposes.
+::
+
+### `useAccount`
+
+Create a new file in the `hooks` folder called `useAccount.tsx`.
+
+```shell
+touch src/hooks/useAccount.tsx
+```
+
+::drop-panel
+::panel{label="useAccount.tsx"}
+
+```ts [frontend/src/hooks/useAccount.tsx]
+:code-import{filePath="webauthn/frontend/src/hooks/useAccount.tsx"}
+```
+
+::
+::
+
+The `useAccount` hook saves and retrieves the public account address of the user's smart account using local storage.
+This allows the app to "remember" the created account after the user has closed the app.
+
+### `useWallet`
+
+Create another file in the `hooks` folder called `useWallet.tsx`.
+
+```shell
+touch src/hooks/useWallet.tsx
+```
+
+::drop-panel
+::panel{label="useWallet.tsx"}
+
+```ts [frontend/src/hooks/useWallet.tsx]
+:code-import{filePath="webauthn/frontend/src/hooks/useWallet.tsx"}
+```
+
+::
+::
+
+The `useWallet` hook temporarily saves the full wallet owner of the deployed smart contract account to use for registering a passkey.
+This is used after the registration ceremony when the user wants to register their passkey as the `r1Owner` of the account,
+which requires the private key of the initial wallet that made the smart account.
+
+In a real-world app, this exact implementation isn't ideal.
+Note that the wallet isn't stored permanently, so once the user closes and returns to the app,
+they cannot register a new passkey to the smart account without inputing their private key.
+However, the user could still transfer ETH and mint the NFT as the passkey and public account address are still available.
+
+### Adding the Hooks to `_app.tsx`
+
+Import the hooks into your `src/pages/_app.tsx` file and wrap your app in the hook providers.
+
+::drop-panel
+::panel{label="_app.tsx"}
+
+```ts [frontend/src/pages/_app.tsx]
+:code-import{filePath="webauthn/frontend/src/pages/_app.tsx"}
+```
+
+::
+::
+
+This file also creates a new `Provider` connected to our local `era_test_node` running on port `8011` and passes it into every page.
+
+## Pages
+
+Finally, let's create the pages and put everything together.
+
+Inside the `frontend/src/pages` folder we will create four new pages: `create-account.tsx`, `register.tsx`, `mint.tsx`, and `transfer.tsx`.
+
+### Create Account
+
+Create a new file in the `src/pages` folder called `create-account.tsx`.
+
+```shell
+touch src/pages/create-account.tsx
+```
+
+::drop-panel
+::panel{label="create-account.tsx"}
+
+```ts [frontend/src/pages/create-account.tsx]
+:code-import{filePath="webauthn/frontend/src/pages/create-account.tsx"}
+```
+
+::
+::
+
+This page is where users can deploy a new instance of a smart account using the `AAFactory` contract.
+The wallet used to create the acccount is saved temporaily saved in the application using the `useSetWallet` hook,
+and the deployed smart contract account address is saved to the browser's local storage with the `useSetAccount` hook.
+For testing purposes, when a new account is created, some test funds are sent to the account from a pre-configured rich wallet.
+
+### Register Passkey
+
+Create a new file in the `src/pages` folder called `register.tsx`.
+
+```shell
+touch src/pages/register.tsx
+```
+
+::drop-panel
+::panel{label="register.tsx"}
+
+```ts [frontend/src/pages/register.tsx]
+:code-import{filePath="webauthn/frontend/src/pages/register.tsx"}
+```
+
+::
+::
+
+The register page is where users can go through the WebAuthn registration process to create a new passkey,
+and then register that passkey as the `r1Owner` in their smart contract account.
+
+Users can input a string as the name of the new passkey they want to register, and then click the "Register New Passkey" button.
+The first step in the `registerNewPasskey` function is to use the `platformAuthenticatorIsAvailable` method to check if the user's device supports WebAuthn.
+
+Next, the `get-registration-options` endpoint we created earlier is called to get the registration options
+and pass them into the `startRegistration` method provided by `@simplewebauthn`.
+The name input from the user is passed along with `localhost` as relying party's (`rp`) name and ID.
+
+Once the passkey is registered to the browser, the public key is extraced from the response and registered as the `r1Owner` in the user's account.
+
+### Transfer ETH
+
+Create a new file in the `src/pages` folder called `transfer.tsx`.
+
+```shell
+touch src/pages/transfer.tsx
+```
+
+::drop-panel
+::panel{label="transfer.tsx"}
+
+```ts [frontend/src/pages/transfer.tsx]
+:code-import{filePath="webauthn/frontend/src/pages/transfer.tsx"}
+```
+
+::
+::
+
+The transfer page is where users can transfer any amount of ETH to a given address
+using their WebAuthn passkey to sign the transaction.
+
+The `sendTransfer` function uses the `getTransaction` and `getDataToSign` functions from the `utils`
+to create the transaction challenge to be signed.
+Then, it calls the `authenticate` function from the `utils` to get the WebAuthn authentication response,
+which finally gets passed to the `signAndSend` function.
+
+### Mint NFT
+
+Create a new file in the `src/pages` folder called `mint.tsx`.
+
+```shell
+touch src/pages/mint.tsx
+```
+
+::drop-panel
+::panel{label="mint.tsx"}
+
+```ts [frontend/src/pages/mint.tsx]
+:code-import{filePath="webauthn/frontend/src/pages/mint.tsx"}
+```
+
+::
+::
+
+The last page is to mint an NFT using WebAuthn.
+The `mint` function works very similar to the `sendTransfer` function on the transfer page,
+but has a couple of extra steps.
+Instead of sending empty data in the transaction, it prepares the function call data by encoding it.
+Once the transaction is complete, it looks through the logs to find the token ID and fetch the NFT artwork to display.
+
+## Running the App
+
+Start the frontend app by running the command below in the `frontend` folder:
+
+```shell
+npm run dev
+```
+
+You can now try out the app!
+
+Follow the order of the buttons on the home page:
+
+1. Start by creating a new account.
+1. Next, register a new passkey.
+1. Finally, you can use the registered passkey to transfer ETH and mint an NFT!
+
+Note: You can edit or remove your browser passkeys by going to `chrome://settings/passkeys`.
diff --git a/content/tutorials/signing-transactions-with-webauthn/_dir.yml b/content/tutorials/signing-transactions-with-webauthn/_dir.yml
index 876c5caf..7daecefd 100644
--- a/content/tutorials/signing-transactions-with-webauthn/_dir.yml
+++ b/content/tutorials/signing-transactions-with-webauthn/_dir.yml
@@ -8,14 +8,14 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - webauthn
   - account abstraction
-summary: Use webauthn to sign transactions
+summary: Learn how to use WebAuthn to sign transactions for smart accounts.
 description: In this tutorial, you will learn how to use WebAuthn to sign transactions for smart accounts.
 what_you_will_learn:
   - How to use WebAuthn
   - How to send transactions with custom signatures
   - How to validate WebAuthn signatures
   - How to use the P256Verify precompile
-updated: 2024-09-12
+updated: 2024-09-13
 tools:
   - WebAuthn
   - zksync-ethers