Multi-device

const cavos = await Cavos.connect({ /* ... */ });

if (cavos.status === "needs-device-approval") {
  // This device requested addition. Prompt the user to approve from an
  // existing device. Poll for approval, then reconnect.
  console.log(cavos.pendingRequestId);
}

import { Cavos, PasskeySigner } from "@cavos/kit";

const cavos = await Cavos.connect({ /* same identity + appSalt... */ });

if (cavos.status === "needs-device-approval") {
  await cavos.approveThisDeviceWithPasskey({ passkey: new PasskeySigner() });
  // cavos is now ready.
}

'use client';

import { useEffect, useState } from 'react';
import {
  CavosProvider,
  useCavos,
  HttpRecoveryClient,
  type CavosConfig,
} from '@cavos/kit';

const BACKEND_URL = 'https://services.cavos.xyz';

function Approve({ request }: { request: any }) {
  const { isAuthenticated, openModal, addSigner } = useCavos();
  const [done, setDone] = useState(false);

  const approve = async () => {
    // Signs add_signer(newSigner) gaslessly with THIS (registered) device's key.
    const { transactionHash } = await addSigner(request.newSigner);
    const recovery = new HttpRecoveryClient({
      baseUrl: BACKEND_URL,
      appId: request.appId,
    });
    await recovery.confirmDeviceAddition({ requestId: request.requestId, txHash: transactionHash });
    setDone(true);
  };

  if (done) return <p>Device approved.</p>;
  if (!isAuthenticated) return <button onClick={openModal}>Sign in to approve</button>;
  return <button onClick={approve}>Approve device</button>;
}

export default function ApproveDevicePage() {
  const [config, setConfig] = useState<CavosConfig | null>(null);
  const [request, setRequest] = useState<any>(null);

  useEffect(() => {
    const requestId = new URLSearchParams(window.location.search).get('request')!;
    // The GET returns appSalt, appId, network + the new device's pubkey,
    // so this page can rebuild the SAME wallet identity the owner registered.
    fetch(`${BACKEND_URL}/api/devices/request?id=${requestId}`)
      .then((r) => r.json())
      .then((data) => {
        if (!data.found) return;
        setRequest({
          requestId: data.request_id,
          appId: data.app_id,
          newSigner: { x: BigInt(data.new_pub_x), y: BigInt(data.new_pub_y) },
        });
        setConfig({
          // 'mainnet' or 'testnet' — map from the wallet's network.
          network: data.network === 'mainnet' ? 'mainnet' : 'testnet',
          appSalt: data.app_salt,
          appId: data.app_id,
          // YOUR paymaster key — never Cavos's.
          paymasterApiKey: process.env.NEXT_PUBLIC_CAVOS_PAYMASTER_API_KEY!,
          authBackendUrl: BACKEND_URL,
        });
      });
  }, []);

  if (!config || !request) return <p>Loading…</p>;
  return (
    <CavosProvider config={config} modal={{ appName: 'Your App' }}>
      <Approve request={request} />
    </CavosProvider>
  );
}