Quickstart

import { createShhhPasskey } from "@chipi-stack/chipi-passkey";

async function onSignUp(userId: string, userName: string) {
  const { credentialId, publicKeyHex } = await createShhhPasskey(
    userId,
    userName,
  );
  // credentialId  → save with your wallet record
  // publicKeyHex  → { x: "…", y: "…" }, both 32-byte hex strings
  return { credentialId, publicKeyHex };
}

import { useCreateWallet } from "@chipi-stack/chipi-react";
import { webauthnPubkeyFelts } from "@chipi-stack/backend";

function SignUpButton() {
  const { createWalletAsync } = useCreateWallet();

  async function onClick() {
    // Step 1 returns these. In a real app you'd carry them across components.
    const { credentialId, publicKeyHex } = await onSignUp(userId, userName);

    const wallet = await createWalletAsync({
      params: {
        externalUserId: userId,
        chain: "STARKNET",
        walletType: "SHHH",
        signerKind: "WEBAUTHN_P256",
        // SHHH WEBAUTHN_P256 expects the pubkey as 4 felts
        // [x_low, x_high, y_low, y_high]. Derive them from the registered
        // passkey pubkey with webauthnPubkeyFelts (from @chipi-stack/backend).
        ownerPubkeyFelts: webauthnPubkeyFelts(publicKeyHex).map(
          (f) => "0x" + f.toString(16),
        ),
      },
      bearerToken,
    });
    return wallet;
  }
}

import { signShhhMessage } from "@chipi-stack/chipi-passkey";
import { buildWebAuthnEnvelopeFromAssertion } from "@chipi-stack/backend";

async function onSendTransfer(messageHash: bigint, pubkey: { x: Uint8Array; y: Uint8Array }) {
  // 1. Biometric prompt + WebAuthn ceremony.
  const { authenticatorData, clientDataJSON, signatureDer, credentialId } =
    await signShhhMessage({ messageHash });

  // 2. Wrap into the SHHH V2_SNIP12 envelope.
  const envelope = buildWebAuthnEnvelopeFromAssertion({
    authenticatorData,
    clientDataJSON,
    signatureDer,
    pubkey,
    messageHash,
  });

  // 3. Ship the envelope as the `signature` field of your paymaster call.
  return envelope;
}

"use client";

import { useState } from "react";
import {
  createShhhPasskey,
  signShhhMessage,
  hasShhhPasskey,
} from "@chipi-stack/chipi-passkey";
import { useCreateWallet } from "@chipi-stack/chipi-react";
import { webauthnPubkeyFelts } from "@chipi-stack/backend";

export function PasskeySignUp() {
  const { createWalletAsync, isLoading } = useCreateWallet();
  const [wallet, setWallet] = useState<unknown>(null);

  async function onSignUp() {
    const { credentialId, publicKeyHex } = await createShhhPasskey(
      "user-42",
      "Alice",
    );
    const w = await createWalletAsync({
      params: {
        externalUserId: "user-42",
        chain: "STARKNET",
        walletType: "SHHH",
        signerKind: "WEBAUTHN_P256",
        ownerPubkey: publicKeyHex,
      },
      bearerToken,
    });
    setWallet(w);
  }

  async function onSignTx() {
    // Compute the SHHH OE hash for the transfer you want to send — your
    // existing wallet flow already builds this. Replace `0n` with the
    // real `computeOeHash` output for your call.
    const messageHash = 0n;
    const { authenticatorData, clientDataJSON, signatureDer } =
      await signShhhMessage({ messageHash });
    // Forward the assertion bytes to your paymaster flow — see step 3
    // above for the envelope-wrapping detail.
    console.log({ authenticatorData, clientDataJSON, signatureDer });
  }

  if (hasShhhPasskey()) {
    return <button onClick={onSignTx}>Sign a transfer with Touch ID</button>;
  }
  return (
    <button onClick={onSignUp} disabled={isLoading}>
      Sign up with Touch ID
    </button>
  );
}