Verifier Web SDK

TypeScript SDK for verifying driver custody credentials in browser applications via QR code-based OID4VP flows.

Quick Start

1. Install

npm install @vecu/verifier-web-sdk

registry=https://artifactory.coxautoinc.com/artifactory/api/npm/cai-npm/
//artifactory.coxautoinc.com/artifactory/api/npm/:_auth=YOUR_AUTH_TOKEN
always-auth=true

2. Container-Based (Recommended)

Renders the full verification UI into a DOM element:

import { createVerifierSDK } from '@vecu/verifier-web-sdk';

const sdk = createVerifierSDK({
  stage: 'sandbox',
  bearerToken: 'your-vecu-api-token',
});

const cleanup = await sdk.startVerification(
  document.getElementById('verification-container'),
  {
    vin: '1HGBH41JXMN109186',
    proximity: { thresholdMiles: 5.0 },
    onApproved: result => {
      console.log('Approved:', result.requestId);
      console.log('Proximity:', result.proximityCheck?.status);
    },
    onDenied: result => {
      console.log('Denied:', result.requestId);
    },
    onExpired: () => {
      console.log('Session expired');
    },
    onError: error => {
      console.error(error.code, error.message);
    },
  }
);

// Cleanup when done
cleanup();
sdk.destroy();

The built-in UI handles all states: loading, QR code display with countdown, approved (with proximity pass/fail/unchecked), denied, expired, and error.

3. Headless (Custom UI)

For full UI control, use the core API directly:

const sdk = createVerifierSDK({
  stage: 'sandbox',
  bearerToken: 'your-vecu-api-token',
});

const result = await sdk.createPresentationRequest('1HGBH41JXMN109186');
if (result.ok) {
  // Render result.data.qr_content as a QR code with your preferred library
  sdk.startPolling();
}

sdk.on('status:changed', event => {
  console.log(event.currentStatus.status); // 'pending' | 'approved' | 'denied' | 'expired'
});

4. React — VerificationView Component (Recommended)

import { useVerifierSDK, VerificationView } from '@vecu/verifier-web-sdk/react';
import { useMemo } from 'react';

function VerificationPage({ bearerToken, vin }) {
  const config = useMemo(
    () => ({
      stage: 'production' as const,
      bearerToken,
    }),
    [bearerToken]
  );

  const sdk = useVerifierSDK(config);

  return (
    <VerificationView
      sdk={sdk}
      vin={vin}
      proximity={{ thresholdMiles: 5.0 }}
      onApproved={result => console.log('Verified!', result.requestId)}
      onDenied={result => console.log('Denied:', result.requestId)}
      onError={error => console.error(error.code, error.message)}
    />
  );
}

5. React — Custom UI with useVerification

For full UI control, use the useVerification hook:

import { useVerifierSDK, useVerification } from '@vecu/verifier-web-sdk/react';

function CustomVerification({ bearerToken, vin }) {
  const config = useMemo(
    () => ({
      stage: 'production' as const,
      bearerToken,
    }),
    [bearerToken]
  );

  const sdk = useVerifierSDK(config);
  const { state, restart } = useVerification(sdk, vin, {
    onApproved: result => console.log('Verified!', result.requestId),
  });

  switch (state.type) {
    case 'loading':
      return <div>Loading...</div>;
    case 'qr':
      return (
        <img
          src={`https://api.qrserver.com/v1/create-qr-code/?data=${state.qrContent}`}
        />
      );
    case 'approved':
      return <div>Verified!</div>;
    case 'denied':
      return <div>DO NOT RELEASE</div>;
    case 'error':
      return (
        <div>
          Error: {state.error.message} <button onClick={restart}>Retry</button>
        </div>
      );
    default:
      return null;
  }
}

6. React — Container API (Manual)

For imperative control without components, use startVerification directly:

import { useVerifierSDK } from '@vecu/verifier-web-sdk/react';
import { useEffect, useRef, useMemo } from 'react';

function VerificationPage({ bearerToken, vin }) {
  const containerRef = useRef(null);
  const config = useMemo(
    () => ({
      stage: 'production' as const,
      bearerToken,
    }),
    [bearerToken]
  );

  const sdk = useVerifierSDK(config);

  useEffect(() => {
    if (!sdk || !containerRef.current) return;
    let cleanup;
    sdk
      .startVerification(containerRef.current, {
        vin,
        onApproved: result => console.log('Verified!', result.requestId),
      })
      .then(fn => {
        cleanup = fn;
      });
    return () => {
      cleanup?.();
      sdk.destroy();
    };
  }, [sdk, vin]);

  return <div ref={containerRef} />;
}

Requirements

Next Steps

• API Reference — Configuration, methods, events, types