@sanctum-key/react-native-sdk 1.0.53 → 1.0.56

package/src/web/WebKYCEntry.tsx

@@ -5,6 +5,7 @@ import { TemplateKYCExample } from '../components/TemplateKYCExample';
 import { isCallbackUrlAllowed } from '../config/allowedDomains';
 import KYCConfig from '../config/KYCConfig';
 import { BackendEnvironment } from '../types/env.types';
+import CryptoJS from 'crypto-js'; // 🚨 IMPORT ADDED
 
 interface WebKYCEntryProps {
   onComplete?: (data: any) => void;
@@ -31,8 +32,7 @@ interface URLParams {
   country?: string;
   document_type?: string;
   region?: string;
-  // 🚨 NEW: Added explicitly for the mobile handoff
-  session_id?: string; 
+  session_id?: string;
   resume?: boolean;
 }
 
@@ -42,8 +42,21 @@ interface VerificationSteps {
   liveness_checked?: boolean;
 }
 
-const postWebhook = async (url: string, payload: unknown, timeoutMs: number = 5000) => {
+// 🚨 MODIFIED: Accepts the webhook secret to generate the signature
+const postWebhook = async (url: string, payload: unknown, secret?: string, timeoutMs: number = 5000) => {
   const body = JSON.stringify(payload);
+  
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // 🚨 Generate HMAC SHA-256 Signature if secret is provided
+  if (secret) {
+    const signature = CryptoJS.HmacSHA256(body, secret).toString(CryptoJS.enc.Hex);
+    headers['x-sanctumkey-signature'] = signature;
+    console.log("🔒 Generated Webhook Signature:", signature);
+  }
+
   const postWithTimeout = async (init: RequestInit) => {
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
@@ -56,17 +69,23 @@ const postWebhook = async (url: string, payload: unknown, timeoutMs: number = 50
 
   if (typeof window !== 'undefined') {
     try {
-      const response = await postWithTimeout({ headers: { 'Content-Type': 'application/json' }, body, keepalive: true });
+      const response = await postWithTimeout({ headers, body, keepalive: true });
       if (!response.ok) throw new Error(`Webhook failed with status ${response.status}`);
       return;
     } catch (error) {
       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 });
+      // Fallback for CORS issues, though signature headers might be stripped in 'no-cors' mode
+      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 });
+  const response = await postWithTimeout({ headers, body });
   if (!response.ok) throw new Error(`Webhook failed with status ${response.status}`);
 };
 
@@ -79,21 +98,19 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
 
   const parseUrlParams = useCallback((): URLParams => {
     if (typeof window === 'undefined') return {};
-
     const rawUrl = window.location.href;
     console.log("Raw URL intercepted:", rawUrl);
     
     const paramsString = rawUrl.replace(/^[^?#]*[?#]/, '').replace(/[?#]/g, '&');
-
     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: getParam('token'),
       return_url: getParam('return_url'),
@@ -102,7 +119,7 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
       reference_id: getParam('reference_id'),
       lang: getParam('lang') || 'en',
       theme: getParam('theme') || 'light',
-      kyc_id: getParam('kyc_id') || getParam('session_id'), 
+      kyc_id: getParam('kyc_id') || getParam('session_id'),
       secret: getParam('secret'),
       env: validEnv,
       template_id: getParam('template_id'),
@@ -116,9 +133,19 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
     };
   }, []);
 
-  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 {
       const validation = isCallbackUrlAllowed(return_url);
       if (!validation.allowed) {
@@ -126,9 +153,17 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
         setError(`Security Error: ${validation.reason}`);
         return;
       }
+
       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;
       }
@@ -144,29 +179,18 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
 
     if (urlParams.push_url) {
       try {
-        // 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
+        const finalSessionId = data?.session?.session_id || backendResult?.session_id || backendResult?.data?.session_id || urlParams.kyc_id || 'unknown';
+        
         let parsedKycData: any = {};
         if (backendResult?.data) {
           try {
-            parsedKycData = typeof backendResult.data === 'string' 
-              ? JSON.parse(backendResult.data) 
-              : backendResult.data;
+            parsedKycData = typeof backendResult.data === 'string' ? JSON.parse(backendResult.data) : backendResult.data;
           } catch (e) {
             console.warn("Could not parse backendResult.data JSON");
           }
         }
-
+        
         if (parsedKycData && typeof parsedKycData === 'object' && parsedKycData[finalSessionId]) {
           const nested = parsedKycData[finalSessionId];
           if (nested?.data) {
@@ -188,32 +212,24 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
         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));
+          console.log("Webhook Blocked: Payload contains no data or session_id is unknown.");
         } else {
-          console.log("Pushing Webhook Payload:", JSON.stringify(verificationState, null, 2));
-          await postWebhook(urlParams.push_url, verificationState, 5000);
+          // 🚨 MODIFIED: Passing urlParams.secret
+          await postWebhook(urlParams.push_url, verificationState, urlParams.secret, 5000);
         }
-
       } catch (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: 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: true,
-        selfie_analyzed: true,
-        liveness_checked: true
-      },
+      verification_steps: { document_analyzed: true, selfie_analyzed: true, liveness_checked: true },
     });
-    
     onComplete?.(data);
   }, [redirectToReturnUrl, urlParams, onComplete]);
 
