Bouncery

Zero Knowledge Humanness Verification for React Applications

Overview

Bouncery provides a simple, privacy-focused way to verify human users through their existing accounts (such as Uber or United Airlines) without accessing or storing sensitive data. It leverages Zero-Knowledge Humanness Proxy Proof (zkHPP) technology to ensure user privacy while enabling seamless verification.

Features

• Privacy-First: Employs Zero-Knowledge Proofs to verify users without compromising personal information.
• Easy Integration: Integrates seamlessly with React applications.
• Customizable UI: Supports light and dark themes, as well as custom success screens.
• Provider Support: Works with popular providers like Uber and United Airlines.

---

Installation

To install Bouncery in your project, run the following command:

npm install @bouncery.ai/bouncery

---

Quick Start

Here’s a basic example of how to use Bouncery in your React application:

import { Bouncery } from '@bouncery.ai/bouncery';

function App() {
  const handleVerificationSuccess = () => {
    console.log('User verified as human!');
    // Add your post-verification logic here
  };

  const handleVerificationFailure = (error) => {
    console.error('Verification failed:', error);
    // Handle verification failures
  };

  return (
    <Bouncery
      appId="your-bouncery-app-id"
      appSecret="your-bouncery-app-secret"
      onVerificationSuccess={handleVerificationSuccess}
      onVerificationFailure={handleVerificationFailure}
      theme="dark"
    />
  );
}

---

Props

Prop	Type	Required	Default	Description
appId	string	Yes	-	Your Bouncery application ID
appSecret	string	Yes	-	Your Bouncery application secret
onVerificationSuccess	function	No	-	Callback executed when verification succeeds
onVerificationFailure	function	No	-	Callback executed when verification fails
theme	string	No	dark	UI theme (dark or light)
providerId	string	No	-	Preselect a specific provider for verification
customSuccessComponent	React.Component	No	-	Custom success screen component

---

Custom Success Screen

You can create a custom success screen to enhance your app's user experience:

const CustomSuccess = () => (
  <div>
    <h1>Verification Complete!</h1>
    <p>Welcome to the application</p>
  </div>
);

function App() {
  return (
    <Bouncery
      appId="your-app-id"
      appSecret="your-app-secret"
      customSuccessComponent={<CustomSuccess />}
    />
  );
}

---

Themes

Bouncery includes two built-in themes for your convenience:

• Dark (default): A dark background with light text.
• Light: A light background with dark text.

Example usage:

<Bouncery
  appId="your-app-id"
  appSecret="your-app-secret"
  theme="light"
/>

---

Provider IDs

Bouncery supports multiple verification providers. You can skip provider selection by directly passing a providerId:

Provider	ID
Uber	c5104d5f-aaa8-43cd-be5f-8315f7b9a0b8
United Airlines	33f52266-a28c-4123-b3bc-7d0093f98b8c

Example:

<Bouncery
  appId="your-app-id"
  appSecret="your-app-secret"
  providerId="c5104d5f-aaa8-43cd-be5f-8315f7b9a0b8" // Directly to Uber verification
/>

---

Development

Install Dependencies

npm install

Start Development Server

npm start

Build for Production

npm run build

---

© 2025 Bouncery