Anonymous Mode Integration via Veros Widget

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.

This widget uses Anonymous Mode, where user palm verification are done via ZK Proofs.

Installation

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

Usage

Native JavaScript

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

const widget = createVerosWidget({
  appId: "your-app-id",
  context: "your-context",
  typeId: "your-type-id",
  query: "your-query",
  verifyUrl: "https://your-verify-url.com",
  onSuccess: (proof) => {
    console.log("Verification successful:", proof);
    // Handle verification success
  },
  onError: (error) => {
    console.error("Verification failed:", error);
    // Handle verification failure
  },
  theme: "default", // 'default' | 'light' | 'dark'
  triggerElement: "#verify-btn", // Optional: auto-bind trigger element
});

// Open manually
widget.open();

// Clean up resources
widget.destroy();

React

import React, { useEffect, useRef } from "react";
import { createVerosWidget } from "@veroslabs/widget";

function VerosButton() {
  const widgetRef = useRef(null);

  useEffect(() => {
    widgetRef.current = createVerosWidget({
      appId: "your-app-id",
      context: "your-context",
      typeId: "your-type-id",
      query: "your-query",
      verifyUrl: "https://your-verify-url.com",
      onSuccess: (proof) => {
        console.log("Verification successful:", proof);
      },
      onError: (error) => {
        console.error("Verification failed:", error);
      },
      theme: "default",
    });

    return () => {
      widgetRef.current?.destroy();
    };
  }, []);

  return (
    <button onClick={() => widgetRef.current?.open()}>Verify with Veros</button>
  );
}

For more frameworks and examples, please check out our NPM package: https://www.npmjs.com/package/@veroslabs/widget

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
verifyUrl	string	Optional Parameter. If undefined, ZK Proof will be sent to Veros Verifier to verify proof validity.

ZK 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.