Credential: {credential.id}
Address: {smartAccountClient?.account?.address}
// [!code focus]Address: {smartAccountClient?.account?.address}
// [!code focus]// [!code focus] Signature:
{signature} // [!code focus]
// [!code focus]
)} // [!code focus]
{isVerified !== undefined && ( // [!code focus]
Verified: {isVerified.toString()}
// [!code focus] )} // [!code focus] // [!code focus] ) // [!code focus] } ``` :::: ### How to create a Passkey (WebAuthn) server This guide will walk you through the steps to create your own Passkey (WebAuthn) server. ::::steps #### Install the required packages ```bash npm install @simplewebauthn/server @levischuck/tiny-cbor fastify @fastify/cors zod ``` :::info This guide will use the `fastify` framework to create the passkeys server. You can choose to use any other framework to serve the API. ::: #### Create a server ```ts import Fastify, { FastifyReply, FastifyRequest } from "fastify" import cors from "@fastify/cors" import { z } from "zod" const app = Fastify() // Optional: Enable CORS app.register(cors, { origin: "*" }) // Define the schema for the request export const pksStartRegistrationRequestSchema = z.object({ method: z.literal("pks_startRegistration"), params: z.tuple([ z.object({ userName: z.string() }) ]), jsonrpc: z.literal("2.0"), id: z.number() }) export const pksVerifyRegistrationRequestSchema = z.object({ method: z.literal("pks_verifyRegistration"), params: z.tuple([ z.object({ id: z.string(), rawId: z.string(), response: z.object({ clientDataJSON: z.string(), attestationObject: z.string(), authenticatorData: z.string().optional(), transports: z .array( z.enum([ "ble", "cable", "hybrid", "internal", "nfc", "smart-card", "usb" ]) ) .optional(), publicKeyAlgorithm: z.number().optional(), publicKeyType: z.string().optional() }), authenticatorAttachment: z.enum(["cross-platform", "platform"]), clientExtensionResults: z.object({ appid: z.boolean().optional(), credProps: z .object({ rk: z.boolean().optional() }) .optional(), hmacCreateSecret: z.boolean().optional() }), type: z.literal("public-key") }), z.object({ userName: z.string() }) ]), jsonrpc: z.literal("2.0"), id: z.number() }) export const pksGetCredentialsRequestSchema = z.object({ method: z.literal("pks_getCredentials"), params: z.tuple([ z.object({ userName: z.string() }) ]), jsonrpc: z.literal("2.0"), id: z.number() }) export const bodySchema = z.discriminatedUnion("method", [ pksStartRegistrationRequestSchema, pksVerifyRegistrationRequestSchema, pksGetCredentialsRequestSchema ]) app.get("/rpc", async (request: FastifyRequest, reply: FastifyReply) => { const body = request.query as any const result = bodySchema.safeParse(body) if (!result.success) { // Invalid request return reply.status(400).send({ jsonrpc: "2.0", id: body.id || 0, error: { code: -32600, message: "Invalid request" } }) } if (result.data.method === "pks_startRegistration") { // Start registration return pksStartRegistrationHandler(request, reply) } else if (result.data.method === "pks_verifyRegistration") { // Verify registration return pksVerifyRegistrationHandler(request, reply) } else if (result.data.method === "pks_getCredentials") { // Get credentials return pksGetCredentialsHandler(request, reply) } }) ``` #### Start registration ```ts import { generateRegistrationOptions } from "@simplewebauthn/server" const pksStartRegistrationHandler = async ( body: z.inferCredential: {credential.id}
Address: {smartAccountClient?.account?.address}
// [!code focus]Address: {smartAccountClient?.account?.address}
// [!code focus]// [!code focus] Signature:
{signature} // [!code focus]
// [!code focus]
)} // [!code focus]
{isVerified !== undefined && ( // [!code focus]
Verified: {isVerified.toString()}
// [!code focus] )} // [!code focus] // [!code focus] ) // [!code focus] } ``` :::: ## How to use a Privy signer with permissionless.js permissionless.js allows you to plug in custom signers to control the accounts that you create. Privy is an embedded wallet provider that allows you to easily onboard users to your dapp. It is possible to use Privy as a signer with permissionless.js, allowing you to use Privy to create and control smart accounts and sign transactions. Additionally you may want to look at Privy's guide on working with permissionless.js [here](https://docs.privy.io/guide/react/recipes/account-abstraction/pimlico). :::steps #### Install the dependencies ```bash npm i @privy-io/react-auth @privy-io/wagmi-connector permissionless viem wagmi ``` #### Create the Privy provider Following Privy's [quickstart guide](https://docs.privy.io/guide/quickstart), set up the Privy provider in your app. Also integrate the PrivyWagmiConnector, which will allow you to use Privy as a signer with permissionless.js. ```ts import { PrivyProvider } from '@privy-io/react-auth'; import { PrivyWagmiConnector } from '@privy-io/wagmi-connector';Smart Contract Wallet: {address}
Transaction Hash:
{hash}
Waiting for confirmation...
} {isConfirmed &&Transaction confirmed
} {error &&Error: {error.message}
}Credential: {credential.id}
Address: {smartAccountClient?.account?.address}
// [!code focus]Address: {smartAccountClient?.account?.address}
// [!code focus]// [!code focus] Signature:
{signature} // [!code focus]
// [!code focus]
)} // [!code focus]
{isVerified !== undefined && ( // [!code focus]
Verified: {isVerified.toString()}
// [!code focus] )} // [!code focus] // [!code focus] ) // [!code focus] } ``` :::: ### How to create a Passkey (WebAuthn) server This guide will walk you through the steps to create your own Passkey (WebAuthn) server. ::::steps #### Install the required packages ```bash npm install @simplewebauthn/server @levischuck/tiny-cbor fastify @fastify/cors zod ``` :::info This guide will use the `fastify` framework to create the passkeys server. You can choose to use any other framework to serve the API. ::: #### Create a server ```ts import Fastify, { FastifyReply, FastifyRequest } from "fastify" import cors from "@fastify/cors" import { z } from "zod" const app = Fastify() // Optional: Enable CORS app.register(cors, { origin: "*" }) // Define the schema for the request export const pksStartRegistrationRequestSchema = z.object({ method: z.literal("pks_startRegistration"), params: z.tuple([ z.object({ userName: z.string() }) ]), jsonrpc: z.literal("2.0"), id: z.number() }) export const pksVerifyRegistrationRequestSchema = z.object({ method: z.literal("pks_verifyRegistration"), params: z.tuple([ z.object({ id: z.string(), rawId: z.string(), response: z.object({ clientDataJSON: z.string(), attestationObject: z.string(), authenticatorData: z.string().optional(), transports: z .array( z.enum([ "ble", "cable", "hybrid", "internal", "nfc", "smart-card", "usb" ]) ) .optional(), publicKeyAlgorithm: z.number().optional(), publicKeyType: z.string().optional() }), authenticatorAttachment: z.enum(["cross-platform", "platform"]), clientExtensionResults: z.object({ appid: z.boolean().optional(), credProps: z .object({ rk: z.boolean().optional() }) .optional(), hmacCreateSecret: z.boolean().optional() }), type: z.literal("public-key") }), z.object({ userName: z.string() }) ]), jsonrpc: z.literal("2.0"), id: z.number() }) export const pksGetCredentialsRequestSchema = z.object({ method: z.literal("pks_getCredentials"), params: z.tuple([ z.object({ userName: z.string() }) ]), jsonrpc: z.literal("2.0"), id: z.number() }) export const bodySchema = z.discriminatedUnion("method", [ pksStartRegistrationRequestSchema, pksVerifyRegistrationRequestSchema, pksGetCredentialsRequestSchema ]) app.get("/rpc", async (request: FastifyRequest, reply: FastifyReply) => { const body = request.query as any const result = bodySchema.safeParse(body) if (!result.success) { // Invalid request return reply.status(400).send({ jsonrpc: "2.0", id: body.id || 0, error: { code: -32600, message: "Invalid request" } }) } if (result.data.method === "pks_startRegistration") { // Start registration return pksStartRegistrationHandler(request, reply) } else if (result.data.method === "pks_verifyRegistration") { // Verify registration return pksVerifyRegistrationHandler(request, reply) } else if (result.data.method === "pks_getCredentials") { // Get credentials return pksGetCredentialsHandler(request, reply) } }) ``` #### Start registration ```ts import { generateRegistrationOptions } from "@simplewebauthn/server" const pksStartRegistrationHandler = async ( body: z.inferCredential: {credential.id}
Address: {smartAccountClient?.account?.address}
// [!code focus]Address: {smartAccountClient?.account?.address}
// [!code focus]// [!code focus] Signature:
{signature} // [!code focus]
// [!code focus]
)} // [!code focus]
{isVerified !== undefined && ( // [!code focus]
Verified: {isVerified.toString()}
// [!code focus] )} // [!code focus] // [!code focus] ) // [!code focus] } ``` :::: ## How to use a Privy signer with permissionless.js permissionless.js allows you to plug in custom signers to control the accounts that you create. Privy is an embedded wallet provider that allows you to easily onboard users to your dapp. It is possible to use Privy as a signer with permissionless.js, allowing you to use Privy to create and control smart accounts and sign transactions. Additionally you may want to look at Privy's guide on working with permissionless.js [here](https://docs.privy.io/guide/react/recipes/account-abstraction/pimlico). :::steps #### Install the dependencies ```bash npm i @privy-io/react-auth @privy-io/wagmi-connector permissionless viem wagmi ``` #### Create the Privy provider Following Privy's [quickstart guide](https://docs.privy.io/guide/quickstart), set up the Privy provider in your app. Also integrate the PrivyWagmiConnector, which will allow you to use Privy as a signer with permissionless.js. ```ts import { PrivyProvider } from '@privy-io/react-auth'; import { PrivyWagmiConnector } from '@privy-io/wagmi-connector';