Poh-validators-react NPM

`poh-validators-react`

poh-validators-react is a library providing React components for integrating Proof of Humanity's validation mechanisms. This package is in beta.

Quickstart

To install the package:

npm install poh-validators-react --save

yarn add poh-validators-react

Validators

Currently, the library offers the following validators:

HumangramValidator - Leverages the Humangram Telegram bot to authenticate the humanity of users using their social media history.
BiometricsValidator - Designed for on-device biometrics, and offers advanced human verification. However, certain mobile devices might face challenges during initialization.
WorldcoinValidator - Utilizes the precision of iris scanning to deliver a distinct and secure method for verifying human users.

Future versions will introduce:

LedgerValidator

Note: This package is still in its beta phase. Users might encounter unexpected errors. We appreciate your patience and feedback during this development stage.

Usage

1. VerifyHuman Component (Recommended)

We've introduced a new component, <VerifyHuman />, which acts as a plug-and-play solution for all the current methods of validation we support. This component simplifies the process of integrating multiple validators into your application.

Configuration: Before using the <VerifyHuman /> component, ensure you have a poh.config.js file set up in your project. This configuration file will contain details about the validators you want to use.

// Sample poh.config.js
const config = {
    validators: {
      biometrics: {
        app_id: 'YOUR_APP_ID',
        url: 'YOUR_URL'
      },
      humangram: {
        websocket: 'YOUR_WEBSOCKET_URL'
      },
      worldcoin: {
        app_id: 'YOUR_APP_ID',
        action: 'YOUR_ACTION',
        url: 'YOUR_URL'
      },
      ledger: {
        // any necessary configurations for ledger
      }
      // ... add other validators as needed
    }
};
export default config;

Integration: Import and use the <VerifyHuman /> component in your React application.

import VerifyHuman from 'poh-validators-react';

function App() {
  const handleProof = ({ proof, error }) => {
    // Handle the proof or error returned from the validators
  };

  return (
    <div className="App">
      <VerifyHuman start={true} onProof={handleProof} />
    </div>
  );
}

export default App;

2. Making use of a specific Validator

If you want to use a specific validator, follow this pattern:

import { Validator } from 'poh-validators-react';

function MyApp() {
    const handleProof = {}

    return (
        <Validator {...ValidatorProps} />
    );
}

See Props and replace Validator with the actual validator you wish to use.

3. Finally, use the validator signed proof to access contract functions

Pass in a custom callback function handleProof, which will be called immediately the proof is received:

const handleProof = async ({ proof, error }) => {
    if (proof && contract) {
      console.log("Received proof:", proof);
      try {
        const tx = await contract.sampleFunction(proof);
        const receipt = await tx.wait();
        console.log("Transaction receipt:", receipt);
      } catch (err) {
        console.error("Error during contract interaction:", err);
      }
    }

    if (error) {
      console.error("Error:", error);
    }
}

See poh-contracts on how to use proof in your smart contracts.

Validator Backend

All validators leverage a unified open-source backend project to ensure seamless human verification.

You can integrate the validator backend into your projects and tailor it to your specific needs. Supported programming language: Node.js

Proof Of Humanity validator backend

Please ensure you follow the setup guidelines carefully to guarantee proper functionality and security.

We are actively exploring the possibility of offering Verification as a Service (VaaS) in the future, further simplifying the integration process.

Props

For the VerifyHuman component:

Prop	Required/Optional	Description	Default Value
`start`	Optional	If set to `true`, it opens the modal and initiates the validation process.	`false`
`onProof`	Required	Callback function when a proof is received or an error occurs.	N/A

For the BiometricsValidator component:

Prop	Required/Optional	Description	Default Value
`app_id`	Required	The ID of your application.	N/A
`onProof`	Required	Callback function when a proof is received or an error occurs.	N/A
`url`	Required	The API URL for the validator.	N/A

For the HumangramValidator component:

Prop	Required/Optional	Description	Default Value
`onProof`	Required	Callback function when a proof is received or an error occurs.	N/A
`websocket`	Required	The websocket URL for the validator.	N/A

Notes

This package is still in beta. Ensure thorough testing in a safe environment before deploying to production.
Always handle errors gracefully in your application, as demonstrated in the handleProof function.
The current package size is approximately 20mb, and we are actively troubleshooting related issues. This is due to the inclusion of certain modules:
- Biometrics validator adds 2.64mb
- Worldcoin validator adds 16.5mb (circular dependency issue)
- Humangram validator adds 7mb (might be due to @headlessui/react)

Resources

Worldcoin ID – Details about the Worldcoin Human Protocol.
Humangram – Provides a method for human verification using social media history via Humangram.
Human Ledger Signer – Usage of the Human Ledger Signer.
Proof of HUMANity Biometrics DApp – A decentralized application for Proof of HUMANity biometric validation.