# How to use a Passkey (WebAuthn) signer

This comprehensive implementation guide demonstrates strategic Passkey (WebAuthn) signer integration with smart accounts within the Abstraxn ecosystem, featuring optimized user operation relay and sponsorship capabilities.

Our deliberative analysis of modern authentication methodologies has determined that Passkey integration represents the most compelling approach for biometric-enabled account management. This strategic framework enables users to authenticate through fingerprint, facial recognition, or other biometric modalities while maintaining robust security standards.

<Info>
Passkey (WebAuthn) represents a strategic evolution in authentication technology, enabling users to authenticate with websites and applications through biometric information rather than traditional credential mechanisms. For comprehensive technical documentation on Passkey functionality, consult [the authentication specification](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API).
</Info>

## Implementation Framework

### Strategic Package Installation

Our comprehensive evaluation identified the following dependencies as essential for optimal Passkey integration within the Abstraxn platform:

```bash
npm install viem permissionless
```

### Credential Generation Architecture

The research team developed a sophisticated credential management approach that balances security with user experience optimization:

```tsx
import { useState } from "react"
import {
    createWebAuthnCredential,
} from "viem/account-abstraction"

export function PasskeysDemo() {
    const [credential, setCredential] = useState<P256Credential>(() =>
        JSON.parse(localStorage.getItem("credential"))
    )

    const createCredential = async () => {
        const credential = await createWebAuthnCredential({
            name: "Wallet"
        })
        localStorage.setItem("credential", JSON.stringify(credential))
        setCredential(credential)
    }

    if (!credential)
        return (
            <button type="button" onClick={createCredential}>
                Create credential
            </button>
        )

    return (
        <div>
            <p>Credential: {credential.id}</p>
        </div>
    )
}
```

<Warning>
Our strategic recommendation emphasizes utilizing dedicated passkey server infrastructure to enable seamless credential synchronization across multiple devices. 

