@sanctum-key/react-native-sdk 1.0.24 → 1.0.26

package/src/web/WebKYCEntry.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useState, useCallback, JSX } from 'react';
 import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator } from 'react-native';
-// import { TemplateKYCFlow } from '../components/TemplateKYCFlowRefactored';
-// import { KYCTemplate } from '../types/KYC.types';
 import { useI18n } from '../hooks/useI18n';
 import { TemplateKYCExample } from '../components/TemplateKYCExample';
 import { isCallbackUrlAllowed } from '../config/allowedDomains';
@@ -24,15 +22,18 @@ interface URLParams {
   lang?: string;
   theme?: string;
   kyc_id?: string;
-  secret?: string; // Optional secret for signature generation
-  env?: 'PRODUCTION' | 'SANDBOX'; // Environment mode
-  template_id?: string; // Template ID for dynamic template loading
-  server_env?: BackendEnvironment; // Backend environment mode
-  step?: string; // Deprecated: use component_index.
-  component_index?: string; // Index in template.components (0-based) to resume at
-  country?: string; // Code pays pour restaurer la sélection (reprise multi-appareil)
-  document_type?: string; // Type de document (national_id, passport, etc.)
-  region?: string; // Région si applicable
+  secret?: string;
+  env?: 'PRODUCTION' | 'SANDBOX';
+  template_id?: string;
+  server_env?: BackendEnvironment;
+  step?: string;
+  component_index?: string;
+  country?: string;
+  document_type?: string;
+  region?: string;
+  // 🚨 NEW: Added explicitly for the mobile handoff
+  session_id?: string; 
+  resume?: boolean;
 }
 
 interface VerificationSteps {
@@ -43,159 +44,91 @@ interface VerificationSteps {
 
 const postWebhook = async (url: string, payload: unknown, timeoutMs: number = 5000) => {
   const body = JSON.stringify(payload);
-
   const postWithTimeout = async (init: RequestInit) => {
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
     try {
-      return await fetch(url, {
-        method: 'POST',
-        ...init,
-        signal: controller.signal,
-      });
+      return await fetch(url, { method: 'POST', ...init, signal: controller.signal });
     } finally {
       clearTimeout(timeoutId);
     }
   };
 
-  // In browser, first try a regular JSON POST so servers validating Content-Type
-  // behave the same as Postman/cURL.
   if (typeof window !== 'undefined') {
     try {
-      const response = await postWithTimeout({
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body,
-        keepalive: true,
-      });
-
-      if (!response.ok) {
-        throw new Error(`Webhook failed with status ${response.status}`);
-      }
+      const response = await postWithTimeout({ headers: { 'Content-Type': 'application/json' }, body, keepalive: true });
+      if (!response.ok) throw new Error(`Webhook failed with status ${response.status}`);
       return;
     } catch (error) {
-      // If the request is blocked by browser CORS policy or a network error occurs,
-      // fallback to no-cors + text/plain for best-effort delivery.
-      if (error instanceof Error && error.name === 'AbortError') {
-        throw error;
-      }
-
-      await postWithTimeout({
-        mode: 'no-cors',
-        headers: {
-          'Content-Type': 'text/plain;charset=UTF-8',
-        },
-        body,
-        keepalive: true,
-      });
+      if (error instanceof Error && error.name === 'AbortError') throw error;
+      await postWithTimeout({ mode: 'no-cors', headers: { 'Content-Type': 'text/plain;charset=UTF-8' }, body, keepalive: true });
       return;
     }
   }
 
-  const response = await postWithTimeout({
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body,
-  });
-
-  if (!response.ok) {
-    throw new Error(`Webhook failed with status ${response.status}`);
-  }
+  const response = await postWithTimeout({ headers: { 'Content-Type': 'application/json' }, body });
+  if (!response.ok) throw new Error(`Webhook failed with status ${response.status}`);
 };
 
-export function WebKYCEntry({
-  onComplete,
-  onError,
-  onCancel,
-  onSessionSave,
-}: WebKYCEntryProps): JSX.Element {
-  console.log('first')
+export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: WebKYCEntryProps): JSX.Element {
   const { setLocale } = useI18n();
   const [urlParams, setUrlParams] = useState<URLParams>({});
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isAnalyzing, setIsAnalyzing] = useState(false);
 
-  // Parse URL parameters
   const parseUrlParams = useCallback((): URLParams => {
     if (typeof window === 'undefined') return {};
 
-    const urlParams = new URLSearchParams(window.location.search);
-    const envParam = urlParams.get('env');
-    const validEnv = envParam === 'SANDBOX' || envParam === 'PRODUCTION' ? envParam : 'PRODUCTION';
+    const rawUrl = window.location.href;
+    console.log("Raw URL intercepted:", rawUrl);
+    
+    const paramsString = rawUrl.replace(/^[^?#]*[?#]/, '').replace(/[?#]/g, '&');
 
-    const serverEnvParam = urlParams.get('server_env');
-    const validServerEnv: BackendEnvironment = serverEnvParam === 'TEST' || serverEnvParam === 'PRODUCTION'
-      ? (serverEnvParam as BackendEnvironment)
-      : 'PRODUCTION';
+    const urlParams = new URLSearchParams(paramsString);
+
+    const getParam = (key: string) => urlParams.get(key) || undefined;
+
+    const envParam = getParam('env');
+    const validEnv = envParam === 'SANDBOX' || envParam === 'PRODUCTION' ? envParam : 'PRODUCTION';
+    const serverEnvParam = getParam('server_env');
+    const validServerEnv: BackendEnvironment = serverEnvParam === 'TEST' || serverEnvParam === 'PRODUCTION' ? (serverEnvParam as BackendEnvironment) : 'PRODUCTION';
 
     return {
-      token: urlParams.get('token') || undefined,
-      return_url: urlParams.get('return_url') || undefined,
-      push_url: urlParams.get('push_url') || undefined,
-      save_session_url:
-        urlParams.get('save_session_url') ||
-        urlParams.get('saveSessionUrl') ||
-        undefined,
-      reference_id: urlParams.get('reference_id') || undefined,
-      lang: urlParams.get('lang') || 'en',
-      theme: urlParams.get('theme') || 'light',
-      kyc_id: urlParams.get('kyc_id') || undefined,
-      secret: urlParams.get('secret') || undefined,
+      token: getParam('token'),
+      return_url: getParam('return_url'),
+      push_url: getParam('push_url'),
+      save_session_url: getParam('save_session_url') || getParam('saveSessionUrl'),
+      reference_id: getParam('reference_id'),
+      lang: getParam('lang') || 'en',
+      theme: getParam('theme') || 'light',
+      kyc_id: getParam('kyc_id') || getParam('session_id'), 
+      secret: getParam('secret'),
       env: validEnv,
-      template_id: urlParams.get('template_id') || undefined,
+      template_id: getParam('template_id'),
       server_env: validServerEnv,
-      step: urlParams.get('step') || undefined,
-      component_index: urlParams.get('component_index') || undefined,
-      country: urlParams.get('country') || undefined,
-      document_type: urlParams.get('document_type') || undefined,
-      region: urlParams.get('region') || undefined,
+      step: getParam('step'),
+      component_index: getParam('component_index'),
+      country: getParam('country'),
+      document_type: getParam('document_type'),
+      region: getParam('region'),
+      resume: getParam('resume') === 'true',
     };
   }, []);
 
-  // Safe redirect function with enhanced validation
-  const redirectToReturnUrl = useCallback(async (params: {
-    status: 'completed' | 'cancelled' | 'error';
-    kyc_id?: string;
-    message?: string;
-    processing_state?: 'analyzing' | 'completed' | 'pending';
-    verification_steps?: VerificationSteps;
-  }) => {
+  const redirectToReturnUrl = useCallback(async (params: { status: 'completed' | 'cancelled' | 'error'; kyc_id?: string; message?: string; processing_state?: 'analyzing' | 'completed' | 'pending'; verification_steps?: VerificationSteps; }) => {
     const { return_url } = urlParams;
-
-    if (!return_url) {
-      console.warn('No return_url provided');
-      return;
-    }
-
+    if (!return_url) { console.warn('No return_url provided'); return; }
     try {
-      // Enhanced URL validation with domain whitelist
       const validation = isCallbackUrlAllowed(return_url);
       if (!validation.allowed) {
         console.error('Callback URL validation failed:', validation.reason);
         setError(`Security Error: ${validation.reason}`);
-
-        // Log suspicious redirect attempt
-        console.warn('Suspicious redirect attempt blocked:', {
-          url: return_url,
-          reason: validation.reason,
-          timestamp: new Date().toISOString(),
-        });
         return;
       }
-      // Send postMessage to parent if in iframe
       if (window.parent !== window) {
         const targetOrigin = new URL(return_url).origin;
-        window.parent.postMessage({
-          type: 'kyc_result',
-          status: params.status,
-          kyc_id: params.kyc_id,
-          message: params.message,
-          processing_state: params.processing_state,
-          verification_steps: params.verification_steps,
-        }, targetOrigin);
+        window.parent.postMessage({ type: 'kyc_result', status: params.status, kyc_id: params.kyc_id, message: params.message, processing_state: params.processing_state, verification_steps: params.verification_steps }, targetOrigin);
       } else {
         window.location.href = return_url;
       }
@@ -206,190 +139,127 @@ export function WebKYCEntry({
   }, [urlParams]);
 
   const handleComplete = useCallback(async (data: any) => {
-    console.log('KYC completed:', data);
-
-    // Check if still processing/analyzing
-    const isStillProcessing = data.isProcessing || data.session?.isProcessing;
+    console.log('KYC completed, raw state:', data);
+    const isStillProcessing = data?.isProcessing || data?.session?.isProcessing;
 
-    // Handle Push URL webhook if provided
     if (urlParams.push_url) {
       try {
-        const innerResult = data?.result?.result || data?.result || data;
-        const nestedDataMap = innerResult?.data;
-        
-        let kycSessionId = data?.session_id || urlParams.kyc_id || '';
-        let parsedKycData: any = null;
-
-        if (nestedDataMap) {
-          const mapKeys = Object.keys(nestedDataMap);
-          if (mapKeys.length > 0) {
-            const detectedSessionId = mapKeys.find(key => key.startsWith('kyc-')) || mapKeys[0];
-            if (detectedSessionId) {
-              kycSessionId = detectedSessionId;
-            }
-            
-            const rawData = nestedDataMap[kycSessionId]?.data;
-
-            if (typeof rawData === 'string') {
-              try {
-                parsedKycData = JSON.parse(rawData);
-              } catch (parseErr) {
-                console.warn('Failed parsing inner stringified JSON string:', parseErr);
-                parsedKycData = rawData;
-              }
-            } else {
-              parsedKycData = rawData;
-            }
+        // 1. Locate the actual backend payload from the Context state
+        const backendResult = data?.verification?.result || data?.result?.result || data?.result || data;
+
+        // 2. Safely extract session ID
+        const finalSessionId = 
+          data?.session?.session_id || 
+          backendResult?.session_id || 
+          backendResult?.data?.session_id || 
+          urlParams.kyc_id || 
+          'unknown';
+
+        // 3. Extract the core data payload
+        let parsedKycData: any = {};
+        if (backendResult?.data) {
+          try {
+            parsedKycData = typeof backendResult.data === 'string' 
+              ? JSON.parse(backendResult.data) 
+              : backendResult.data;
+          } catch (e) {
+            console.warn("Could not parse backendResult.data JSON");
           }
         }
 
-        const finalSessionId = kycSessionId || parsedKycData?.session_id || urlParams.kyc_id || 'unknown';
+        if (parsedKycData && typeof parsedKycData === 'object' && parsedKycData[finalSessionId]) {
+          const nested = parsedKycData[finalSessionId];
+          if (nested?.data) {
+            parsedKycData = typeof nested.data === 'string' ? JSON.parse(nested.data) : nested.data;
+          } else {
+            parsedKycData = nested;
+          }
+        }
 
-        // 3. Build your exact un-nested payload signature
         const verificationState = {
           session_id: finalSessionId,
-          status: 'success',
-          message: innerResult?.message || 'Verification data retrieved successfully.',
+          reference_id: urlParams.reference_id || backendResult?.referenceId || null,
+          status: backendResult?.status || data?.verification?.status || 'completed',
+          message: backendResult?.message || backendResult?.reason || backendResult?.issues?.[0] || 'Verification finished.',
           data: parsedKycData || {}
         };
 
-        await postWebhook(urlParams.push_url, verificationState, 5000);
-        console.log('Successfully pushed beautifully clean KYC data payload to webhook');
+        const hasValidSessionId = finalSessionId && finalSessionId !== 'unknown';
+        const hasValidData = parsedKycData && Object.keys(parsedKycData).length > 0;
+
+        if (!hasValidSessionId || !hasValidData) {
+          console.log("Webhook Blocked: Payload contains no data or session_id is unknown.", JSON.stringify(verificationState));
+        } else {
+          console.log("Pushing Webhook Payload:", JSON.stringify(verificationState, null, 2));
+          await postWebhook(urlParams.push_url, verificationState, 5000);
+        }
+
       } catch (err) {
-        console.warn('Failed to push data to webhook URL:', err);
+        console.warn('Failed to construct or push data to webhook URL:', err);
       }
     }
 
+    setIsAnalyzing(false);
+    
+    // Always redirect the user back to your main app/website, regardless of webhook success/block
     redirectToReturnUrl({
-      status: 'completed',
-      kyc_id: data.session_id || urlParams.kyc_id,
-      message: 'KYC process completed successfully',
+      status: data?.verification?.status === 'failed' ? 'error' : 'completed',
+      kyc_id: data?.session?.session_id || urlParams.kyc_id,
+      message: 'KYC process concluded',
       processing_state: isStillProcessing ? 'analyzing' : 'completed',
       verification_steps: {
-        document_analyzed: data.documentAnalysisComplete || false,
-        selfie_analyzed: data.selfieAnalysisComplete || false,
-        liveness_checked: data.livenessCheckComplete || false,
+        document_analyzed: true,
+        selfie_analyzed: true,
+        liveness_checked: true
       },
     });
-
+    
     onComplete?.(data);
   }, [redirectToReturnUrl, urlParams, onComplete]);
 
-  // Handle KYC error
   const handleError = useCallback((error: string) => {
     console.error('KYC error:', error);
     setIsAnalyzing(false);
-    redirectToReturnUrl({
-      status: 'error',
-      kyc_id: urlParams.kyc_id,
-      message: error,
-      processing_state: 'pending',
-    });
+    redirectToReturnUrl({ status: 'error', kyc_id: urlParams.kyc_id, message: error, processing_state: 'pending' });
     onError?.(error);
   }, [redirectToReturnUrl, urlParams.kyc_id, onError]);
 
-  // Handle KYC cancellation
   const handleCancel = useCallback(async () => {
-    console.log('KYC cancelled', urlParams.push_url, urlParams);
     setIsAnalyzing(false);
     if (urlParams.push_url) {
       try {
-        const verificationState = {
-          status: 'cancelled', // verification cancelled
-          result: null, // pass null as result
-          reference_id: urlParams.reference_id,
-        };
-        await postWebhook(urlParams.push_url, verificationState, 5000);
-        console.log('Successfully pushed KYC cancellation data to webhook');
-      } catch (err) {
-        // Fail open - redirect anyway even if webhook fails
-        console.warn('Failed to push data to webhook URL:', err);
-      }
+        await postWebhook(urlParams.push_url, { status: 'cancelled', result: null, reference_id: urlParams.reference_id }, 5000);
+      } catch (err) { console.warn('Failed to push data to webhook URL:', err); }
     }
-    redirectToReturnUrl({
-      status: 'cancelled',
-      kyc_id: urlParams.kyc_id,
-      message: 'KYC process was cancelled',
-      processing_state: 'pending',
-    });
+    redirectToReturnUrl({ status: 'cancelled', kyc_id: urlParams.kyc_id, message: 'KYC process was cancelled', processing_state: 'pending' });
     onCancel?.();
   }, [redirectToReturnUrl, urlParams.kyc_id, urlParams.push_url, urlParams.reference_id, onCancel]);
 
   const handleSessionSave = useCallback(async (sessionId: string) => {
-    console.log('KYC session created:', sessionId);
-
     if (urlParams.save_session_url) {
       try {
-        const payload = {
-          status: 'session_created',
-          reference_id: urlParams.reference_id,
-          result: {
-            session_id: sessionId,
-            kyc_id: sessionId,
-          },
-        };
-        await postWebhook(urlParams.save_session_url, payload, 5000);
-        console.log('Successfully pushed session data to save_session_url');
-      } catch (err) {
-        // Fail open - do not block the KYC flow if save_session webhook fails
-        console.warn('Failed to push session data to save_session_url:', err);
-      }
-    } else {
-      console.warn('save_session_url is missing in URL params, webhook not called');
+        await postWebhook(urlParams.save_session_url, { status: 'session_created', reference_id: urlParams.reference_id, result: { session_id: sessionId, kyc_id: sessionId } }, 5000);
+      } catch (err) { console.warn('Failed to push session data:', err); }
     }
-
     onSessionSave?.(sessionId);
   }, [urlParams.save_session_url, urlParams.reference_id, onSessionSave]);
 
-  // Initialize component
   useEffect(() => {
     try {
       const params = parseUrlParams();
-
       setUrlParams(params);
-
-      // Set language if provided
-      if (params.lang) {
-        setLocale(params.lang);
-      }
-
-      // Configure backend environment
-      if (params.server_env) {
-        KYCConfig.setBackendEnvironment(params.server_env);
-      }
-
+      if (params.lang) setLocale(params.lang);
+      if (params.server_env) KYCConfig.setBackendEnvironment(params.server_env);
       setIsLoading(false);
     } catch (error) {
-      console.error('Error parsing URL parameters:', error);
       setError('Error parsing URL parameters');
       setIsLoading(false);
     }
   }, [parseUrlParams, setLocale]);
 
-
-  if (isLoading) {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.loadingText}>Loading KYC process...</Text>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.errorText}>Error: {error}</Text>
-      </View>
-    );
-  }
-
-  if (!urlParams.token) {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.errorText}>No token provided in URL parameters</Text>
-      </View>
-    );
-  }
+  if (isLoading) return <View style={styles.container}><Text style={styles.loadingText}>Loading KYC process...</Text></View>;
+  if (error) return <View style={styles.container}><Text style={styles.errorText}>Error: {error}</Text></View>;
+  if (!urlParams.token) return <View style={styles.container}><Text style={styles.errorText}>No token provided in URL parameters</Text></View>;
 
   return (
     <SafeAreaView style={styles.container}>
@@ -411,7 +281,7 @@ export function WebKYCEntry({
         templateId={urlParams.template_id}
         env={urlParams.env || 'PRODUCTION'}
         serverEnv={urlParams.server_env}
-        existingSessionId={urlParams.kyc_id}
+        existingSessionId={urlParams.kyc_id} // Successfully passes session_id down
         initialComponentIndex={(() => {
           const raw = urlParams.component_index ?? urlParams.step;
           if (raw == null || raw === '') return undefined;
@@ -424,62 +294,16 @@ export function WebKYCEntry({
       />
     </SafeAreaView>
   );
-};
+}
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-    overflow: 'visible' as any, // Allow scrolling on web
-  },
-  loadingText: {
-    fontSize: 18,
-    textAlign: 'center',
-    marginTop: 50,
-    color: '#666',
-  },
-  errorText: {
-    fontSize: 16,
-    textAlign: 'center',
-    marginTop: 50,
-    color: '#dc2626',
-    paddingHorizontal: 20,
-  },
-  analyzingOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 9999,
-  },
-  analyzingContainer: {
-    backgroundColor: 'white',
-    borderRadius: 12,
-    padding: 32,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-  analyzingText: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-    marginTop: 16,
-    textAlign: 'center',
-  },
-  analyzingSubtext: {
-    fontSize: 14,
-    color: '#666',
-    marginTop: 8,
-    textAlign: 'center',
-  },
+  container: { flex: 1, backgroundColor: '#f5f5f5', overflow: 'visible' as any },
+  loadingText: { fontSize: 18, textAlign: 'center', marginTop: 50, color: '#666' },
+  errorText: { fontSize: 16, textAlign: 'center', marginTop: 50, color: '#dc2626', paddingHorizontal: 20 },
+  analyzingOverlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
+  analyzingContainer: { backgroundColor: 'white', borderRadius: 12, padding: 32, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 8, elevation: 8 },
+  analyzingText: { fontSize: 18, fontWeight: '600', color: '#333', marginTop: 16, textAlign: 'center' },
+  analyzingSubtext: { fontSize: 14, color: '#666', marginTop: 8, textAlign: 'center' },
 });
 
 export default WebKYCEntry;