@kernaq/verify-react-native 1.0.4 → 2.0.1

package/src/KernaqVerify.tsx

@@ -1,16 +1,24 @@
 /**
- * <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)}
  *   />
  */
 import React, { useState, useCallback, useMemo } from 'react'
@@ -18,8 +26,6 @@ import {
   Modal,
   View,
   Text,
-  TouchableOpacity,
-  ScrollView,
   StyleSheet,
   SafeAreaView,
   Platform,
@@ -27,61 +33,81 @@ import {
 import { DEFAULT_LOCALE } from './locale'
 import { resolveTheme } from './theme'
 import { usePermissions } from './hooks/usePermissions'
-import { IntroStep } from './steps/IntroStep'
-import { DocumentStep } from './steps/DocumentStep'
-import { SelfieStep } from './steps/SelfieStep'
-import { LivenessStep } from './steps/LivenessStep'
+import { IntroStep }      from './steps/IntroStep'
+import { DocumentStep }   from './steps/DocumentStep'
+import { SelfieStep }     from './steps/SelfieStep'
+import { LivenessStep }   from './steps/LivenessStep'
 import { ProcessingStep } from './steps/ProcessingStep'
-import { ResultStep } from './steps/ResultStep'
-import type { VerifyConfig, VerifyStep, VerifyResult, VerifyLocale } from './types'
+import { ResultStep }     from './steps/ResultStep'
+import type {
+  VerifyConfig, VerifyStep, VerifyResult, VerifyLocale, VerifyStepName,
+} from './types'
 
 interface Props extends VerifyConfig {
   visible: boolean
 }
 
 type CaptureState = {
-  documentUri?: string
-  selfieUri?: string
-  videoUri?: string
-}
-
-const STEP_INDEX: Record<VerifyStep, number> = {
-  intro: -1,
-  document: 0,
-  selfie: 1,
-  liveness: 2,
-  processing: 3,
-  result: 3,
+  docFrontUri?: string
+  docBackUri?:  string
+  selfieUri?:   string
+  videoUri?:    string
 }
 
 export function KernaqVerify({
   visible,
   apiKey,
   backendUrl,
-  country = 'KEN',
+  country        = 'KEN',
   reference,
-  sandbox = false,
+  sandbox        = false,
   livenessDuration = 3000,
-  documentTypes = ['national_id', 'passport'],
+  livenessTaskCount = 2,
+  documentType   = 'national_id',
+  steps: stepsProp,
   theme: themeProp,
   locale: localeProp,
-  onCancel,
   onComplete,
   onError,
 }: Props) {
-  const [step, setStep] = useState<VerifyStep>('intro')
+  const [step,    setStep]    = useState<VerifyStep>('intro')
   const [capture, setCapture] = useState<CaptureState>({})
-  const [result, setResult] = useState<VerifyResult | null>(null)
-  const [error, setError] = useState<string | null>(null)
+  const [result,  setResult]  = useState<VerifyResult | null>(null)
+  const [error,   setError]   = useState<string | null>(null)
 
   const theme = useMemo(() => resolveTheme(themeProp), [themeProp])
-  const locale: VerifyLocale = useMemo(
-    () => ({ ...DEFAULT_LOCALE, ...localeProp }),
-    [localeProp]
-  )
+  const locale: VerifyLocale = useMemo(() => ({ ...DEFAULT_LOCALE, ...localeProp }), [localeProp])
   const { requestPermissions } = usePermissions()
   const s = styles(theme)
 
+  // Build the ordered flow from the steps prop
+  const flow = useMemo((): VerifyStep[] => {
+    const wanted = stepsProp ?? ['document', 'selfie', 'liveness'] as VerifyStepName[]
+    const out: VerifyStep[] = []
+    if (wanted.includes('document')) { out.push('doc-front'); out.push('doc-back') }
+    if (wanted.includes('selfie'))   out.push('selfie')
+    if (wanted.includes('liveness')) out.push('liveness')
+    out.push('processing')
+    return out
+  }, [stepsProp])
+
+  const next = useCallback((current: VerifyStep) => {
+    const idx = flow.indexOf(current)
+    const nextStep = flow[idx + 1] ?? 'processing'
+    goto(nextStep)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flow])
+
+  const goto = useCallback(async (s: VerifyStep) => {
+    if (s === 'doc-front' || s === 'doc-back' || s === 'selfie' || s === 'liveness') {
+      const granted = await requestPermissions()
+      if (!granted) { setError(locale.error_camera_denied); return }
+    }
+    setStep(s)
+    if (s === 'processing') submit()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [capture, locale])
+
   const reset = useCallback(() => {
     setStep('intro')
     setCapture({})
@@ -89,68 +115,38 @@ export function KernaqVerify({
     setError(null)
   }, [])
 
-  const goto = useCallback(async (next: VerifyStep) => {
-    if (next === 'document' || next === 'selfie' || next === 'liveness') {
-      const granted = await requestPermissions()
-      if (!granted) {
-        setError(locale.error_camera_denied)
-        return
-      }
-    }
-    setStep(next)
-    if (next === 'processing') {
-      submit()
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [capture, locale])
-
   const submit = useCallback(async () => {
-    const { documentUri, selfieUri, videoUri } = capture
-    if (!documentUri || !selfieUri) {
-      setError('Missing captures — please restart.')
-      setStep('result')
-      return
+    const { docFrontUri, docBackUri, selfieUri, videoUri } = capture
+    if (!docFrontUri && !selfieUri) {
+      // At least one capture needed depending on steps
     }
 
     const base = (backendUrl ?? 'https://api.identity.kernaq.com/v1').replace(/\/$/, '')
     const form = new FormData()
 
-    form.append('document', {
-      uri: documentUri,
-      name: 'document.jpg',
-      type: 'image/jpeg',
-    } as unknown as Blob)
-
-    form.append('selfie', {
-      uri: selfieUri,
-      name: 'selfie.jpg',
-      type: 'image/jpeg',
-    } as unknown as Blob)
-
+    if (docFrontUri) {
+      form.append('document', { uri: docFrontUri, name: 'doc_front.jpg', type: 'image/jpeg' } as any)
+    }
+    if (docBackUri) {
+      form.append('document_back', { uri: docBackUri, name: 'doc_back.jpg', type: 'image/jpeg' } as any)
+    }
+    if (selfieUri) {
+      form.append('selfie', { uri: selfieUri, name: 'selfie.jpg', type: 'image/jpeg' } as any)
+    }
     if (videoUri) {
-      form.append('video', {
-        uri: videoUri,
-        name: 'liveness.mp4',
-        type: 'video/mp4',
-      } as unknown as Blob)
+      form.append('video', { uri: videoUri, name: 'liveness.mp4', type: 'video/mp4' } as any)
     }
 
-    form.append('document_type', documentTypes[0] ?? 'national_id')
-    form.append('country', country)
-    form.append('reference', reference ?? `kq_${Date.now()}`)
+    form.append('document_type', documentType)
+    form.append('country',       country)
+    form.append('reference',     reference ?? `kq_${Date.now()}`)
     if (sandbox) form.append('sandbox', 'true')
 
-    const headers: Record<string, string> = {
-      'Content-Type': 'multipart/form-data',
-    }
+    const headers: Record<string, string> = { 'Content-Type': 'multipart/form-data' }
     if (apiKey) headers['X-API-Key'] = apiKey
 
     try {
-      const res = await fetch(`${base}/verify`, {
-        method: 'POST',
-        headers,
-        body: form,
-      })
+      const res  = await fetch(`${base}/verify`, { method: 'POST', headers, body: form })
       const body = (await res.json()) as Record<string, unknown>
       if (!res.ok) throw new Error((body['message'] as string) ?? `HTTP ${res.status}`)
 
@@ -169,117 +165,110 @@ export function KernaqVerify({
     } catch (err) {
       const msg = (err as Error).message
       setError(`${locale.error_network} ${msg}`)
+      setResult(null)
       setStep('result')
       onError?.({ code: 'network_error', message: msg })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [capture])
 
-  const handleCancel = () => {
-    reset()
-    onCancel?.()
-  }
-
-  const progressSteps: VerifyStep[] = ['document', 'selfie', 'liveness', 'processing']
-  const currentIdx = STEP_INDEX[step]
-
   return (
     <Modal
       visible={visible}
       animationType="slide"
       presentationStyle="pageSheet"
-      onRequestClose={handleCancel}
+      onRequestClose={() => {/* intentionally empty — user cannot dismiss */}}
     >
-      <SafeAreaView style={[s.safeArea, { backgroundColor: theme.bg }]}>
-        {/* Header */}
-        <View style={s.header}>
-          <Text style={s.logo}>Kernaq</Text>
-          {step !== 'processing' && (
-            <TouchableOpacity onPress={handleCancel} style={s.closeBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-              <Text style={s.closeText}>✕</Text>
-            </TouchableOpacity>
-          )}
-        </View>
+      <SafeAreaView style={[s.safe, { backgroundColor: theme.bg }]}>
 
-        {/* Progress bar */}
-        {currentIdx >= 0 && (
-          <View style={s.progress}>
-            {progressSteps.map((_, i) => (
-              <View
-                key={i}
-                style={[
-                  s.progressDot,
-                  i < currentIdx && { backgroundColor: theme.accent, opacity: 0.4 },
-                  i === currentIdx && { backgroundColor: theme.accent },
-                ]}
-              />
-            ))}
-          </View>
-        )}
-
-        {/* Body */}
-        <ScrollView
-          style={s.scroll}
-          contentContainerStyle={s.scrollContent}
-          keyboardShouldPersistTaps="handled"
-          bounces={false}
-        >
+        {/* ── Content ── */}
+        <View style={s.body}>
           {step === 'intro' && (
             <IntroStep
               theme={theme}
               locale={locale}
-              onStart={() => goto('document')}
+              onStart={() => {
+                const first = flow[0]
+                if (first) goto(first)
+              }}
+            />
+          )}
+
+          {step === 'doc-front' && (
+            <DocumentStep
+              theme={theme}
+              locale={locale}
+              side="front"
+              onCapture={(uri) => {
+                setCapture(c => ({ ...c, docFrontUri: uri }))
+                next('doc-front')
+              }}
             />
           )}
-          {step === 'document' && (
+
+          {step === 'doc-back' && (
             <DocumentStep
               theme={theme}
               locale={locale}
+              side="back"
+              frontUri={capture.docFrontUri}
               onCapture={(uri) => {
-                setCapture((c) => ({ ...c, documentUri: uri }))
-                goto('selfie')
+                setCapture(c => ({ ...c, docBackUri: uri }))
+                next('doc-back')
+              }}
+              onRetakeFront={() => {
+                setCapture(c => ({ ...c, docFrontUri: undefined }))
+                goto('doc-front')
               }}
             />
           )}
+
           {step === 'selfie' && (
             <SelfieStep
               theme={theme}
               locale={locale}
               onCapture={(uri) => {
-                setCapture((c) => ({ ...c, selfieUri: uri }))
-                goto('liveness')
+                setCapture(c => ({ ...c, selfieUri: uri }))
+                next('selfie')
               }}
-              onBack={() => setStep('document')}
             />
           )}
+
           {step === 'liveness' && (
             <LivenessStep
               theme={theme}
               locale={locale}
               duration={livenessDuration}
+              taskCount={livenessTaskCount}
               onCapture={(uri) => {
-                setCapture((c) => ({ ...c, videoUri: uri }))
-                goto('processing')
+                setCapture(c => ({ ...c, videoUri: uri }))
+                next('liveness')
               }}
-              onBack={() => setStep('selfie')}
             />
           )}
+
           {step === 'processing' && (
             <ProcessingStep theme={theme} locale={locale} />
           )}
+
           {step === 'result' && (
             <ResultStep
               theme={theme}
               locale={locale}
               result={result}
               error={error}
-              onRetry={() => {
-                reset()
-                setStep('intro')
-              }}
+              onRetry={() => { reset(); goto('intro') }}
             />
           )}
-        </ScrollView>
+        </View>
+
+        {/* ── Footer — Secured by Kernaq ── */}
+        {step !== 'processing' && (
+          <View style={s.footer}>
+            <Text style={s.footerText}>Secured by </Text>
+            <Text style={[s.footerText, { fontWeight: '600', color: theme.text }]}>Kernaq</Text>
+          </View>
+        )}
       </SafeAreaView>
     </Modal>
   )
@@ -287,43 +276,23 @@ export function KernaqVerify({
 
 const styles = (t: ReturnType<typeof resolveTheme>) =>
   StyleSheet.create({
-    safeArea: {
+    safe: {
       flex: 1,
     },
-    header: {
+    body: {
+      flex: 1,
+    },
+    footer: {
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingHorizontal: 20,
-      paddingTop: Platform.OS === 'android' ? 16 : 8,
-      paddingBottom: 8,
-    },
-    logo: {
-      fontSize: 14,
-      fontWeight: '700',
-      color: t.accent,
-      letterSpacing: 1.2,
-      textTransform: 'uppercase',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      paddingBottom: Platform.OS === 'ios' ? 4 : 10,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      borderTopColor: t.border,
     },
-    closeBtn: {
-      padding: 4,
-    },
-    closeText: {
-      fontSize: 18,
+    footerText: {
+      fontSize: 11,
       color: t.subtext,
     },
-    progress: {
-      flexDirection: 'row',
-      gap: 6,
-      paddingHorizontal: 20,
-      paddingBottom: 8,
-    },
-    progressDot: {
-      flex: 1,
-      height: 3,
-      borderRadius: 999,
-      backgroundColor: t.border,
-    },
-    scroll: { flex: 1 },
-    scrollContent: { flexGrow: 1 },
   })

package/src/index.ts

@@ -1,18 +1,19 @@
 /**
- * @kernaq/verify-react-native
+ * @kernaq/verify-react-native v2
  *
  * Drop-in KYC verification UI for React Native.
- * Works with bare React Native and Expo (requires expo prebuild).
+ * Matches @kernaq/verify web v2.0.0 — same flow, same API surface.
  *
  * Usage:
  *   import { KernaqVerify } from '@kernaq/verify-react-native'
  *
  *   <KernaqVerify
  *     visible={showVerify}
- *     apiKey="k_test_..."
+ *     documentType="national_id"
  *     country="KEN"
+ *     reference={userId}
+ *     steps={['document', 'selfie', 'liveness']}
  *     onComplete={(result) => console.log(result.verdict)}
- *     onCancel={() => setShowVerify(false)}
  *   />
  *
  * Peer dependencies:
@@ -21,12 +22,16 @@
  */
 
 export { KernaqVerify } from './KernaqVerify'
+export { analyseImageUri, analyseSelfieFrame } from './quality'
+export type { QualityReport, QualityConfig, QualityFailure } from './quality'
 export type {
   VerifyConfig,
   VerifyResult,
   VerifyStep,
+  VerifyStepName,
   VerifyVerdict,
   VerifyTheme,
   VerifyLocale,
   DocumentType,
+  LivenessTask,
 } from './types'

package/src/locale.ts

@@ -1,33 +1,36 @@
 import type { VerifyLocale } from './types'
 
 export const DEFAULT_LOCALE: VerifyLocale = {
-  intro_title:          'Verify your identity',
-  intro_body:           "This takes about 60 seconds. You'll need your ID document and a clear view of your face.",
-  intro_cta:            'Get started',
-  doc_title:            'Scan your document',
-  doc_instruction:      'Hold your ID flat inside the frame. Make sure it\'s well-lit and all four corners are visible.',
-  doc_capture_btn:      'Capture',
-  doc_retake_btn:       'Retake',
-  doc_next_btn:         'Looks good',
-  selfie_title:         'Take a selfie',
-  selfie_instruction:   'Look straight at the camera. Keep your face inside the oval.',
-  selfie_capture_btn:   'Take selfie',
-  selfie_retake_btn:    'Retake',
-  selfie_next_btn:      'Looks good',
-  liveness_title:       'Liveness check',
-  liveness_instruction: 'Press start, then slowly turn your head left and right.',
-  liveness_start_btn:   'Start recording',
-  liveness_recording:   'Recording…',
-  processing_title:     'Verifying your identity',
-  processing_subtitle:  'This usually takes a few seconds.',
-  result_pass_title:    'Verification passed',
-  result_pass_body:     'Your identity has been verified successfully.',
-  result_fail_title:    'Verification failed',
-  result_fail_body:     'We were unable to verify your identity. Please try again.',
-  result_review_title:  'Under review',
-  result_review_body:   'Your submission is being reviewed. This usually takes a few minutes.',
-  result_retry_btn:     'Try again',
-  error_camera_denied:  'Camera access denied. Please allow camera permissions in settings.',
-  error_quality:        'Image quality too low. Try better lighting or hold the camera steady.',
-  error_network:        'Network error. Please check your connection and try again.',
+  intro_title:            'Verify your identity',
+  intro_body:             'This takes about 90 seconds. You\'ll need your ID document and a clear view of your face.',
+  intro_cta:              'Get started',
+
+  doc_front_title:        'Document — front',
+  doc_front_instruction:  'Hold the front of your document flat inside the frame. Ensure all four corners are visible and there is no glare.',
+  doc_back_title:         'Document — back',
+  doc_back_instruction:   'Flip your document over and hold the back inside the frame.',
+  doc_capture_btn:        'Capture',
+  doc_retake_btn:         'Retake',
+
+  selfie_title:           'Selfie',
+  selfie_instruction:     'Centre your face inside the oval. Look directly at the camera.',
+
+  liveness_title:         'Liveness check',
+  liveness_ready:         'Follow the instructions as they appear.',
+  liveness_task_prefix:   'Please',
+  liveness_complete:      'Hold still…',
+
+  processing_title:       'Verifying…',
+
+  result_pass_title:      'Identity verified',
+  result_pass_body:       'Your verification was successful.',
+  result_fail_title:      'Verification failed',
+  result_fail_body:       'We could not verify your identity. Please try again with better lighting.',
+  result_review_title:    'Under review',
+  result_review_body:     'Your submission is being manually reviewed. This usually takes a few minutes.',
+
+  error_camera_denied:    'Camera access denied. Allow camera permissions and try again.',
+  error_blur:             'Image is too blurry — hold steady and ensure good lighting.',
+  error_quality:          'Image quality too low. Try better lighting or a steadier hand.',
+  error_network:          'Network error. Check your connection and try again.',
 }