PIN → Passkey Migration

npm install @chipi-stack/chipi-passkey@latest

"use client";

import { useState } from "react";
import { useAuth } from "@clerk/nextjs";
import { useChipiWallet, useMigrateWalletToPasskey } from "@chipi-stack/nextjs";

export function MigrateToPasskey({ userId }: { userId: string }) {
  const { getToken } = useAuth();
  const { wallet } = useChipiWallet({
    externalUserId: userId,
    getBearerToken: getToken,
  });

  const { migrateWalletToPasskeyAsync, isLoading, error } = useMigrateWalletToPasskey();
  const [pin, setPin] = useState("");
  const [done, setDone] = useState(false);

  const handleMigrate = async () => {
    try {
      if (!wallet) return;
      const bearerToken = await getToken();
      if (!bearerToken) throw new Error("Missing bearer token");

      const result = await migrateWalletToPasskeyAsync({
        wallet,
        oldEncryptKey: pin,
        externalUserId: userId,
        bearerToken,
      });

      // Persist the new wallet and credentialId — these replace the old PIN-encrypted state.
      // localStorage is used here for example simplicity. In production, store both
      // values in a durable backend (your DB, or Clerk privateMetadata via a
      // server-side route) — see "After migration" below.
      localStorage.setItem("wallet", JSON.stringify(result.wallet));
      localStorage.setItem("credentialId", result.credentialId);
      setDone(true);
    } catch (e) {
      console.error("Migration failed", e);
    }
  };

  if (done) {
    return <p>✓ Migrated to passkey. You can now sign transactions with biometrics.</p>;
  }

  return (
    <div>
      <p>Upgrade your wallet to passkey-based security.</p>
      <label htmlFor="current-pin">Current PIN</label>
      <input
        id="current-pin"
        type="password"
        placeholder="Enter your current PIN"
        value={pin}
        onChange={(e) => setPin(e.target.value)}
      />
      <button onClick={handleMigrate} disabled={isLoading || !pin}>
        {isLoading ? "Migrating..." : "Migrate to Passkey"}
      </button>
      {error && <p style={{ color: "red" }}>{error.message}</p>}
    </div>
  );
}

import { useTransfer, ChainToken } from "@chipi-stack/nextjs";

const { transferAsync } = useTransfer();

await transferAsync({
  params: {
    wallet,
    token: ChainToken.USDC,
    recipient,
    amount,
    usePasskey: true,           // required after migration
    externalUserId: userId,
  },
  bearerToken,
});