@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/src/components/example/DynamicTemplateExample.tsx

@@ -0,0 +1,289 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateKYCFlow } from '../TemplateKYCFlowRefactored';
+import { VerificationState } from '../../types/KYC.types';
+
+/**
+ * Example component demonstrating how to use dynamic template loading
+ * 
+ * This example shows two ways to use templates:
+ * 1. With templateId - loads template dynamically from backend API
+ * 2. With direct template object - uses hardcoded template (backward compatibility)
+ */
+export const DynamicTemplateExample: React.FC = () => {
+  const [templateId, setTemplateId] = useState<string>('');
+  const [apiKey, setApiKey] = useState<string>('');
+  const [showFlow, setShowFlow] = useState<boolean>(false);
+  const [language, setLanguage] = useState<'en' | 'fr'>('en');
+
+  const handleComplete = (data: VerificationState) => {
+    console.log('KYC Verification completed:', data);
+    setShowFlow(false);
+    alert('Verification completed successfully!');
+  };
+
+  const handleError = (error: string) => {
+    console.error('KYC Error:', error);
+    alert(`Error: ${error}`);
+    setShowFlow(false);
+  };
+
+  const handleCancel = () => {
+    console.log('KYC Flow cancelled');
+    setShowFlow(false);
+  };
+
+  const startFlow = () => {
+    if (!templateId.trim()) {
+      alert('Please enter a template ID');
+      return;
+    }
+    setShowFlow(true);
+  };
+
+  if (showFlow) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <TemplateKYCFlow
+          templateId={templateId}
+          API_KEY={apiKey || undefined}
+          language={language}
+          onComplete={handleComplete}
+          onError={handleError}
+          onCancel={handleCancel}
+        />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Dynamic Template KYC Example</Text>
+        <Text style={styles.subtitle}>
+          Load a KYC template dynamically from the backend API
+        </Text>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Template ID *</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="e.g., free-style"
+            value={templateId}
+            onChangeText={setTemplateId}
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+          <Text style={styles.hint}>
+            Enter the template ID to load from the backend API
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>API Key (Optional)</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Your API key"
+            value={apiKey}
+            onChangeText={setApiKey}
+            autoCapitalize="none"
+            autoCorrect={false}
+            secureTextEntry
+          />
+          <Text style={styles.hint}>
+            If not provided, the SDK will use token-based authentication
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Language</Text>
+          <View style={styles.languageContainer}>
+            <TouchableOpacity
+              style={[
+                styles.languageButton,
+                language === 'en' && styles.languageButtonActive,
+              ]}
+              onPress={() => setLanguage('en')}
+            >
+              <Text
+                style={[
+                  styles.languageButtonText,
+                  language === 'en' && styles.languageButtonTextActive,
+                ]}
+              >
+                English
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.languageButton,
+                language === 'fr' && styles.languageButtonActive,
+              ]}
+              onPress={() => setLanguage('fr')}
+            >
+              <Text
+                style={[
+                  styles.languageButtonText,
+                  language === 'fr' && styles.languageButtonTextActive,
+                ]}
+              >
+                Français
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.button, !templateId.trim() && styles.buttonDisabled]}
+          onPress={startFlow}
+          disabled={!templateId.trim()}
+        >
+          <Text style={styles.buttonText}>Start KYC Verification</Text>
+        </TouchableOpacity>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Usage Example:</Text>
+          <Text style={styles.code}>
+            {`<TemplateKYCFlow
+  templateId="free-style"
+  API_KEY="your-api-key"
+  language="fr"
+  onComplete={handleComplete}
+  onError={handleError}
+  onCancel={handleCancel}
+/>`}
+          </Text>
+        </View>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Notes:</Text>
+          <Text style={styles.infoText}>
+            • Template ID is required to load from backend{'\n'}
+            • API Key is optional but recommended for production{'\n'}
+            • The SDK will automatically transform the backend template format to SDK format{'\n'}
+            • Templates are cached for 5 minutes to improve performance{'\n'}
+            • You can also use a direct template object for backward compatibility
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+  section: {
+    marginBottom: 24,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  input: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    color: '#333',
+  },
+  hint: {
+    fontSize: 12,
+    color: '#999',
+    marginTop: 4,
+  },
+  languageContainer: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  languageButton: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  languageButtonActive: {
+    backgroundColor: '#2DBD60',
+    borderColor: '#2DBD60',
+  },
+  languageButtonText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '500',
+  },
+  languageButtonTextActive: {
+    color: 'white',
+    fontWeight: '600',
+  },
+  button: {
+    backgroundColor: '#2DBD60',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 8,
+    marginBottom: 32,
+  },
+  buttonDisabled: {
+    backgroundColor: '#ccc',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  infoSection: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontSize: 12,
+    color: '#555',
+    backgroundColor: '#f5f5f5',
+    padding: 12,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+  },
+});

