@sanctum-key/react-native-sdk 1.0.0

package/src/web/WebKYCEntry.tsx

@@ -0,0 +1,375 @@
+import React, { useEffect, useState, useCallback } 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';
+import KYCConfig from '../config/KYCConfig';
+import { BackendEnvironment } from '../types/env.types';
+
+interface WebKYCEntryProps {
+  onComplete?: (data: any) => void;
+  onError?: (error: string) => void;
+  onCancel?: () => void;
+}
+
+interface URLParams {
+  token?: string;
+  return_url?: string;
+  push_url?: string;
+  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
+}
+
+interface VerificationSteps {
+  document_analyzed?: boolean;
+  selfie_analyzed?: boolean;
+  liveness_checked?: boolean;
+}
+
+const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
+  onComplete,
+  onError,
+  onCancel,
+}) => {
+  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 serverEnvParam = urlParams.get('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,
+      lang: urlParams.get('lang') || 'en',
+      theme: urlParams.get('theme') || 'light',
+      kyc_id: urlParams.get('kyc_id') || undefined,
+      secret: urlParams.get('secret') || undefined,
+      env: validEnv,
+      template_id: urlParams.get('template_id') || undefined,
+      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,
+    };
+  }, []);
+
+  // 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 { return_url } = urlParams;
+
+    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);
+      } else {
+        window.location.href = return_url;
+      }
+    } catch (error) {
+      console.error('Error during redirect:', error);
+      setError('Failed to redirect to callback URL');
+    }
+  }, [urlParams]);
+
+  // Handle KYC completion
+  const handleComplete = useCallback(async (data: any) => {
+    console.log('KYC completed:', data);
+
+    // Check if still processing/analyzing
+    const isStillProcessing = data.isProcessing || data.session?.isProcessing;
+
+    // Handle Push URL webhook if provided
+    if (urlParams.push_url) {
+      try {
+        const verificationState = {
+          status: 'success', // verification completed successfully
+          result: data, // pass complete data object as result
+        };
+
+        // Send data to provided push_url with a timeout
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
+
+        await fetch(urlParams.push_url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(verificationState),
+          signal: controller.signal,
+        });
+
+        clearTimeout(timeoutId);
+        console.log('Successfully pushed KYC data to webhook');
+      } catch (err) {
+        // Fail open - redirect anyway even if webhook fails
+        console.warn('Failed to push data to webhook URL:', err);
+      }
+    }
+
+    redirectToReturnUrl({
+      status: 'completed',
+      kyc_id: data.session_id || urlParams.kyc_id,
+      message: 'KYC process completed successfully',
+      processing_state: isStillProcessing ? 'analyzing' : 'completed',
+      verification_steps: {
+        document_analyzed: data.documentAnalysisComplete || false,
+        selfie_analyzed: data.selfieAnalysisComplete || false,
+        liveness_checked: data.livenessCheckComplete || false,
+      },
+    });
+    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',
+    });
+    onError?.(error);
+  }, [redirectToReturnUrl, urlParams.kyc_id, onError]);
+
+  // Handle KYC cancellation
+  const handleCancel = useCallback(() => {
+    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
+        };
+
+        // Send data to provided push_url with a timeout
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
+
+        fetch(urlParams.push_url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(verificationState),
+          signal: controller.signal,
+        });
+
+        clearTimeout(timeoutId);
+        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);
+      }
+    }
+    redirectToReturnUrl({
+      status: 'cancelled',
+      kyc_id: urlParams.kyc_id,
+      message: 'KYC process was cancelled',
+      processing_state: 'pending',
+    });
+    onCancel?.();
+  }, [redirectToReturnUrl, urlParams.kyc_id, onCancel]);
+
+  // 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);
+      }
+
+      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>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      {isAnalyzing && (
+        <View style={styles.analyzingOverlay}>
+          <View style={styles.analyzingContainer}>
+            <ActivityIndicator size="large" color="#2DBD60" />
+            <Text style={styles.analyzingText}>Analyzing verification data...</Text>
+            <Text style={styles.analyzingSubtext}>This may take a few moments</Text>
+          </View>
+        </View>
+      )}
+      <TemplateKYCExample
+        onComplete={handleComplete}
+        onCancel={handleCancel}
+        onError={handleError}
+        language={urlParams.lang || 'en'}
+        API_KEY={urlParams.token}
+        templateId={urlParams.template_id}
+        env={urlParams.env || 'PRODUCTION'}
+        serverEnv={urlParams.server_env}
+        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}
+      />
+    </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',
+  },
+});
+
+export default WebKYCEntry;

package/src/web/index.ts

@@ -0,0 +1 @@
+export { default as WebKYCEntry } from './WebKYCEntry';