@sanctum-key/react-native-sdk 1.0.41 → 1.0.44

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions, Alert } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -15,7 +15,9 @@ import { cropByObb, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../uti
 import REGION_MAPPING from '../../config/region_mapping.json';
 import QRCode from 'react-native-qrcode-svg';
 import { cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
-import kycService, { authentification } from '../../modules/api/KYCService';
+import kycService, { authentification, clearAuthToken } from '../../modules/api/KYCService';
+import { Linking } from 'react-native';
+import { Camera } from 'react-native-vision-camera';
 
 const ISO_TO_COUNTRY_NAME: Record<string, string> = {
   'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 
@@ -97,6 +99,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const { actions, state, env, apiKey } = useTemplateKYCFlowContext();
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 
+
   const countrySelectionData = useMemo(() => {
     const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
     return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null;
@@ -212,6 +215,58 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     }
   }, [value, currentSide]);
 
+  const handleStartCamera = async () => {
+    // Web browsers handle permissions natively when the media stream is requested
+    if (Platform.OS === 'web') {
+      setShowCamera(true);
+      refreshCamera();
+      actions.showCustomStepper(false);
+      return;
+    }
+
+    try {
+      // 1. Get current status
+      let status = await Camera.getCameraPermissionStatus();
+
+      // 2. If it's anything other than granted, request it
+      if (status !== 'granted') {
+        status = await Camera.requestCameraPermission();
+      }
+
+      // 3. Check final status
+      if (status === 'granted') {
+        // Permission given, start camera
+        setShowCamera(true);
+        refreshCamera();
+        actions.showCustomStepper(false);
+      } else {
+        // Permission permanently denied or restricted
+        Alert.alert(
+          state.currentLanguage === 'en' ? 'Camera Access Required' : 'Accès à la caméra requis',
+          state.currentLanguage === 'en' 
+            ? 'We need camera access to scan your ID. Please tap "Settings" to enable it.' 
+            : 'Nous avons besoin de l\'accès à la caméra pour scanner votre pièce d\'identité. Veuillez appuyer sur "Paramètres" pour l\'activer.',
+          [
+            { 
+              text: state.currentLanguage === 'en' ? 'Cancel' : 'Annuler', 
+              style: 'cancel' 
+            },
+            { 
+              text: state.currentLanguage === 'en' ? 'Settings' : 'Paramètres', 
+              onPress: () => Linking.openSettings() 
+            }
+          ]
+        );
+      }
+    } catch (error) {
+      console.warn('Failed to request camera permission', error);
+      // Fallback
+      setShowCamera(true);
+      refreshCamera();
+      actions.showCustomStepper(false);
+    }
+  };
+
   const cameraConfig = useMemo(() => {
     let instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
     if (scanPhase === 'barcode') instructions = '';
@@ -407,12 +462,37 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     }
   };
 
+  const handleExitKYCFlow = () => {
+    clearAuthToken();
+    
+    // 2. Clear all local camera/capture states
+    setCapturedImages({});
+    if (onValueChange) onValueChange({}); // Clear the parent's form state
+    setCurrentSide('front');
+    setScanPhase('image');
+    setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '' });
+    scannedBarcodeRef.current = null;
+    setPendingCAImage(null);
+    setIsProcessingCapture(false);
+    setProcessingImagePath(null);
+  
+    // 3. Restart the flow
+    if (actions.resetTemplate) {
+      // This is the best method: it wipes the context and rebuilds the initial state
+      actions.resetTemplate();
+    } else if (actions.goToComponent && state.template?.components?.length > 0) {
+      actions.goToComponent(state.template.components[0].id);
+    } else {
+      console.warn("Could not restart flow. Check your KYC context actions.");
+    }
+};
+
   const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string; barcode?: unknown }) => {
     if (isProcessingCaptureRef.current) return;
     if (scanPhaseRef.current === 'barcode') return;
     if (isAnalyzingRef.current) return;
 
-    // USE REFS TO AVOID IOS NATIVE STALE CLOSURE
+
     const side = currentSideRef.current;
     const captured = capturedImagesRef.current;
     const docType = selectedDocTypeRef.current;
@@ -510,41 +590,59 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       } catch (error: any) {
         clearTimeout(watchdog);
         
-        const rawMessage = (error?.message || '').toLowerCase();
+        const rawMessage = (typeof error === 'string' ? error : (error?.message || '')).toLowerCase();
+        const statusCode = error?.response?.status || error?.status;
+
+        if (
+          statusCode === 401 || 
+          statusCode === 403 || 
+          rawMessage.includes('401') || 
+          rawMessage.includes('unauthorized') || 
+          rawMessage.includes('token') ||
+          rawMessage.includes('unauthenticated')
+        ) {
+          setShowCamera(false); 
+          setIsProcessingCapture(false);
+          setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: '' }));
+          
+          // Use React Native's native Alert to wait for the user's tap
+          Alert.alert(
+            state.currentLanguage === 'en' ? 'Session Expired' : 'Session Expirée',
+            state.currentLanguage === 'en' 
+              ? 'Your secure session has expired. Please restart the process.' 
+              : 'Votre session sécurisée a expiré. Veuillez recommencer.',
+            [
+              {
+                text: state.currentLanguage === 'en' ? 'Restart' : 'Recommencer',
+                onPress: () => handleExitKYCFlow() // Redirects ONLY when they click the button
+              }
+            ],
+            { cancelable: false } // Forces them to click the button
+          );
+          
+          return; 
+        }
+
         let hintMessage = '';
 
