@kernaq/verify-react-native 2.0.0 → 2.0.2

package/README.md

@@ -159,7 +159,7 @@ Never expose a live API key in your app. Instead, forward requests through your
 />
 ```
 
-Your backend endpoint receives a `multipart/form-data` POST with `document`, `selfie`, `video`, `document_type`, `country`, and `reference` fields. Forward it to `https://api.identity.kernaq.com/v1/verify` with your secret key.
+Your backend endpoint receives a `multipart/form-data` POST with `doc_front`, `doc_back`, `selfie`, `video`, `document_type`, `country`, and `reference` fields. Forward it to `https://api.identity.kernaq.com/v1/verify` with your secret key.
 
 ## Result object
 

package/dist/index.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 
 /**
- * @kernaq/verify-react-native — public types
+ * @kernaq/verify-react-native — public types (v2)
  */
-type VerifyStep = 'intro' | 'document' | 'selfie' | 'liveness' | 'processing' | 'result';
+type VerifyStep = 'intro' | 'doc-front' | 'doc-back' | 'selfie' | 'liveness' | 'processing' | 'result';
+/** Which capture steps to include. Default: all three. */
+type VerifyStepName = 'document' | 'selfie' | 'liveness';
+/** Liveness challenge tasks */
+type LivenessTask = 'blink' | 'turn-left' | 'turn-right' | 'nod' | 'open-mouth';
 type DocumentType = 'national_id' | 'passport' | 'driver_license' | 'alien_card';
 type VerifyVerdict = 'pass' | 'fail' | 'review';
 interface VerifyResult {
@@ -16,84 +20,64 @@ interface VerifyResult {
     documentFields?: Record<string, string>;
 }
 interface VerifyTheme {
-    /** Primary accent colour. Default: #111827 */
     accentColor?: string;
-    /** Modal background. Default: #ffffff */
     backgroundColor?: string;
-    /** Primary text colour. Default: #111827 */
     textColor?: string;
-    /** Subtle text colour. Default: #6b7280 */
     subtextColor?: string;
-    /** Border/divider colour. Default: #e5e7eb */
     borderColor?: string;
-    /** Card/surface colour. Default: #f9fafb */
     cardColor?: string;
-    /** Border radius for buttons and cards. Default: 12 */
     borderRadius?: number;
-    /** 'light' | 'dark' — overrides bg/text when set */
+    /** 'light' | 'dark' */
     mode?: 'light' | 'dark';
 }
 interface VerifyLocale {
     intro_title: string;
     intro_body: string;
     intro_cta: string;
-    doc_title: string;
-    doc_instruction: string;
+    doc_front_title: string;
+    doc_front_instruction: string;
+    doc_back_title: string;
+    doc_back_instruction: string;
     doc_capture_btn: string;
     doc_retake_btn: string;
-    doc_next_btn: string;
     selfie_title: string;
     selfie_instruction: string;
-    selfie_capture_btn: string;
-    selfie_retake_btn: string;
-    selfie_next_btn: string;
     liveness_title: string;
-    liveness_instruction: string;
-    liveness_start_btn: string;
-    liveness_recording: string;
+    liveness_ready: string;
+    liveness_task_prefix: string;
+    liveness_complete: string;
     processing_title: string;
-    processing_subtitle: string;
     result_pass_title: string;
     result_pass_body: string;
     result_fail_title: string;
     result_fail_body: string;
     result_review_title: string;
     result_review_body: string;
-    result_retry_btn: string;
     error_camera_denied: string;
+    error_blur: string;
     error_quality: string;
     error_network: string;
 }
 interface VerifyConfig {
-    /**
-     * Your Kernaq publishable API key (k_test_... or k_live_...).
-     * For production use a backend proxy and pass backendUrl instead.
-     */
     apiKey?: string;
-    /**
-     * URL of your backend proxy that forwards to the Kernaq Identity API.
-     * POST /verify with multipart/form-data.
-     */
     backendUrl?: string;
-    /** Document types the user can select. Default: ['national_id', 'passport'] */
-    documentTypes?: DocumentType[];
-    /** Country code (ISO 3166-1 alpha-3). Default: 'KEN' */
+    /** Single document type the developer specifies. Default: 'national_id' */
+    documentType?: DocumentType;
     country?: string;
-    /** Your internal reference ID for this user/session */
     reference?: string;
-    /** Use sandbox mode — no billing, test responses */
     sandbox?: boolean;
-    /** Liveness recording duration in ms. Default: 3000 */
     livenessDuration?: number;
-    /** Theming */
+    /** Number of liveness tasks. Default: 2 */
+    livenessTaskCount?: number;
+    /**
+     * Which steps to include. Default: all three.
+     * @example steps={['selfie', 'liveness']}
+     */
+    steps?: VerifyStepName[];
     theme?: VerifyTheme;
-    /** Override any displayed string */
     locale?: Partial<VerifyLocale>;
-    /** Called when the user dismisses without completing */
     onCancel?: () => void;
-    /** Called when verification is complete */
     onComplete?: (result: VerifyResult) => void;
-    /** Called on unrecoverable error */
     onError?: (error: {
         code: string;
         message: string;
@@ -101,25 +85,86 @@ interface VerifyConfig {
 }
 
 /**
- * <KernaqVerify /> — drop-in identity verification modal for React Native.
+ * <KernaqVerify /> — drop-in identity verification modal for React Native (v2).
  *
- * Usage:
- *   import { KernaqVerify } from '@kernaq/verify-react-native'
+ * Matches @kernaq/verify web v2.0.0:
+ *   - No header / logo
+ *   - No progress bar
+ *   - No cancel/close button — user must complete the flow
+ *   - Front + back document capture
+ *   - Auto-capture selfie with guidance pill
+ *   - Randomised liveness tasks with in-viewport overlay
+ *   - Configurable steps prop
+ *   - "Secured by Kernaq" footer only
  *
+ * Usage:
  *   <KernaqVerify
- *     visible={showVerify}
- *     apiKey="k_test_..."
+ *     visible={show}
+ *     documentType="national_id"
  *     country="KEN"
  *     reference={userId}
- *     onComplete={(result) => console.log(result.verdict)}
- *     onCancel={() => setShowVerify(false)}
+ *     steps={['document', 'selfie', 'liveness']}
+ *     onComplete={(r) => console.log(r.verdict)}
  *   />
  */
 
 interface Props extends VerifyConfig {
     visible: boolean;
 }
-declare function KernaqVerify({ visible, apiKey, backendUrl, country, reference, sandbox, livenessDuration, documentTypes, theme: themeProp, locale: localeProp, onCancel, onComplete, onError, }: Props): React.JSX.Element;
+declare function KernaqVerify({ visible, apiKey, backendUrl, country, reference, sandbox, livenessDuration, livenessTaskCount, documentType, steps: stepsProp, theme: themeProp, locale: localeProp, onComplete, onError, }: Props): React.JSX.Element;
+
+/**
+ * quality.ts — Native port of @kernaq/capture-web analyseImage logic.
+ *
+ * React Native has no OffscreenCanvas or createImageBitmap, so we decode
+ * the JPEG manually from its base64 representation to extract a luminance
+ * sample, then run the same Laplacian variance + brightness + fill-ratio
+ * checks the web SDK uses.
+ *
+ * This is intentionally dependency-free — no expo-image-manipulator,
+ * no worklets, no native modules beyond what vision-camera already provides.
+ *
+ * The JPEG sampling approach:
+ *   1. takeSnapshot({ quality: 20 }) → tiny file (~5-15KB)
+ *   2. fetch as ArrayBuffer → raw bytes
+ *   3. Skip JPEG header bytes, sample raw DCT-domain luminance bytes
+ *      as a brightness proxy (not exact, but sufficient for dark/overexposed detection)
+ *   4. For blur: compute variance of luminance differences between adjacent samples
+ *
+ * Limitations vs web SDK:
+ *   - Fill ratio check is approximated via luminance variance spread
+ *   - Glasses glare heuristic is the same eye-band brightness check
+ *   - Blur detection is less precise but calibrated to the same thresholds
+ */
+interface QualityReport {
+    passed: boolean;
+    blurScore: number;
+    brightness: number;
+    fillRatio: number;
+    failures: QualityFailure[];
+}
+type QualityFailure = 'too_blurry' | 'too_dark' | 'too_bright' | 'too_small';
+interface QualityConfig {
+    minBlurScore?: number;
+    minBrightness?: number;
+    maxBrightness?: number;
+    minFillRatio?: number;
+}
+/**
+ * Analyse an image from a file URI.
+ * Reads the raw bytes, samples luminance, returns a quality report.
+ */
+declare function analyseImageUri(uri: string, config?: QualityConfig): Promise<QualityReport>;
+/**
+ * Selfie-specific quality check with glasses/glare heuristic.
+ * Takes snapshots from two regions: full frame and top-40% (eye area).
+ *
+ * Returns a guidance message (empty string = all good) and a passing flag.
+ */
+declare function analyseSelfieFrame(uri: string, config?: QualityConfig): Promise<{
+    passing: boolean;
+    message: string;
+}>;
 
-export { KernaqVerify };
-export type { DocumentType, VerifyConfig, VerifyLocale, VerifyResult, VerifyStep, VerifyTheme, VerifyVerdict };
+export { KernaqVerify, analyseImageUri, analyseSelfieFrame };
+export type { DocumentType, LivenessTask, QualityConfig, QualityFailure, QualityReport, VerifyConfig, VerifyLocale, VerifyResult, VerifyStep, VerifyStepName, VerifyTheme, VerifyVerdict };