# Viem Support

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 [JSON-RPC](https://viem.sh/docs/accounts/jsonRpc.html) account which allows you to leverage all of Viem's features.

## 1. Install the packages

{% tabs %}
{% tab title="npm" %}
`npm install viem @0xpass/passport-viem` 
{% endtab %}

{% tab title="pnpm" %}
`pnpm install viem @0xpass/passport-viem` 
{% endtab %}

{% tab title="yarn" %}
`yarn add viem @0xpass/passport-viem` 
{% endtab %}
{% endtabs %}

## 2. Choose your auth method

### Passkeys

{% tabs %}
{% tab title="npm" %}
`npm install @0xpass/webauthn-signer` 
{% endtab %}

{% tab title="pnpm" %}
`pnpm install @0xpass/webauthn-signer` 
{% endtab %}

{% tab title="yarn" %}
`yarn add @0xpass/webauthn-signer` 
{% endtab %}
{% endtabs %}

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

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

### DOA

{% tabs %}
{% tab title="npm" %}
`npm install @0xpass/key-signer` 
{% endtab %}

{% tab title="pnpm" %}
`pnpm install @0xpass/key-signer` 
{% endtab %}

{% tab title="yarn" %}
`yarn add @0xpass/key-signer` 
{% endtab %}
{% endtabs %}

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

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

{% hint style="info" %}
In order to generate private key for DOA signer, follow [Generating DOA Keys](/appendix/generating-doa-keys.md)
{% endhint %}

## 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

```typescript
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

```typescript
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.

```typescript
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)));
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.0xpass.io/wallet-operations/viem-support.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.