package/src/config/allowedDomains.ts

@@ -0,0 +1,152 @@
+/**
+ * Allowed domains configuration for callback URL validation
+ * These domains are permitted to receive KYC completion callbacks
+ */
+
+export interface AllowedDomainConfig {
+  domains: string[];
+  enforceHttps: boolean;
+  allowLocalhost: boolean;
+}
+
+// Default configuration - can be overridden via environment variables
+const DEFAULT_CONFIG: AllowedDomainConfig = {
+  domains: [
+    'transfergratis.com',
+    'www.transfergratis.com',
+    'admin.transfergratis.com',
+    'dashboard.transfergratis.com',
+    // Add other trusted domains here
+  ],
+  enforceHttps: true,
+  allowLocalhost: true, // Allow localhost for development
+};
+
+/**
+ * Get allowed domains from environment or use defaults
+ */
+export const getAllowedDomainsConfig = (): AllowedDomainConfig => {
+  // Check for environment variable override
+  if (typeof window !== 'undefined' && (window as any).KYC_ALLOWED_DOMAINS) {
+    const envDomains = (window as any).KYC_ALLOWED_DOMAINS;
+    if (Array.isArray(envDomains)) {
+      return {
+        ...DEFAULT_CONFIG,
+        domains: envDomains,
+      };
+    }
+  }
+
+  return DEFAULT_CONFIG;
+};
+
+/**
+ * Check if a domain is in the allowed list
+ */
+export const isDomainAllowed = (domain: string): boolean => {
+  const config = getAllowedDomainsConfig();
+  
+  // Allow localhost in development
+  if (config.allowLocalhost && (domain === 'localhost' || domain.startsWith('127.0.0.1'))) {
+    return true;
+  }
+
+  // Check if domain matches any in the allowed list
+  return config.domains.some(allowedDomain => {
+    // Exact match
+    if (domain === allowedDomain) {
+      return true;
+    }
+    
+    // Subdomain match (e.g., app.transfergratis.com matches transfergratis.com)
+    if (domain.endsWith('.' + allowedDomain)) {
+      return true;
+    }
+    
+    return false;
+  });
+};
+
+/**
+ * Validate if a URL is allowed for callback
+ */
+export const isCallbackUrlAllowed = (url: string): { allowed: boolean; reason?: string } => {
+  const config = getAllowedDomainsConfig();
+
+  try {
+    const urlObj = new URL(url);
+
+    // Check protocol
+    if (config.enforceHttps && urlObj.protocol !== 'https:') {
+      // Allow http for localhost in development
+      if (!(config.allowLocalhost && (urlObj.hostname === 'localhost' || urlObj.hostname.startsWith('127.0.0.1')))) {
+        return {
+          allowed: false,
+          reason: 'HTTPS required for callback URLs',
+        };
+      }
+    }
+
+    // Check domain
+    if (!isDomainAllowed(urlObj.hostname)) {
+      return {
+        allowed: false,
+        reason: `Domain '${urlObj.hostname}' is not in the allowed list`,
+      };
+    }
+
+    return { allowed: true };
+  } catch (error) {
+    return {
+      allowed: false,
+      reason: 'Invalid URL format',
+    };
+  }
+};
+
+/**
+ * Generate a signature for the callback URL parameters
+ * This can be used to verify the integrity of the callback
+ */
+export const generateCallbackSignature = async (
+  params: Record<string, string>,
+  secret?: string
+): Promise<string> => {
+  // Only generate signature if secret is provided
+  if (!secret) {
+    return '';
+  }
+
+  // Sort params for consistent signature
+  const sortedParams = Object.keys(params)
+    .sort()
+    .map(key => `${key}=${params[key]}`)
+    .join('&');
+
+  const data = `${sortedParams}:${secret}`;
+
+  // Use Web Crypto API for signature generation
+  if (typeof window !== 'undefined' && window.crypto && window.crypto.subtle) {
+    try {
+      const encoder = new TextEncoder();
+      const dataBuffer = encoder.encode(data);
+      const hashBuffer = await window.crypto.subtle.digest('SHA-256', dataBuffer);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+      return hashHex;
+    } catch (error) {
+      console.error('Error generating signature:', error);
+      return '';
+    }
+  }
+
+  // Fallback: simple hash for environments without Web Crypto API
+  let hash = 0;
+  for (let i = 0; i < data.length; i++) {
+    const char = data.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(16);
+};
+