Passport
  • 👩‍💻Welcome
  • How Passport Works
    • Overview
    • Background
      • Threshold Cryptography
      • Secure Multi-Party Computation
      • Distributed Architecture
      • Secure Enclaves
    • In Depth
      • Under the Hood
      • User Flows and Account Controls
      • The Halides Model
      • End-to-End Encryption
      • Security
      • Node Operation
  • guides and examples
    • Getting Started
    • Quickstarts and Examples
      • Passkey Account
      • Clerk Auth
      • Lambda Quickstart
  • Authentication
    • Overview
    • Configuring your scope
    • Passkeys
      • Registration
        • Register using SDK
        • Register using API
          • Initiate Registration
          • Complete Registration
      • Authentication
        • Authenticating with SDK
        • Authenticating with API
          • Initiate Authentication
          • Complete Authentication
    • Developer Owned Auth
      • Registration
        • Register using SDK
        • Register using API
          • Delegate Registration
  • Wallet Operations
    • Overview
    • Passkeys Signer
      • Sign Message
        • Sign Message SDK
        • Sign Message API
      • Sign Transaction
        • Sign Transaction SDK
        • Sign Transaction API
    • DOA Signer
      • Sign Message
        • Sign Message SDK
        • Sign Message API
      • Sign Transaction
        • Sign Transaction SDK
        • Sign Transaction API
    • Viem Support
  • Programmability
    • Overview
    • Passport Lambda
    • Lambda Functions
      • Create Lambda
        • Create Lambda SDK
        • Create Lambda API
      • Execute Lambda
        • Execute Lambda SDK
        • Execute Lambda API
      • List Lambda
        • List Lambda SDK
        • List Lambda API
  • Appendix
    • Moving to Mainnet
    • State Of The Network
    • Generating DOA Keys
    • API Request Setup
      • Unauthenticated Requests
      • Authenticated Requests
Powered by GitBook
On this page
  • 1. Install the packages
  • 2. Choose your auth method
  • Passkeys
  • DOA
  • 3. Create WalletClient
  • 4. Use Viem as usual
  1. Wallet Operations

Viem Support

PreviousSign Transaction APINextOverview

Last updated 12 months ago

Passport Protocol uses an EIP 1193 compatible interface for signing messages, transaction and typed data. With this we've created a wallet client, which acts as a account which allows you to leverage all of Viem's features.

1. Install the packages

npm install viem @0xpass/passport-viem

pnpm install viem @0xpass/passport-viem

yarn add viem @0xpass/passport-viem

2. Choose your auth method

Passkeys

npm install @0xpass/webauthn-signer

pnpm install @0xpass/webauthn-signer

yarn add @0xpass/webauthn-signer

import { WebauthnSigner } from "@0xpass/webauthn-signer";

const signer = new WebauthnSigner({
      rpId: window.location.hostname,
      rpName: "rpName",
});

DOA

npm install @0xpass/key-signer

pnpm install @0xpass/key-signer

yarn add @0xpass/key-signer

import { KeySigner } from "@0xpass/key-signer";

const signer = new KeySigner(process.env.PRIVATE_KEY!, true);

In order to generate private key for DOA signer, follow Generating DOA Keys

3. Create WalletClient

To create a wallet client, you'll need to have a registered and authenticated account, to setup a WalletClient with each signer you can follow the examples below.

Passkey Signer

import { http, mainnet, WalletClient } from "viem/chains";
import { createPassportClient } from "@0xpass/passport-viem";
import { Passport } from "@0xpass/passport";

const signer: new WebauthnSigner({
  rpId: "rpId",
  rpName: "rpName",
})

const passport = new Passport({
    scopeId: "insert_your_scope_id",
    signer: signer
});

const userInput {
   username: "insert_registered_username_here"
   userDisplayName: "insert_registered_user_display_name_here"
}

await passport.setupEncryption();
const [authenticatedHeader] = await passport.authenticate(userInput);

const chain = mainnet;
const transport = http("any eth node endpoint");

// Create viem WalletClient using Passport
const client: WalletClient = await createPassportClient(
  authenticatedHeader,
  transport,
  chain
);

Developer Owned Auth Signer

import { Passport } from "@0xpass/passport";
import { KeySigner } from "@0xpass/key-signer";
import { createPassportClient } from "@0xpass/passport-viem";
import { walletClientToSmartAccountSigner } from "permissionless";
import { http } from "viem";
import { mainnet } from "viem/chains";

const signer = new KeySigner(process.env.PRIVATE_KEY!, true)

const passport = new Passport({
  scopeId: "scope_id",
  signer: signer
});

const fallbackProvider = http("insert_alchemy_url");

await passport.setupEncryption();
await passport.delegatedRegisterAccount({ username: "test" });

passport.setUserData({ username: "test" });

const chain = mainnet;
const transport = http("any eth node endpoint");

const client = await createPassportClient(
  await passport.getDelegatedAuthenticatedHeaders(),
  transport,
  chain
);

4. Use Viem as usual

Here's an example of the viem wallet client created by Passport sending a transaction.

const [account] = await client.getAddresses();
const transaction = await client.prepareTransactionRequest({
  account: account,
  to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
  value: BigInt(1000000000000000),
  chain: mainnet,
});

client
  .signTransaction(transaction)
  .then((res) => alert(JSON.stringify(res)))
  .catch((err) => alert(JSON.stringify(err)));

JSON-RPC