+        // 2. Business Logic Errors
         if (rawMessage.includes('pays sélectionné') || rawMessage.includes('country mismatch')) {
-          hintMessage = state.currentLanguage === 'en' 
-            ? 'Does not match the selected country.' 
-            : 'Ne correspond pas au pays sélectionné.';
-        } 
-        else if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
-          hintMessage = state.currentLanguage === 'en' 
-            ? 'Move to better lighting.' 
-            : 'Améliorez l\'éclairage.';
-        } 
-        else if (rawMessage.includes('card_not_fully_in_frame') || rawMessage.includes('frame')) {
-          hintMessage = state.currentLanguage === 'en' 
-            ? 'Move closer to the document.' 
-            : 'Rapprochez-vous du document.';
-        } 
-        else if (rawMessage.includes('ne correspond pas au recto')) {
-          hintMessage = state.currentLanguage === 'en' 
-            ? 'Please scan the same ID.' 
-            : 'Veuillez scanner la même pièce.';
+          hintMessage = state.currentLanguage === 'en' ? 'Does not match the selected country.' : 'Ne correspond pas au pays sélectionné.';
+        } else if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
+          hintMessage = state.currentLanguage === 'en' ? 'Move to better lighting and ensure card is in frame.' : 'Améliorez l\'éclairage et assurez-vous que la carte est bien cadrée.';
+        } else if (rawMessage.includes('card_not_fully_in_frame') || rawMessage.includes('frame')) {
+          hintMessage = state.currentLanguage === 'en' ? 'Move closer to the document.' : 'Rapprochez-vous du document.';
+        } else if (rawMessage.includes('ne correspond pas au recto')) {
+          hintMessage = state.currentLanguage === 'en' ? 'Please scan the same ID.' : 'Veuillez scanner la même pièce.';
         } 
