> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://v3.viem.sh/api/mcp` to find what you need.

# `WebAuthnAccount.fromCredential`

Creates a **WebAuthn Account** – commonly used for **[Smart Account](/account-abstraction/accounts/smart) Owners** to sign User Operations and messages on behalf of the Smart Account.

:::note
WebAuthn Account owners are currently supported on the following Smart Account implementations:

* [`CoinbaseSmartAccount.from`](/account-abstraction/accounts/coinbase#owners)
:::

## Import

```ts twoslash
import { WebAuthnAccount } from 'viem/erc4337'
```

## Usage

```ts twoslash
import { WebAuthnAccount } from 'viem/erc4337'
import { WebAuthn } from 'viem/utils'

// Register a credential (ie. passkey).
const credential = await WebAuthn.createCredential({
  name: 'Example',
})

// Create a WebAuthn account from the credential. // [!code focus]
const account = WebAuthnAccount.fromCredential(credential) // [!code focus]
```

## Returns

`WebAuthnAccount`

A WebAuthn Account.

## Parameters

### credential

* **Type:** `P256Credential`

A P256 WebAuthn Credential.

```ts twoslash
import { WebAuthnAccount } from 'viem/erc4337'
import { WebAuthn } from 'viem/utils'
const credential = await WebAuthn.createCredential({
  name: 'Example',
})

const account = WebAuthnAccount.fromCredential(credential) // [!code focus]
```

### getFn

* **Type:** `(options: CredentialRequestOptions) => Promise<Credential | null>`
* **Default:** `window.navigator.credentials.get`

Credential request function. Useful for environments that do not support the WebAuthn API natively (i.e. React Native or testing environments).

```ts twoslash
// @noErrors
import { WebAuthnAccount } from 'viem/erc4337'
import { WebAuthn } from 'viem/utils'
import * as passkey from 'react-native-passkeys' // [!code focus]

const credential = await WebAuthn.createCredential({
  name: 'Example',
})

const account = WebAuthnAccount.fromCredential(credential, {
  getFn: passkey.get, // [!code focus]
})
```

### rpId

* **Type:** `string`
* **Default:** `window.location.hostname`

Relying Party ID.

```ts twoslash
// @noErrors
import { WebAuthnAccount } from 'viem/erc4337'
import { WebAuthn } from 'viem/utils'

const credential = await WebAuthn.createCredential({
  name: 'Example',
})

const account = WebAuthnAccount.fromCredential(credential, {
  rpId: 'example.com', // [!code focus]
})
```