Web Widget Integration

Integrate the Veros Web Widget into your application

Veros widget demo

The Veros Web Widget is a React component that handles the user-facing verification flow. It displays a QR code that users scan with the Veros mobile app to complete their palm verification.

Installation

npm install @veroslabs/widget
# or
yarn add @veroslabs/widget

Basic Usage

import { VerosWidget } from "@veroslabs/widget";

function MyVerificationComponent() {
  const handleSuccess = (proof) => {
    // Send proof to your backend for verification
    console.log("Verification successful:", proof);
  };

  return (
    <VerosWidget
        appId="" // you can leave it empty for now
        context="Veros - Palm Verification Timestamp"
        typeId="3"
        query={JSON.stringify({
          conditions: [
            {
              identifier: "val",
              operation: "IN",
              value: {
                from: "1743436800",
                to: "2043436800",
              },
            },
          ],
          options: {
            expiredAtLowerBound: "1743436800",
            externalNullifier: "Your App - Verification Purpose",
            equalCheckId: "0",
            pseudonym: "0",
          },
        })}
        onSuccess={(proof) => handleSuccess(proof)}
        verifyUrl=""
        theme="default"
      >
        {({ open }) => <button onClick={open}>Verify with Veros</button>}
    </VerosWidget>
  );
}

Widget Parameters

Parameter	Type	Description
context	string	The verification context. Currently only "Veros - Palm Verification Timestamp" is supported
typeId	string	The type ID for verification. Use "3" for palm verification
query	string	JSON string containing verification parameters
onSuccess	function	Callback function that receives the verification proof

Query Parameters

The query parameter expects a JSON string with the following structure:

{
  "conditions": [
    {
      "identifier": "val",
      "operation": "IN",
      "value": {
        "from": "1743436800",
        "to": "2043436800"
      }
    }
  ],
  "options": {
    "expiredAtLowerBound": "1743436800",
    "externalNullifier": "Your App - Verification Purpose",
    "equalCheckId": "0",
    "pseudonym": "0"
  }
}

External Nullifier

The externalNullifier is a unique identifier that represents the specific action or purpose for which the verification is being performed. It ensures that proofs can't be reused across different actions.

For example, you might use:

• "MyApp - Account Creation"

• "MyApp - Login"

• "MyApp - Reward Claim"

Pseudonym

The pseudonym field can be used to include additional user-specific information in the proof. This could be useful for tying the verification to a specific user in your system. For example, you could set this to a user's wallet address if you want to verify identity before sending tokens.