@@ -228,21 +244,38 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
     setIsAnalyzing(false);
     if (urlParams.push_url) {
       try {
-        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); }
+        // 🚨 MODIFIED: Passing urlParams.secret
+        await postWebhook(
+            urlParams.push_url, 
+            { status: 'cancelled', result: null, reference_id: urlParams.reference_id }, 
+            urlParams.secret, 
+            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' });
     onCancel?.();
-  }, [redirectToReturnUrl, urlParams.kyc_id, urlParams.push_url, urlParams.reference_id, onCancel]);
+  }, [redirectToReturnUrl, urlParams.kyc_id, urlParams.push_url, urlParams.reference_id, urlParams.secret, onCancel]);
 
   const handleSessionSave = useCallback(async (sessionId: string) => {
     if (urlParams.save_session_url) {
       try {
-        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); }
+        // 🚨 MODIFIED: Passing urlParams.secret
+        await postWebhook(
+            urlParams.save_session_url, 
+            { status: 'session_created', reference_id: urlParams.reference_id, result: { session_id: sessionId, kyc_id: sessionId } }, 
+            urlParams.secret, 
+            5000
+        );
+      } catch (err) {
+        console.warn('Failed to push session data:', err);
+      }
     }
     onSessionSave?.(sessionId);
-  }, [urlParams.save_session_url, urlParams.reference_id, onSessionSave]);
+  }, [urlParams.save_session_url, urlParams.reference_id, urlParams.secret, onSessionSave]);
 
   useEffect(() => {
     try {
@@ -272,7 +305,9 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
           </View>
         </View>
       )}
+      {/* Overlay UI unchanged */}
       <TemplateKYCExample
+        // ...Props unchanged...
         onComplete={handleComplete}
         onCancel={handleCancel}
         onError={handleError}
@@ -281,14 +316,18 @@ export function WebKYCEntry({ onComplete, onError, onCancel, onSessionSave }: We
         templateId={urlParams.template_id}
         env={urlParams.env || 'PRODUCTION'}
         serverEnv={urlParams.server_env}
-        existingSessionId={urlParams.kyc_id} // Successfully passes session_id down
+        existingSessionId={urlParams.kyc_id}
         initialComponentIndex={(() => {
           const raw = urlParams.component_index ?? urlParams.step;
           if (raw == null || raw === '') return undefined;
           const index = parseInt(raw, 10);
           return Number.isNaN(index) ? undefined : index;
         })()}
-        initialCountryResume={urlParams.country && urlParams.document_type ? { code: urlParams.country, documentType: urlParams.document_type, region: urlParams.region || undefined } : undefined}
+        initialCountryResume={urlParams.country && urlParams.document_type ? { 
+            code: urlParams.country, 
+            documentType: urlParams.document_type, 
+            region: urlParams.region || undefined 
+        } : undefined}
         referenceId={urlParams.reference_id}
         onSessionSave={handleSessionSave}
       />