@onairos/react-native 3.1.12 → 3.1.14

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,838 +1,232 @@
-import React, { useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-  SafeAreaView,
-  Dimensions,
-  Linking,
-} from 'react-native';
-import { WebView } from 'react-native-webview';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS } from '../../constants';
-
-const { width, height } = Dimensions.get('window');
-
-export interface OAuthWebViewProps {
-  url: string;
-  onClose: () => void;
-  onSuccess: (code: string) => void;
-  platform?: string;
-  onComplete?: () => void;
-}
-
-export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
-  url,
-  onClose,
-  onSuccess,
-  platform = 'platform',
-  onComplete,
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [errorMessage, setErrorMessage] = useState<string>('');
-  const [isRetryable, setIsRetryable] = useState(true);
-  const [retryCount, setRetryCount] = useState(0);
-  const webViewRef = useRef<WebView>(null);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  
-  console.log('🌐 Opening OAuth WebView with URL:', url);
-  console.log('🔗 Platform:', platform);
-  console.log('📱 URL Components:', {
-    protocol: url.split('://')[0],
-    domain: url.split('://')[1]?.split('/')[0],
-    path: url.split('://')[1]?.split('/').slice(1).join('/'),
-  });
-
-  // Set up timeout for OAuth flow
-  React.useEffect(() => {
-    // Clear any existing timeout
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    
-    // Set a 60-second timeout for OAuth completion
-    timeoutRef.current = setTimeout(() => {
-      console.log('OAuth flow timeout - no completion detected');
-      setError('OAuth flow is taking too long. Please try again or use the browser option.');
-      setIsLoading(false);
-    }, 60000);
-    
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, [url]);
-
-  // Clear timeout when component unmounts or OAuth completes
-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  const onNavigationStateChange = (navState: any) => {
-    const currentUrl = navState.url;
-    console.log('🌐 Navigation state changed:', {
-      url: currentUrl,
-      canGoBack: navState.canGoBack,
-      canGoForward: navState.canGoForward,
-      loading: navState.loading,
-      title: navState.title,
-    });
-
-    // Don't process if still loading
-    if (navState.loading) {
-      return;
-    }
-
-    // Check if this URL indicates OAuth completion
-    if (isOAuthComplete(currentUrl)) {
-      console.log('🎉 OAuth completion detected!');
-      
-      // Extract the result
-      const result = extractOAuthResult(currentUrl);
-      
-      if (result.success) {
-        console.log('✅ OAuth completed successfully:', result);
-        
-        // Clear timeout
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-        
-        // Call success callback
-        if (onSuccess && result.code) {
-          onSuccess(result.code);
-        }
-        
-        // Close the WebView
-        if (onComplete) {
-          onComplete();
-        }
-      } else {
-        console.error('❌ OAuth failed:', result.error);
-        
-        // Clear timeout
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-        
-        // Set error state
-        setError('OAuth authentication failed');
-        setErrorMessage(result.error || 'Authentication failed');
-        setIsRetryable(true);
-      }
-    }
-    
-    // Additional check for Gmail specific patterns
-    if (platform === 'email' || platform === 'gmail') {
-      const gmailPatterns = [
-        'onairos.uk/Home',
-        'onairos.uk/home',
-        'https://onairos.uk/Home',
-        'https://onairos.uk/home',
-      ];
-      
-      for (const pattern of gmailPatterns) {
-        if (currentUrl.includes(pattern)) {
-          console.log('✅ Gmail OAuth success detected via home page redirect');
-          
-          // Clear timeout
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-          }
-          
-          // Call success callback with Gmail-specific code
-          if (onSuccess) {
-            onSuccess('gmail_success');
-          }
-          
-          // Close the WebView
-          if (onComplete) {
-            onComplete();
-          }
-          
-          return;
-        }
-      }
-    }
-    
-    // Check for error URLs
-    const errorPatterns = [
-      'error=',
-      'error_description=',
-      'access_denied',
-      'user_cancelled',
-      'cancelled',
-      'denied',
-    ];
-    
-    for (const pattern of errorPatterns) {
-      if (currentUrl.includes(pattern)) {
-        console.log('❌ OAuth error detected in URL:', pattern);
-        
-        // Clear timeout
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          timeoutRef.current = null;
-        }
-        
-        // Parse error details
-        try {
-          const urlObj = new URL(currentUrl);
-          const params = new URLSearchParams(urlObj.search);
-          const errorDescription = params.get('error_description') || params.get('error') || 'Authentication failed';
-          
-          setError('OAuth authentication failed');
-          setErrorMessage(errorDescription);
-          setIsRetryable(true);
-        } catch (parseError) {
-          setError('OAuth authentication failed');
-          setErrorMessage('Authentication failed');
-          setIsRetryable(true);
-        }
-        
-        return;
-      }
-    }
-  };
-
-  const handleLoadEnd = () => {
-    setIsLoading(false);
-    setError(null);
-    setErrorMessage('');
-  };
-
-  const handleError = (syntheticEvent: any) => {
-    const { nativeEvent } = syntheticEvent;
-    console.error('🚨 WebView error details:', {
-      description: nativeEvent.description,
-      code: nativeEvent.code,
-      domain: nativeEvent.domain,
-      url: nativeEvent.url,
-      canGoBack: nativeEvent.canGoBack,
-      canGoForward: nativeEvent.canGoForward,
-      loading: nativeEvent.loading,
-      target: nativeEvent.target,
-      title: nativeEvent.title,
-    });
-    
-    // Check for specific NSURLErrorDomain codes
-    let errorMessage = 'Failed to load OAuth page.';
-    let isRetryable = true;
-    
-    if (nativeEvent.domain === 'NSURLErrorDomain') {
-      switch (nativeEvent.code) {
-        case -1009: // NSURLErrorNotConnectedToInternet
-          errorMessage = 'No internet connection. Please check your network and try again.';
-          isRetryable = true;
-          break;
-        case -1003: // NSURLErrorCannotFindHost
-          errorMessage = 'Cannot reach authentication server. Please check your internet connection.';
-          isRetryable = true;
-          break;
-        case -1001: // NSURLErrorTimedOut
-          errorMessage = 'Connection timed out. Please try again.';
-          isRetryable = true;
-          break;
-        case -1200: // NSURLErrorSecureConnectionFailed
-          errorMessage = 'Secure connection failed. Please try again.';
-          isRetryable = true;
-          break;
-        case -1022: // NSURLErrorAppTransportSecurityRequiresSecureConnection
-          errorMessage = 'App Transport Security error. Connection must be secure.';
-          isRetryable = false;
-          break;
-        case -1004: // NSURLErrorCannotConnectToHost
-          errorMessage = 'Cannot connect to authentication server. Please try again later.';
-          isRetryable = true;
-          break;
-        case -1005: // NSURLErrorNetworkConnectionLost
-          errorMessage = 'Network connection lost. Please check your connection and try again.';
-          isRetryable = true;
-          break;
-        case -1020: // NSURLErrorDataNotAllowed
-          errorMessage = 'Data not allowed. Please check your cellular data settings.';
-          isRetryable = true;
-          break;
-        default:
-          errorMessage = `Network error (${nativeEvent.code}): ${nativeEvent.description || 'Please check your connection and try again.'}`;
-          isRetryable = true;
-      }
-    } else if (nativeEvent.domain === 'WebKitErrorDomain') {
-      switch (nativeEvent.code) {
-        case 102: // WebKitErrorFrameLoadInterruptedByPolicyChange
-          errorMessage = 'Page load was interrupted. Please try again.';
-          isRetryable = true;
-          break;
-        case 204: // WebKitErrorPlugInLoadFailed
-          errorMessage = 'Plugin failed to load. Please try again.';
-          isRetryable = true;
-          break;
-        default:
-          errorMessage = `WebKit error (${nativeEvent.code}): ${nativeEvent.description || 'Please try again.'}`;
-          isRetryable = true;
-      }
-    }
-    
-    console.error('🔴 OAuth WebView Error:', errorMessage);
-    
-    // Implement smart retry logic
-    if (isRetryable && retryCount < 3) {
-      console.log(`🔄 Auto-retrying OAuth load (attempt ${retryCount + 1}/3) in 3 seconds...`);
-      setRetryCount(prev => prev + 1);
-      setIsLoading(true);
-      setError(null);
-      
-      // Retry after a delay with exponential backoff
-      const retryDelay = 3000 * Math.pow(2, retryCount); // 3s, 6s, 12s
-      setTimeout(() => {
-        if (webViewRef.current) {
-          console.log(`🔄 Attempting retry ${retryCount + 1}...`);
-          webViewRef.current.reload();
-        }
-      }, retryDelay);
-    } else {
-      setError(errorMessage);
-      setIsLoading(false);
-      
-      // Show additional help for persistent errors
-      if (retryCount >= 3) {
-        console.log('❌ Maximum retries reached, showing error to user');
-      }
-    }
-  };
-
-  const handleOpenInBrowser = () => {
-    console.log('Opening OAuth URL in external browser:', url);
-    Linking.openURL(url).catch(err => {
-      console.error('Failed to open URL in browser:', err);
-      setError('Unable to open browser. Please check your device settings.');
-    });
-  };
-
-  const handleRetry = () => {
-    console.log('Manual retry requested');
-    setError(null);
-    setErrorMessage('');
-    setIsRetryable(true);
-    setIsLoading(true);
-    setRetryCount(0);
-    
-    if (webViewRef.current) {
-      webViewRef.current.reload();
-    }
-  };
-
-  /**
-   * Get platform-specific icon
-   */
-  const getPlatformIcon = (platform: string): string => {
-    switch (platform) {
-      case 'instagram':
-        return 'photo-camera';
-      case 'youtube':
-        return 'smart-display';
-      case 'pinterest':
-        return 'push-pin';
-      case 'reddit':
-        return 'forum';
-      case 'email':
-        return 'email';
-      default:
-        return 'link';
-    }
-  };
-
-  /**
-   * Get platform-specific color
-   */
-  const getPlatformColor = (platform: string): string => {
-    switch (platform) {
-      case 'instagram':
-        return '#E1306C';
-      case 'youtube':
-        return '#FF0000';
-      case 'pinterest':
-        return '#E60023';
-      case 'reddit':
-        return '#FF4500';
-      case 'email':
-        return '#4285F4';
-      default:
-        return COLORS.primary;
-    }
-  };
-
-  // Check if URL indicates OAuth completion
-  const isOAuthComplete = (url: string): boolean => {
-    // Gmail OAuth completion patterns
-    const gmailSuccessPatterns = [
-      'https://onairos.uk/Home',
-      'https://onairos.uk/home',
-      'onairos.uk/Home',
-      'onairos.uk/home',
-      process.env.APP_HOME_URL,
-    ].filter(Boolean);
-    
-    // Check for success redirect patterns
-    for (const pattern of gmailSuccessPatterns) {
-      if (url.includes(pattern)) {
-        console.log('✅ OAuth success detected via redirect to:', pattern);
-        return true;
-      }
-    }
-    
-    // Check for traditional OAuth callback patterns (more specific)
-    // Only match actual query parameters, not just any occurrence in the URL
-    const callbackPatterns = [
-      'code=',
-      'access_token=',
-      'oauth_token=',
-      'authorization_code=',
-      'auth_code=',
-      'token=',
-    ];
-    
-    for (const pattern of callbackPatterns) {
-      if (url.includes(pattern)) {
-        console.log('✅ OAuth success detected via callback parameter:', pattern);
-        return true;
-      }
-    }
-    
-    // Check for specific callback URLs (more targeted than generic words)
-    const callbackUrlPatterns = [
-      '/callback',
-      '/oauth/callback',
-      '/auth/callback',
-      'redirect_uri',
-      'onairos.uk/callback',
-      'onairos.uk/oauth',
-    ];
-    
-    for (const pattern of callbackUrlPatterns) {
-      if (url.includes(pattern)) {
-        console.log('✅ OAuth success detected via callback URL pattern:', pattern);
-        return true;
-      }
-    }
-    
-    // Check for error patterns
-    const errorPatterns = [
-      'error=',
-      'error_description=',
-      'oauth_error=',
-      'auth_error=',
-      'access_denied',
-      'user_cancelled',
-      'cancelled',
-      'denied',
-    ];
-    
-    for (const pattern of errorPatterns) {
-      if (url.includes(pattern)) {
-        console.log('❌ OAuth error detected via pattern:', pattern);
-        return false;
-      }
-    }
-    
-    return false;
-  };
-
-  // Extract OAuth result from URL
-  const extractOAuthResult = (url: string): { success: boolean; code?: string; error?: string } => {
-    try {
-      const urlObj = new URL(url);
-      const params = new URLSearchParams(urlObj.search);
-      
-      // Check for error first
-      const error = params.get('error') || params.get('error_description') || params.get('oauth_error');
-      if (error) {
-        return { success: false, error };
-      }
-      
-      // Check for success indicators
-      const code = params.get('code') || params.get('authorization_code') || params.get('auth_code');
-      const accessToken = params.get('access_token') || params.get('oauth_token') || params.get('token');
-      
-      if (code || accessToken) {
-        return { success: true, code: code || accessToken };
-      }
-      
-      // Check for success redirect to home page (Gmail pattern)
-      const gmailSuccessPatterns = [
-        'https://onairos.uk/Home',
-        'https://onairos.uk/home',
-        'onairos.uk/Home',
-        'onairos.uk/home',
-      ];
-      
-      for (const pattern of gmailSuccessPatterns) {
-        if (url.includes(pattern)) {
-          console.log('✅ Gmail OAuth success detected via home page redirect');
-          return { success: true, code: 'gmail_home_redirect' };
-        }
-      }
-      
-      // If we reached here and isOAuthComplete returned true, assume success
-      if (isOAuthComplete(url)) {
-        return { success: true, code: 'oauth_complete' };
-      }
-      
-      return { success: false, error: 'OAuth completion not detected' };
-    } catch (error) {
-      console.error('Error parsing OAuth URL:', error);
-      return { success: false, error: 'Invalid OAuth callback URL' };
-    }
-  };
-
-  if (error) {
-    return (
-      <SafeAreaView style={styles.container}>
-        <View style={styles.header}>
-          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-            <Icon name="close" size={24} color="#000" />
-          </TouchableOpacity>
-          <View style={styles.titleContainer}>
-            <Icon 
-              name={getPlatformIcon(platform)} 
-              size={20} 
-              color={getPlatformColor(platform)} 
-            />
-            <Text style={styles.titleText}>{platform.charAt(0).toUpperCase() + platform.slice(1)} OAuth</Text>
-          </View>
-        </View>
-        
-        <View style={styles.errorContainer}>
-          <Icon name="error-outline" size={48} color="#FF6B6B" />
-          <Text style={styles.errorTitle}>Connection Error</Text>
-          <Text style={styles.errorMessage}>{errorMessage || error}</Text>
-          
-          {/* Help text based on error type */}
-          {error.includes('internet') || error.includes('network') ? (
-            <View style={styles.helpContainer}>
-              <Text style={styles.helpTitle}>💡 Troubleshooting Steps:</Text>
-              <Text style={styles.helpText}>• Check your Wi-Fi or cellular connection</Text>
-              <Text style={styles.helpText}>• Try switching between Wi-Fi and cellular</Text>
-              <Text style={styles.helpText}>• Ensure you're not using a VPN that blocks OAuth</Text>
-              <Text style={styles.helpText}>• Close other apps that might be using bandwidth</Text>
-            </View>
-          ) : error.includes('timeout') ? (
-            <View style={styles.helpContainer}>
-              <Text style={styles.helpTitle}>⏱️ Connection Timeout:</Text>
-              <Text style={styles.helpText}>• Your connection might be slow</Text>
-              <Text style={styles.helpText}>• Try again when you have a stronger signal</Text>
-              <Text style={styles.helpText}>• Use "Open in Browser" for better reliability</Text>
-            </View>
-          ) : error.includes('secure') || error.includes('SSL') ? (
-            <View style={styles.helpContainer}>
-              <Text style={styles.helpTitle}>🔒 Security Error:</Text>
-              <Text style={styles.helpText}>• Check your device's date and time settings</Text>
-              <Text style={styles.helpText}>• Update your device's operating system</Text>
-              <Text style={styles.helpText}>• Try "Open in Browser" as an alternative</Text>
-            </View>
-          ) : (
-            <View style={styles.helpContainer}>
-              <Text style={styles.helpTitle}>🔧 General Solutions:</Text>
-              <Text style={styles.helpText}>• Close and reopen the app</Text>
-              <Text style={styles.helpText}>• Check your internet connection</Text>
-              <Text style={styles.helpText}>• Use "Open in Browser" for better reliability</Text>
-            </View>
-          )}
-          
-          <View style={styles.buttonContainer}>
-            {isRetryable && (
-              <TouchableOpacity style={styles.retryButton} onPress={handleRetry}>
-                <Icon name="refresh" size={20} color="#fff" style={styles.buttonIcon} />
-                <Text style={styles.retryButtonText}>Retry</Text>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity style={styles.browserButton} onPress={handleOpenInBrowser}>
-              <Icon name="open-in-browser" size={20} color="#666" style={styles.buttonIcon} />
-              <Text style={styles.browserButtonText}>Open in Browser</Text>
-            </TouchableOpacity>
-          </View>
-          
-          {retryCount >= 3 && (
-            <View style={styles.persistentErrorContainer}>
-              <Text style={styles.persistentErrorText}>
-                Still having trouble? Try these steps:
-              </Text>
-              <Text style={styles.persistentErrorStep}>
-                1. Use "Open in Browser" for more reliable authentication
-              </Text>
-              <Text style={styles.persistentErrorStep}>
-                2. Check if other apps can access the internet
-              </Text>
-              <Text style={styles.persistentErrorStep}>
-                3. Restart your device if the problem persists
-              </Text>
-            </View>
-          )}
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.header}>
-        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
-          <Icon name="close" size={24} color="#000" />
-        </TouchableOpacity>
-        <View style={styles.titleContainer}>
-          <Icon 
-            name={getPlatformIcon(platform)} 
-            size={20} 
-            color={getPlatformColor(platform)} 
-          />
-          <Text style={styles.titleText}>{platform.charAt(0).toUpperCase() + platform.slice(1)} OAuth</Text>
-        </View>
-        <TouchableOpacity onPress={handleOpenInBrowser} style={styles.browserButton}>
-          <Icon name="open-in-browser" size={20} color="#666" />
-        </TouchableOpacity>
-      </View>
-
-      <WebView
-        ref={webViewRef}
-        source={{ uri: url }}
-        onNavigationStateChange={onNavigationStateChange}
-        onLoadEnd={handleLoadEnd}
-        onError={handleError}
-        onHttpError={(syntheticEvent) => {
-          const { nativeEvent } = syntheticEvent;
-          console.error('WebView HTTP error:', nativeEvent);
-          setError('Failed to load OAuth page. Please check your internet connection.');
-          setIsLoading(false);
-        }}
-        style={styles.webView}
-        javaScriptEnabled={true}
-        domStorageEnabled={true}
-        startInLoadingState={true}
-        scalesPageToFit={true}
-        allowsInlineMediaPlayback={true}
-        mediaPlaybackRequiresUserAction={false}
-        mixedContentMode="compatibility"
-        thirdPartyCookiesEnabled={true}
-        sharedCookiesEnabled={true}
-        cacheEnabled={true}
-        allowsBackForwardNavigationGestures={true}
-        allowsLinkPreview={false}
-        userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"
-        onShouldStartLoadWithRequest={(request) => {
-          console.log('WebView attempting to load:', request.url);
-          
-          // Block about:srcdoc and other problematic URLs
-          if (request.url.startsWith('about:') || 
-              request.url.startsWith('data:') ||
-              request.url === 'about:blank') {
-            console.log('Blocking problematic URL:', request.url);
-            return false;
-          }
-          
-          // Allow all other requests
-          return true;
-        }}
-        onLoadStart={(syntheticEvent) => {
-          const { nativeEvent } = syntheticEvent;
-          console.log('WebView load started:', nativeEvent.url);
-          setIsLoading(true);
-        }}
-        onLoadProgress={(syntheticEvent) => {
-          const { nativeEvent } = syntheticEvent;
-          console.log('WebView load progress:', nativeEvent.progress);
-        }}
-        renderError={(errorName) => (
-          <View style={styles.errorContainer}>
-            <Icon name="error-outline" size={48} color="#FF6B6B" />
-            <Text style={styles.errorTitle}>WebView Error</Text>
-            <Text style={styles.errorMessage}>
-              Failed to load the authentication page. Error: {errorName}
-            </Text>
-            <TouchableOpacity style={styles.retryButton} onPress={handleRetry}>
-              <Text style={styles.retryButtonText}>Retry</Text>
-            </TouchableOpacity>
-          </View>
-        )}
-        renderLoading={() => (
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color={COLORS.primary} />
-          <Text style={styles.loadingText}>Loading {platform}...</Text>
-        </View>
-      )}
-        injectedJavaScript={`
-          // Prevent white screen issues
-          window.addEventListener('error', function(e) {
-            console.log('JavaScript error:', e.message);
-          });
-          
-          // Handle OAuth redirects
-          window.addEventListener('beforeunload', function(e) {
-            console.log('Page unloading:', window.location.href);
-          });
-          
-          // Monitor for OAuth completion
-          setInterval(function() {
-            if (window.location.href.includes('code=') || 
-                window.location.href.includes('access_token=') ||
-                window.location.href.includes('oauth_token=') ||
-                window.location.href.includes('api2.onairos.uk')) {
-              console.log('OAuth completion detected:', window.location.href);
-            }
-          }, 1000);
-          
-          true; // Required for injected JavaScript
-        `}
-      />
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 56,
-    backgroundColor: '#f8f8f8',
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
-    paddingHorizontal: 16,
-  },
-  titleContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  titleText: {
-    marginLeft: 8,
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#000',
-  },
-  closeButton: {
-    padding: 8,
-    position: 'absolute',
-    left: 16,
-    zIndex: 10,
-  },
-  browserButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: '#666',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  webView: {
-    flex: 1,
-  },
-  loadingContainer: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  loadingText: {
-    marginTop: 10,
-    fontSize: 16,
-    color: '#666',
-  },
-  errorContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  errorTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  errorMessage: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 20,
-  },
-  retryButton: {
-    backgroundColor: COLORS.primary,
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    borderRadius: 8,
-    marginRight: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  retryButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 10,
-  },
-  browserButtonText: {
-    color: '#666',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  helpContainer: {
-    marginBottom: 20,
-  },
-  helpTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 8,
-  },
-  helpText: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-  },
-  buttonIcon: {
-    marginRight: 10,
-  },
-  persistentErrorContainer: {
-    marginTop: 20,
-    padding: 20,
-    backgroundColor: '#f8f8f8',
-    borderRadius: 8,
-  },
-  persistentErrorText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 10,
-  },
-  persistentErrorStep: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-});
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  SafeAreaView,
+  Dimensions,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
+
+const { width, height } = Dimensions.get('window');
+
+export interface OAuthWebViewProps {
+  url: string;
+  onClose: () => void;
+  onSuccess: (code: string) => void;
+  platform?: string;
+  onComplete?: () => void;
+}
+
+export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
+  url,
+  onClose,
+  onSuccess,
+  platform = 'platform',
+  onComplete,
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [timeoutReached, setTimeoutReached] = useState(false);
+  
+  console.log('Opening OAuth WebView with URL:', url);
+  
+  // Set up a timeout to prevent infinite waiting
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      console.log(`⏰ OAuth timeout reached for ${platform} after 1 minutes`);
+      setTimeoutReached(true);
+    }, 60000); // 1 minutes timeout
+    
+    return () => clearTimeout(timeout);
+  }, [platform]);
+
+  const handleNavigationStateChange = (navState: any) => {
+    console.log(`Navigation state changed for ${platform}:`, navState.url);
+    
+    // Check for the final redirect to onairos.uk domain (this means backend callback completed)
+    const isFinalRedirect = (
+      navState.url.includes('onairos.uk/Home') ||
+      navState.url.includes('onairos.uk/home') ||
+      navState.url.includes('onairos.uk/success') ||
+      navState.url.startsWith('https://onairos.uk/Home') ||
+      navState.url.startsWith('https://onairos.uk/home')
+    );
+    
+    // For all platforms, we need to wait for the backend callback to complete
+    // The backend processes the OAuth callback and then redirects to onairos.uk/Home
+    if (isFinalRedirect) {
+      console.log(`${platform} OAuth completed - backend callback finished and redirected to Home`);
+      onSuccess('success');
+      
+      // Close the OAuth window after a small delay to ensure redirect is processed
+      setTimeout(() => {
+        if (onComplete) {
+          console.log(`Closing ${platform} OAuth window after callback completion`);
+          onComplete();
+        }
+      }, 1000); // Increased delay to ensure backend processing completes
+      return; // Exit early to avoid other triggers
+    }
+    
+    // Log intermediate callback URLs for debugging but don't close yet
+    const isIntermediateCallback = (
+      navState.url.includes('/callback') ||
+      navState.url.includes('code=') ||
+      navState.url.includes('token=') ||
+      navState.url.includes('access_token=')
+    );
+    
+    if (isIntermediateCallback && !isFinalRedirect) {
+      console.log(`Detected intermediate callback URL for ${platform}:`, navState.url);
+      console.log('Waiting for backend processing to complete and final redirect...');
+      
+      // Extract authorization code for logging purposes
+      const codeMatch = navState.url.match(/code=([^&]+)/);
+      if (codeMatch && codeMatch[1]) {
+        console.log('OAuth code detected:', codeMatch[1]);
+      }
+      
+      // Don't close yet - wait for the backend to process and redirect
+      return;
+    }
+  };
+
+  return (
+    <View style={styles.modalContainer}>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.header}>
+          <Text style={styles.title}>Connect {platform.charAt(0).toUpperCase() + platform.slice(1)}</Text>
+          {timeoutReached && (
+            <Text style={styles.timeoutText}>Taking longer than expected...</Text>
+          )}
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <Text style={styles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.webViewContainer}>
+          {isLoading && (
+            <View style={styles.loadingContainer}>
+              <ActivityIndicator size="large" color="#1BA9D4" />
+              <Text style={styles.loadingText}>Loading...</Text>
+            </View>
+          )}
+
+          <WebView
+            source={{ uri: url }}
+            onNavigationStateChange={handleNavigationStateChange}
+            onLoadStart={() => setIsLoading(true)}
+            onLoadEnd={() => setIsLoading(false)}
+            style={styles.webView}
+            javaScriptEnabled={true}
+            domStorageEnabled={true}
+            cacheEnabled={true} // Enable cache to remember previous logins
+            incognito={false} // Disable incognito mode to remember previous logins
+            thirdPartyCookiesEnabled={true}
+            sharedCookiesEnabled={true} // Enable shared cookies for Google sign-in
+            userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1"
+            onError={(syntheticEvent) => {
+              const { nativeEvent } = syntheticEvent;
+              console.error(`WebView error for ${platform}:`, nativeEvent);
+              // Don't automatically close on error - let user retry or manually close
+            }}
+            onHttpError={(syntheticEvent) => {
+              const { nativeEvent } = syntheticEvent;
+              console.error(`WebView HTTP error for ${platform}: ${nativeEvent.statusCode}`, nativeEvent.url);
+              
+              // If we get a 404 or similar error on the final redirect, it might still be successful
+              if (nativeEvent.url && nativeEvent.url.includes('onairos.uk')) {
+                console.log('HTTP error on onairos.uk domain - treating as potential success');
+                onSuccess('success');
+                if (onComplete) {
+                  setTimeout(() => onComplete(), 1000);
+                }
+              }
+            }}
+          />
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: width,
+    height: height,
+    backgroundColor: '#fff',
+    zIndex: 9999,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    width: width,
+    height: height,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+    backgroundColor: '#fff',
+    zIndex: 1000,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    flex: 1,
+    textAlign: 'center',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  closeButtonText: {
+    fontSize: 20,
+    color: '#666',
+  },
+  webViewContainer: {
+    flex: 1,
+    width: width,
+    height: height - 60, // Adjust for header height
+  },
+  webView: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  loadingContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    zIndex: 1,
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 16,
+    color: '#666',
+  },
+  timeoutText: {
+    fontSize: 12,
+    color: '#FF6B6B',
+    textAlign: 'center',
+    marginTop: 4,
+  },
+});