@reality-cap/client

Frontend SDK for Reality Cap. Uses the WebAuthn API (Face ID, Touch ID, Windows Hello) to cryptographically sign form payloads before they are transmitted to your server.

What it does

This package handles the browser-side of the Reality Cap flow:

1. Takes your form data and hashes it (SHA-256) together with a unique nonce.
2. Uses the browser's WebAuthn API to force the user's device (Face ID, Touch ID, or Windows Hello) to sign that hash with its hardware private key.
3. Returns a signed rcBundle that you attach to your API request.

The server can then verify that the bundle was signed by a real device and that the data was not altered in transit.

Installation

npm install @reality-cap/client

Usage

React Hook

import { useRealityCap } from "@reality-cap/client/react";

function CheckoutForm() {
  const { authenticate, status, error } = useRealityCap({ rpName: "My Store" });

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = { item: "Laptop", address: "123 Main St" };

    const result = await authenticate(formData);
    if (result.success) {
      await fetch("/api/checkout", {
        method: "POST",
        body: JSON.stringify({ ...formData, rcBundle: result.bundle }),
      });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* your form fields */}
      <button disabled={status === "prompting"}>
        {status === "prompting" ? "Scanning..." : "Checkout"}
      </button>
      {error && <p style={{ color: "red" }}>{error.message}</p>}
    </form>
  );
}

Vanilla JavaScript

import { authenticate } from "@reality-cap/client";

const result = await authenticate({ item: "Laptop", address: "123 Main St" });
if (result.success) {
  console.log("Bundle ready to send:", result.bundle);
}

API

useRealityCap(options?)

React hook. Returns { authenticate, status, error, hasCredential }.

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | rpName | string | "Reality Cap" | The display name shown in the biometric prompt. | | rpId | string | window.location.hostname | The domain the passkey is locked to. |

authenticate(data, options?)

Core function. Takes any JSON-serializable object and returns { success: boolean, bundle?: RcBundle }.

Requirements

• Browser: WebAuthn support required (Chrome 67+, Safari 14+, Firefox 60+, Edge 18+).
• Device: Must have biometric hardware (Face ID, Touch ID, Android Biometrics, or Windows Hello). Users on legacy hardware without biometrics cannot complete the flow. Build a fallback.