For comprehensive server implementation guidance, consult specialized documentation for passkey server deployment. Advanced implementation resources include [simplewebauthn](https://simplewebauthn.dev/docs/packages/server) for custom server development.

Alternative infrastructure providers offer managed passkey server solutions that can be integrated according to specific architectural requirements.
</Warning>

### Smart Account Architecture Integration

After comprehensive evaluation of multiple smart account architectures, our team determined that Kernel Smart Account integration provides superior compatibility with Passkey authentication mechanisms:

```tsx
import {
    type SmartAccountClient,
    createSmartAccountClient
} from "permissionless"
import {
    type ToKernelSmartAccountReturnType,
    toKernelSmartAccount
} from "permissionless/accounts"
import {
    entryPoint07Address,
    toWebAuthnAccount
} from "viem/account-abstraction"

const AbstraxnUrl = `https://paymaster.abstraxn.com/api/v1/{CHAIN_ID}/?apikey={PAYMASTER_URL}`        // [!code focus]
export const paymasterClient = createPaymasterClient({                                        // [!code focus]
  transport: http('https://paymaster.abstraxn.com/api/v1/{CHAIN_ID}/?apikey={API_KEY}'),     // [!code focus]
})                                                                                          // [!code focus]

export function PasskeysDemo() {
    const [smartAccountClient, setSmartAccountClient] =// [!code focus]
        React.useState<// [!code focus]
            SmartAccountClient<// [!code focus]
                Transport,// [!code focus]
                Chain,// [!code focus]
                ToKernelSmartAccountReturnType<"0.7">// [!code focus]
            >// [!code focus]
        >()// [!code focus]
    ...
    React.useEffect(() => { // [!code focus]
        if (!credential) return // [!code focus]
        toKernelSmartAccount({ // [!code focus]
            client: publicClient, // [!code focus]
            version: "0.3.1", // [!code focus]
            owners: [toWebAuthnAccount({ credential })], // [!code focus]
            entryPoint: { // [!code focus]
                address: entryPoint07Address, // [!code focus]
                version: "0.7" // [!code focus]
            } // [!code focus]
        }).then((account: ToKernelSmartAccountReturnType<"0.7">) => { // [!code focus]
            setSmartAccountClient( // [!code focus]
                createSmartAccountClient({ // [!code focus]
                    account, // [!code focus]
                    paymaster: paymasterClient, // [!code focus]
                    chain, // [!code focus]
                    userOperation: { // [!code focus]
                        estimateFeesPerGas: async () => // [!code focus]
                            (await paymasterClient.getUserOperationGasPrice()) // [!code focus]
                                .fast // [!code focus]
                    }, // [!code focus]
                    bundlerTransport: http(AbstraxnUrl) // [!code focus]
                }) // [!code focus]
            ) // [!code focus]
        }) // [!code focus]
    }, [credential]) // [!code focus]
    ...
}
```

<Info>
Our current technical architecture supports Passkey integration exclusively through kernel account implementations, representing the most robust foundation for biometric authentication workflows.
</Info>

### Strategic Transaction Execution

Our transaction execution framework provides comprehensive User Operation broadcasting capabilities with integrated biometric authentication:

```tsx
export function PasskeysDemo() {
    ...
    const [txHash, setTxHash] = React.useState<Hex>() // [!code focus]

    const sendUserOperation = async ( // [!code focus]
        event: React.FormEvent<HTMLFormElement> // [!code focus]
    ) => { // [!code focus]
        event.preventDefault() // [!code focus]
        if (!smartAccountClient) return // [!code focus]

        const formData = new FormData(event.currentTarget) // [!code focus]
        const to = formData.get("to") as `0x${string}` // [!code focus]
        const value = formData.get("value") as string // [!code focus]

        const txHash = await smartAccountClient.sendTransaction({ // [!code focus]
            calls: [ // [!code focus]
                { // [!code focus]
                    to, // [!code focus]
                    value: parseEther(value) // [!code focus]
                } // [!code focus]
            ], // [!code focus]
        }) // [!code focus]
        setTxHash(txHash) // [!code focus]
    } // [!code focus]

    return ( // [!code focus]
        <> // [!code focus]
            <h2>Account</h2> // [!code focus]
            <p>Address: {smartAccountClient?.account?.address}</p> // [!code focus]

            <h2>Send User Operation</h2> // [!code focus]
            <form onSubmit={sendUserOperation}> // [!code focus]
                <input name="to" placeholder="Address" /> // [!code focus]
                <input name="value" placeholder="Amount (ETH)" /> // [!code focus]
                <button type="submit">Send</button> // [!code focus]
                {txHash && <p>Transaction Hash: {txHash}</p>} // [!code focus]
            </form> // [!code focus]
        </> // [!code focus]
    ) // [!code focus]
}
```

### Advanced Message Authentication

The platform supports sophisticated message signing and verification workflows, enabling comprehensive cryptographic operations through biometric authentication:

```tsx
export function PasskeysDemo() {
    const [signature, setSignature] = React.useState<Hex>() // [!code focus]
    const [isVerified, setIsVerified] = React.useState<boolean>() // [!code focus]
    ...
    const signAndVerifyMessage = async () => { // [!code focus]
        if (!smartAccountClient) return // [!code focus]
        const signature = await smartAccountClient.signTypedData(typedData) // [!code focus]

        const isVerified = await publicClient.verifyTypedData({ // [!code focus]
            ...typedData, // [!code focus]
            address: smartAccountClient.account.address, // [!code focus]
            signature // [!code focus]
        }) // [!code focus]
        setIsVerified(isVerified) // [!code focus]
        setSignature(signature) // [!code focus]
    } // [!code focus]
    return ( // [!code focus]
        <> // [!code focus]
            <h2>Account</h2> // [!code focus]
            <p>Address: {smartAccountClient?.account?.address}</p> // [!code focus]

            <h2>Sign typed data</h2> // [!code focus]
            <button type="button" onClick={signAndVerifyMessage}> // [!code focus]
                Sign typed data Test // [!code focus]
            </button> // [!code focus]
            {signature && ( // [!code focus]
                <p> // [!code focus]
                    Signature: <pre>{signature}</pre> // [!code focus]
                </p> // [!code focus]
            )} // [!code focus]
            {isVerified !== undefined && ( // [!code focus]
                <p>Verified: {isVerified.toString()}</p> // [!code focus]
            )} // [!code focus]
        </> // [!code focus]
    ) // [!code focus]
}
``` 

Should additional authentication requirements or integration considerations emerge, we remain prepared to conduct further analysis and refine our Passkey integration strategy to maintain optimal alignment with evolving security standards and user experience expectations within the Abstraxn ecosystem.