import React, { useState, useRef } from 'react'; import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator, Alert, Platform, } from 'react-native'; import { WebView } from 'react-native-webview'; const TURNSTILE_SITE_KEY = '1x00000000000000000000AA'; export default function HumanVerificationScreen({ navigation }: any) { const [loading, setLoading] = useState(true); const [verifying, setVerifying] = useState(false); const [error, setError] = useState(null); const webViewRef = useRef(null); console.log('HumanVerificationScreen mounted'); const handleTurnstileToken = async (token: string) => { setVerifying(true); try { // Verify token with backend const response = await fetch('http://localhost:8001/api/verify-turnstile', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ token }), }); const result = await response.json(); if (result.success) { navigation.navigate('Auth'); } else { Alert.alert('Verification Failed', 'Please try again'); // Reload Turnstile webViewRef.current?.reload(); } } catch (error) { console.error('Verification error:', error); Alert.alert('Error', 'Verification failed. Please try again.'); } finally { setVerifying(false); } }; const handleMessage = (event: any) => { const data = JSON.parse(event.nativeEvent.data); if (data.type === 'turnstile-success') { handleTurnstileToken(data.token); } else if (data.type === 'turnstile-error') { Alert.alert('Error', 'Verification failed. Please try again.'); setLoading(false); } }; const turnstileHTML = `

🛡️

Human Verification

Please complete the security check to continue

`; return ( {verifying && ( Verifying... )} setLoading(false)} style={styles.webview} javaScriptEnabled={true} domStorageEnabled={true} /> {loading && ( )} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F8F9FA', }, webview: { flex: 1, backgroundColor: '#F8F9FA', }, loadingOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: '#F8F9FA', justifyContent: 'center', alignItems: 'center', }, overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 999, }, verifyingText: { marginTop: 16, fontSize: 16, fontWeight: '600', color: '#FFF', }, });