-        // 2. If it's not a known logical error, assume it's a network/API failure
+        // 3. Fallback to Network/API failure
         else {
           const isNetworkError = error.isAxiosError || error.message === 'Network Error' || error.code === 'ECONNABORTED' || rawMessage.includes('network') || !error.response;
           
           if (isNetworkError) {
-            hintMessage = state.currentLanguage === 'en' 
-              ? 'Poor connection. Retrying...' 
-              : 'Connexion faible. Nouvelle tentative...';
+            hintMessage = state.currentLanguage === 'en' ? 'Poor connection. Retrying...' : 'Connexion faible. Nouvelle tentative...';
           } else {
-            hintMessage = state.currentLanguage === 'en' 
-              ? 'Analyzing...' // Generic fallback if an unknown API error occurs
-              : 'Analyse en cours...';
+            hintMessage = state.currentLanguage === 'en' ? 'Analyzing...' : 'Analyse en cours...';
           }
         }
 
@@ -724,7 +822,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                     </>
                   ) : (
                     <>
-                      <Button title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }} variant="primary" size="large" fullWidth />
+                    <Button
+                        title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
+                        onPress={handleStartCamera}
+                        variant="primary"
+                        size="large"
+                        fullWidth
+                      />
                       {Platform.OS === 'web' && ( <Button title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} onPress={() => setShowQRModal(true)} variant="outline" size="large" fullWidth /> )}
                     </>
                   )}

package/src/modules/api/CardAuthentification.ts

@@ -3,7 +3,7 @@ import { cropByObb, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from "../../uti
 import { GovernmentDocumentType, IBbox } from "../../types/KYC.types";
 import { KycEnvironment } from "../../types/env.types";
 import { logger } from "../../utils/logger";
-// import { countryData } from "../../config/countriesData";
+import { countryData } from "../../config/countriesData";
 
 interface CardObbData {
     obb: number[][];
@@ -301,11 +301,18 @@ export async function backVerification(
         const activeTemplatePath = templateResponse.template_path || result.templatePath || '';
         
         if (activeTemplatePath) {
-            // Note: Make sure ISO_TO_COUNTRY_NAME is properly defined or imported if needed here
-            const hasCodeMatch = activeTemplatePath.includes(`_${result.code}_`);
-            // Assuming you have countryData available, otherwise you can rely just on CodeMatch
-            if (!hasCodeMatch && !activeTemplatePath.toLowerCase().includes(result.code.toLowerCase())) {
-                logger.log(`Template mismatch! Expected region: ${result.code}, Detected: ${activeTemplatePath}`);
+            const countryInfo = countryData[result.code];
+            
+            const countryName = countryInfo?.name_en || countryInfo?.name || '';
+            
+            const hasCodeMatch = activeTemplatePath.toUpperCase().includes(`_${result.code.toUpperCase()}_`) || 
+                                activeTemplatePath.toUpperCase().includes(`${result.code.toUpperCase()}/`);
+                                
+            const hasNameMatch = countryName && activeTemplatePath.toLowerCase().includes(countryName.toLowerCase());
+
+            // 5. If NEITHER match, throw the error
+            if (!hasCodeMatch && !hasNameMatch) {
+                logger.log(`Template mismatch! Expected region: ${result.code} (${countryName}), Detected: ${activeTemplatePath}`);
                 throw new Error(`Le document ne correspond pas au pays sélectionné (${result.code}).`);
             }
         }
@@ -499,6 +506,9 @@ export async function checkTemplateType(
         
     } catch (e: any) {
         logger.log('Error checking template type:', JSON.stringify(errorMessage(e), null, 2));
+        if (e?.response?.status === 401 || e?.response?.status === 403 || e?.isAxiosError) {
+            throw e; 
+        }
         if (e?.message === 'CARD_NOT_FULLY_IN_FRAME' || e?.message?.includes('ne correspond pas')) throw e;
         throw new Error(e?.message || 'Erreur de vérification du template');
     }

package/src/modules/api/KYCService.ts

@@ -488,6 +488,10 @@ export const authentification = async (): Promise<string> => {
   }
 }
 
+export const clearAuthToken = () => {
+  cachedToken = null; // Clear memory cache
+};
+
 export const errorMessage = (error: any) => {
   return error.response?.data?.message || error.response?.data?.detail || error.response?.data?.error || error.response?.data || error.message;
 }