@onairos/react-native 3.1.18 → 3.2.0

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,232 +1,838 @@
-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,
-  },
-});
+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,
+  },
+});