🛑 The Problem with reCAPTCHA & Turnstile

reCAPTCHA stops basic bots. It does not stop a human attacker from intercepting a guest checkout payload in Burp Suite and changing the price from $1,000 to $1.

⚡ The RealityBind Solution

RealityBind is a zero-friction security primitive designed for Guest Checkouts and High-Value Transactions. It uses the WebAuthn (FIDO2) API to force the user's physical hardware (FaceID / TouchID / Windows Hello) to sign the transaction payload.

• Data Tampering? Impossible. The entire JSON payload is cryptographically hashed. If a single byte is changed in transit, the signature fails.
• Bots? Blocked. Bots don't have physical biometric hardware chips.
• Replay Attacks? Neutralized. Every transaction uses a one-time cryptographic nonce.

🚀 The World's Easiest Setup

RealityBind is built on top of the powerful @realitylimit/core protocol, but we've made it easier to install than a Stripe widget. You have two options:

⚙️ Step 0: Environment Setup (Required)

Before you integrate RealityBind, create a .env.local file in your project root. Copy from the provided example:

cp .env.example .env.local

| Variable | Local Dev | Production | |---|---|---| | NEXT_PUBLIC_RP_ID | localhost | yourdomain.com | | NEXT_PUBLIC_ORIGIN | http://localhost:3000 | https://yourdomain.com |

⚠️ The RP_ID must exactly match your domain. If it doesn't, all WebAuthn/FaceID signatures will fail. This is a FIDO2 security requirement.

Option 1: The React Way (NPM)

Perfect for Next.js, Vite, and modern React apps.

1. Install it:

npm install reality-bind @realitylimit/core

2. Drop it in your Checkout Component:

import { RealityBind } from 'reality-bind';

function CheckoutPage() {
  const cartData = { price: 1000, item: "MacBook Pro" };

  return (
    <RealityBind 
      payload={cartData} 
      buttonText="Pay $1000 (FaceID)"
      onSuccess={(signature) => {
        // Send the signature to your backend!
        fetch('/api/checkout', { method: 'POST', body: JSON.stringify(signature) });
      }} 
    />
  );
}

Option 2: The Vibe Coder Way (Vanilla JS)

Zero dependencies. Pure copy-paste.

1. Attach it directly to your button using the CDN:

<button id="checkout-btn">Checkout</button>

<script type="module">
  import { RealityBindVanilla as RealityBind } from 'https://cdn.jsdelivr.net/npm/[email protected]/installation/reality-bind.js';

  RealityBind.attachToButton('checkout-btn', 
    () => ({ price: 1000, item: "MacBook Pro" }), // Your Payload
    (signature) => {
      // Send to server
      console.log("Hardware Verified! Sending to server...", signature);
    }
  );
</script>

🔒 Server-Side Verification (1 Line of Code)

Your frontend is secure. Now verify it on the backend:

import { RealityBindServer } from 'reality-bind';

app.post('/api/checkout', async (req, res) => {
  const expectedPayload = { price: 1000, item: "MacBook Pro" };
  const incomingSignature = req.body;

  // RealityBind re-hashes the payload and verifies the FaceID signature.
  const isHumanAndUntampered = await RealityBindServer.verify(expectedPayload, incomingSignature);

  if (!isHumanAndUntampered) {
    return res.status(403).send("Hacker Detected! Payload was tampered with.");
  }

  // Process order safely
});

🏆 The Burp Suite Challenge

We invite all security engineers to try and hack a RealityBind implementation.

1. Spin up the example app.
2. Intercept the checkout request using Burp Suite or OWASP ZAP.
3. Change the price field to $1.
4. Watch the server instantly drop the request because the Carter-Wegman MAC / FIDO signature mathematically proves the payload was altered after the user looked at their FaceID prompt.

Credits

Powered by the RealityLimit Authentication Protocol.