UAE Verification Widget

Simple identity verification widget for web applications. Verify Emirates ID, selfie, and UAE PASS in minutes.

Quick Start

1. Install

npm install @souqlabs/verify-widget
# or
yarn add @souqlabs/verify-widget

2. Use in Your App

import { VerificationProvider, VerificationButton } from '@souqlabs/verify-widget';

function App() {
  return (
    <VerificationProvider 
      apiKey="sk_live_xxxxxxxxxxxxx"
      callbackUrl="https://myapp.com/verify/done"
      type="individual"
      locale="en"
    >
      <h1>Welcome to My App</h1>
      <p>Please verify your identity:</p>
      
      <VerificationButton className="btn-primary">
        Verify with Emirates ID
      </VerificationButton>
    </VerificationProvider>
  );
}

3. Handle the Callback

// https://myapp.com/verify/done?sessionId=xxx&result=verified&referenceNumber=...
export default function CallbackPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const result = searchParams.get('result');

  if (result === 'verified') {
    return (
      <div>
        <h1>✅ Verification Successful!</h1>
        <p>Reference: {searchParams.get('referenceNumber')}</p>
      </div>
    );
  }

  return <h1>❌ Verification Failed</h1>;
}

Props

VerificationProvider

| Prop | Required | Type | Default | Description | |------|----------|------|---------|-------------| | apiKey | Yes | string | - | Your API key (sk_live_... or sk_test_...) | | callbackUrl | Yes | string | - | URL to redirect after completion | | type | No | 'individual' \| 'business' | 'individual' | Verification type | | locale | No | 'en' \| 'ar' | 'en' | Language | | theme | No | 'light' \| 'dark' | 'light' | Theme |

VerificationButton

All standard button HTML attributes plus:

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | 'Verify Identity' | Button text |

Callback Parameters

After verification, users are redirected to your callbackUrl with these parameters:

| Parameter | Description | |-----------|-------------| | sessionId | Verification session ID | | result | 'verified' or 'failed' | | referenceNumber | Unique reference (if verified) | | emiratesIdNumber | Emirates ID number (individual) | | emiratesIdName | Name on Emirates ID (individual) | | errorCode | Error code (if failed) | | errorMessage | Error message (if failed) |

Styling

Style the button with className:

<VerificationButton 
  className="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700"
>
  Verify with Emirates ID
</VerificationButton>

Examples

React/Vue/Next.js

Works with any React-based framework:

// Next.js
export default function Home() {
  return (
    <VerificationProvider apiKey={process.env.NEXT_PUBLIC_VERIFY_API_KEY!} callbackUrl="/verify/done">
      <VerificationButton>Start Verification</VerificationButton>
    </VerificationProvider>
  );
}

Business Verification

<VerificationProvider 
  apiKey="sk_live_xxx"
  callbackUrl="https://myapp.com/business-verify/done"
  type="business"
>
  <VerificationButton>Verify Business</VerificationButton>
</VerificationProvider>

License

MIT

Support

• Email: [email protected]
• Docs: https://docs.souqlabs.ae