@kernaq/verify-react-native 2.0.1 → 2.0.2

package/src/KernaqVerify.tsx

@@ -21,7 +21,7 @@
  *     onComplete={(r) => console.log(r.verdict)}
  *   />
  */
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo, useRef } from 'react'
 import {
   Modal,
   View,
@@ -75,6 +75,17 @@ export function KernaqVerify({
   const [result,  setResult]  = useState<VerifyResult | null>(null)
   const [error,   setError]   = useState<string | null>(null)
 
+  // Mirror capture in a ref so submit() always reads the latest value even
+  // when called from inside a stale closure (e.g. goto → submit chain).
+  const captureRef = useRef<CaptureState>({})
+  const setCaptureSync = (updater: (prev: CaptureState) => CaptureState) => {
+    setCapture((prev: CaptureState) => {
+      const next = updater(prev)
+      captureRef.current = next
+      return next
+    })
+  }
+
   const theme = useMemo(() => resolveTheme(themeProp), [themeProp])
   const locale: VerifyLocale = useMemo(() => ({ ...DEFAULT_LOCALE, ...localeProp }), [localeProp])
   const { requestPermissions } = usePermissions()
@@ -105,30 +116,43 @@ export function KernaqVerify({
     }
     setStep(s)
     if (s === 'processing') submit()
+  // submit is stable (no deps that change); locale/requestPermissions are stable refs
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [capture, locale])
+  }, [locale])
 
   const reset = useCallback(() => {
     setStep('intro')
+    captureRef.current = {}
     setCapture({})
     setResult(null)
     setError(null)
   }, [])
 
   const submit = useCallback(async () => {
-    const { docFrontUri, docBackUri, selfieUri, videoUri } = capture
-    if (!docFrontUri && !selfieUri) {
-      // At least one capture needed depending on steps
+    const { docFrontUri, docBackUri, selfieUri, videoUri } = captureRef.current
+    const steps = stepsProp ?? ['document', 'selfie', 'liveness'] as VerifyStepName[]
+    if (steps.includes('document') && !docFrontUri) {
+      setError('Document capture is missing — please restart.')
+      setStep('result')
+      onError?.({ code: 'capture_missing', message: 'Document capture missing' })
+      return
+    }
+    if (steps.includes('selfie') && !selfieUri) {
+      setError('Selfie capture is missing — please restart.')
+      setStep('result')
+      onError?.({ code: 'capture_missing', message: 'Selfie capture missing' })
+      return
     }
 
     const base = (backendUrl ?? 'https://api.identity.kernaq.com/v1').replace(/\/$/, '')
+    const endpoint = sandbox ? '/verify/sandbox' : '/verify'
     const form = new FormData()
 
     if (docFrontUri) {
-      form.append('document', { uri: docFrontUri, name: 'doc_front.jpg', type: 'image/jpeg' } as any)
+      form.append('doc_front', { 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)
+      form.append('doc_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)
@@ -140,13 +164,16 @@ export function KernaqVerify({
     form.append('document_type', documentType)
     form.append('country',       country)
     form.append('reference',     reference ?? `kq_${Date.now()}`)
-    if (sandbox) form.append('sandbox', 'true')
+    // sandbox is handled via URL routing above — no form field needed
 
-    const headers: Record<string, string> = { 'Content-Type': 'multipart/form-data' }
+    // Do NOT set Content-Type manually — RN fetch will set multipart/form-data with
+    // the correct boundary automatically. Setting it manually omits the boundary and
+    // causes the server to reject the request.
+    const headers: Record<string, string> = {}
     if (apiKey) headers['X-API-Key'] = apiKey
 
     try {
-      const res  = await fetch(`${base}/verify`, { method: 'POST', headers, body: form })
+      const res  = await fetch(`${base}${endpoint}`, { 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}`)
 
@@ -170,7 +197,7 @@ export function KernaqVerify({
       onError?.({ code: 'network_error', message: msg })
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [capture])
+  }, [])  // no deps — always reads from captureRef.current, never from stale closure
 
   return (
     <Modal
@@ -200,7 +227,7 @@ export function KernaqVerify({
               locale={locale}
               side="front"
               onCapture={(uri) => {
-                setCapture(c => ({ ...c, docFrontUri: uri }))
+                setCaptureSync(c => ({ ...c, docFrontUri: uri }))
                 next('doc-front')
               }}
             />
@@ -213,11 +240,11 @@ export function KernaqVerify({
               side="back"
               frontUri={capture.docFrontUri}
               onCapture={(uri) => {
-                setCapture(c => ({ ...c, docBackUri: uri }))
+                setCaptureSync(c => ({ ...c, docBackUri: uri }))
                 next('doc-back')
               }}
               onRetakeFront={() => {
-                setCapture(c => ({ ...c, docFrontUri: undefined }))
+                setCaptureSync(c => ({ ...c, docFrontUri: undefined }))
                 goto('doc-front')
               }}
             />
@@ -228,7 +255,7 @@ export function KernaqVerify({
               theme={theme}
               locale={locale}
               onCapture={(uri) => {
-                setCapture(c => ({ ...c, selfieUri: uri }))
+                setCaptureSync(c => ({ ...c, selfieUri: uri }))
                 next('selfie')
               }}
             />
@@ -241,7 +268,7 @@ export function KernaqVerify({
               duration={livenessDuration}
               taskCount={livenessTaskCount}
               onCapture={(uri) => {
-                setCapture(c => ({ ...c, videoUri: uri }))
+                setCaptureSync(c => ({ ...c, videoUri: uri }))
                 next('liveness')
               }}
             />

package/src/steps/LivenessStep.tsx

@@ -61,6 +61,14 @@ export function LivenessStep({ theme, locale, duration, taskCount = 2, onCapture
   const [complete,   setComplete]   = useState(false)
   const [recording,  setRecording]  = useState(false)
 
+  // Keep a ref in sync with taskIdx so setTimeout/setInterval closures always
+  // read the latest value and don't stall on a stale snapshot.
+  const taskIdxRef = useRef(0)
+  const setTaskIdxSynced = (n: number) => {
+    taskIdxRef.current = n
+    setTaskIdx(n)
+  }
+
   const progressTimer = useRef<ReturnType<typeof setInterval> | null>(null)
   const taskTimer     = useRef<ReturnType<typeof setTimeout>  | null>(null)
   const pulseAnim     = useRef(new Animated.Value(1)).current
@@ -82,15 +90,14 @@ export function LivenessStep({ theme, locale, duration, taskCount = 2, onCapture
 
   const startTask = () => {
     if (!recording) {
-      // Begin recording when first task starts
       startRecording(
-        (video) => { onCapture(video.uri) },
+        (video: import('../hooks/useCamera').VideoResult) => { onCapture(video.uri) },
         () => {}
       )
       setRecording(true)
     }
 
-    const task = tasks[taskIdx]
+    const task = tasks[taskIdxRef.current]
     if (!task) return
     setStarted(true)
     setProgress(0)
@@ -109,16 +116,16 @@ export function LivenessStep({ theme, locale, duration, taskCount = 2, onCapture
   }
 
   const nextTask = () => {
-    const next = taskIdx + 1
-    setTaskDone(prev => prev + 1)
+    const next = taskIdxRef.current + 1
+    setTaskDone((prev: number) => prev + 1)
     if (next >= tasks.length) {
       finishLiveness()
       return
     }
-    setTaskIdx(next)
+    setTaskIdxSynced(next)
     setStarted(false)
     setProgress(0)
-    // Short pause then auto-start next task
+    // Use the ref-based startTask via the timer so it reads the fresh taskIdx
     taskTimer.current = setTimeout(() => startTask(), 500)
   }
 
@@ -151,7 +158,7 @@ export function LivenessStep({ theme, locale, duration, taskCount = 2, onCapture
       {/* Task progress dots */}
       {!complete && (
         <View style={s.taskDots}>
-          {tasks.map((_, i) => (
+          {tasks.map((_: TaskDef, i: number) => (
             <View
               key={i}
               style={[