Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add webauthn tutorial #65

Merged
merged 26 commits into from
Sep 24, 2024
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
d050160
feat: code imports and webauthn demo app
sarahschwartz Sep 5, 2024
d9a3d21
Merge branch 'main' into sarah/p256-verify-tutorial
sarahschwartz Sep 5, 2024
9a76265
Update code/webauthn/frontend/src/pages/api/get-registration-options.ts
sarahschwartz Sep 9, 2024
b9d964b
Merge branch 'main' into sarah/p256-verify-tutorial
sarahschwartz Sep 9, 2024
f142034
fix: cleanup and prevent replays
sarahschwartz Sep 9, 2024
10844ad
fix: check webauthn challenge
sarahschwartz Sep 9, 2024
8a3c4bc
fix: cleanup
sarahschwartz Sep 9, 2024
a4b7552
refactor: cleanup
sarahschwartz Sep 10, 2024
c8c3e06
fix: address feedback
sarahschwartz Sep 10, 2024
da63c60
feat: add mint NFT page
sarahschwartz Sep 11, 2024
e83b67c
feat: flow is all frontend
sarahschwartz Sep 11, 2024
6f40762
docs: outline tutorial
sarahschwartz Sep 12, 2024
72cf03e
docs: update webauthn tutorial draft
sarahschwartz Sep 13, 2024
a0ccac3
docs: cleanup webauthn tutorial
sarahschwartz Sep 13, 2024
fd410b3
docs: fix webauthn page descriptions
sarahschwartz Sep 13, 2024
092c0a2
docs: update author
sarahschwartz Sep 16, 2024
aabce86
docs: add test for webauthn
sarahschwartz Sep 18, 2024
6a5ca2a
Merge branch 'main' into sarah/p256-verify-tutorial
sarahschwartz Sep 18, 2024
72a94c6
chore: address feedback
sarahschwartz Sep 19, 2024
64714c4
docs: add clarifying note
sarahschwartz Sep 19, 2024
7ee7e11
docs: clarify webauthn details
sarahschwartz Sep 19, 2024
4971f7b
chore: update deployer
sarahschwartz Sep 19, 2024
0adba6b
chore: use SmartAccount for registration
sarahschwartz Sep 19, 2024
4603a61
chore: merge conflicts
sarahschwartz Sep 23, 2024
03f46dc
chore: address feedback
sarahschwartz Sep 24, 2024
a758bf0
fix: revert register changes
sarahschwartz Sep 24, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/playwright.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ jobs:
- "tests/erc20-paymaster.spec.ts"
- "tests/how-to-test-contracts.spec.ts"
- "tests/daily-spend-limit.spec.ts"
- "tests/signing-txns-with-webauthn.spec.ts"
- "tests/native-aa-multisig.spec.ts"

steps:
Expand Down
57 changes: 57 additions & 0 deletions code/webauthn/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# Sign Transactions With Webauthn Example

This demo requires Google Chrome and a device that supports webauthn.

## Running Locally

### Install Dependencies

Run `npm install` in both the `frontend` and `contracts` folders.
Node version 20 is required.
sarahschwartz marked this conversation as resolved.
Show resolved Hide resolved

### Start a local node

Run a local in-memory node with `era_test_node`:

```shell
era_test_node run
```

### Deploying the Contracts

Deploy the AAFactory, paymaster, and NFT contracts:

```shell
npm run deploy
```

Once deployed, update the addresses in `frontend/utils/constants.ts`.
sarahschwartz marked this conversation as resolved.
Show resolved Hide resolved

### Deploying a New Smart Account

Go to the frontend folder and start a development server:

```shell
npm run dev
```

> Note: The next steps depend on the app running at port `3000`.

Open the app at `http://localhost:3000` and click the 'Create Account' button to navigate to the `/create-account` page.
Click the button to create a new account.
You can optionally save the private key logged.

### Registering a Webauthn Key

Go back to the home page and click the "Register Passkey" button

### Siging Transactions with Webauthn

Go back to the home page and click the `Transfer Funds` link.
Enter any amount into the input and try transfering the ETH.

You can also click the `Mint NFT` button on the home page to try minting an NFT.

### Managing Registered Passkeys

You can delete and edit your registered keys in Google Chrome by going to `chrome://settings/passkeys`.
1 change: 1 addition & 0 deletions code/webauthn/contracts/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
WALLET_PRIVATE_KEY=
117 changes: 117 additions & 0 deletions code/webauthn/contracts/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.vscode

# hardhat artifacts
artifacts
cache

# zksync artifacts
artifacts-zk
cache-zk

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# other
deploy-outputs.txt
deployments-zk
1 change: 1 addition & 0 deletions code/webauthn/contracts/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
legacy-peer-deps=true
21 changes: 21 additions & 0 deletions code/webauthn/contracts/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2023 Matter Labs

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
39 changes: 39 additions & 0 deletions code/webauthn/contracts/contracts/AAFactory.sol
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;

import "@matterlabs/zksync-contracts/l2/system-contracts/Constants.sol";
import "@matterlabs/zksync-contracts/l2/system-contracts/libraries/SystemContractsCaller.sol";

contract AAFactory {
bytes32 public aaBytecodeHash;

constructor(bytes32 _aaBytecodeHash) {
aaBytecodeHash = _aaBytecodeHash;
}

function deployAccount(
bytes32 salt,
address owner
) external returns (address accountAddress) {
(bool success, bytes memory returnData) = SystemContractsCaller
.systemCallWithReturndata(
uint32(gasleft()),
address(DEPLOYER_SYSTEM_CONTRACT),
uint128(0),
abi.encodeCall(
DEPLOYER_SYSTEM_CONTRACT.create2Account,
(
salt,
aaBytecodeHash,
abi.encode(owner),
IContractDeployer.AccountAbstractionVersion.Version1
)
)
);
require(success, "Deployment failed");

(accountAddress) = abi.decode(returnData, (address));
}
}


Loading
Loading