QRAuth React Component

React components for QR code authentication and verification with QRAuth.

Installation

npm install @qrauth/react

Quick Start

QRAuthBadge Component

import { QRAuthBadge } from '@qrauth/react';

export function MyApp() {
  return (
    <QRAuthBadge
      token="qr-token-string"
      theme="light"
      onVerified={(result) => {
        console.log('Verification result:', result);
      }}
      onFraudDetected={(result) => {
        console.log('Fraud detected:', result);
      }}
    />
  );
}

With Location Verification

<QRAuthBadge
  token="qr-token-string"
  showLocation={true}
  showIssuer={true}
  onVerified={(result) => {
    if (result.locationMatch) {
      console.log('Location verified!');
    }
  }}
/>

API Reference

QRAuthBadge

Props

• token (string, required): The QR code token to verify
• theme ('light' | 'dark', optional): Badge theme (default: 'light')
• showLocation (boolean, optional): Show location information (default: false)
• showIssuer (boolean, optional): Show issuer information (default: true)
• onVerified (function, optional): Callback when verification succeeds
• onFraudDetected (function, optional): Callback when fraud is detected
• apiKey (string, optional): API key for authentication
• apiBaseUrl (string, optional): Custom API base URL

Result Object

{
  verified: boolean;
  issuer: {
    name: string;
    trustLevel: 'low' | 'medium' | 'high';
  };
  destination: string;
  locationMatch: boolean;
  trustScore: number;
}

Styling

The component uses inline styles for styling with no external CSS dependencies. You can customize the appearance through props and the component will adapt to your application's styling.

Documentation

For more information, visit docs.qrauth.io