@onairos/react-native 3.1.17 → 3.2.0

package/lib/module/components/onboarding/OAuthWebView.js

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, SafeAreaView, Dimensions } from 'react-native';
+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
@@ -12,199 +14,805 @@ export const OAuthWebView = ({
   platform = 'platform',
   onComplete
 }) => {
+  var _url$split$, _url$split$2;
   const [isLoading, setIsLoading] = useState(true);
-  const [timeoutReached, setTimeoutReached] = useState(false);
-  console.log('Opening OAuth WebView with URL:', url);
+  const [error, setError] = useState(null);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isRetryable, setIsRetryable] = useState(true);
+  const [retryCount, setRetryCount] = useState(0);
+  const webViewRef = useRef(null);
+  const timeoutRef = useRef(null);
+  console.log('🌐 Opening OAuth WebView with URL:', url);
+  console.log('🔗 Platform:', platform);
+  console.log('📱 URL Components:', {
+    protocol: url.split('://')[0],
+    domain: (_url$split$ = url.split('://')[1]) === null || _url$split$ === void 0 ? void 0 : _url$split$.split('/')[0],
+    path: (_url$split$2 = url.split('://')[1]) === null || _url$split$2 === void 0 ? void 0 : _url$split$2.split('/').slice(1).join('/')
+  });
 
-  // Set up a timeout to prevent infinite waiting
+  // Set up timeout for OAuth flow
   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 => {
-    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(() => {
+    // 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 => {
+    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) {
-          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
+      } 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);
+      }
     }
 
-    // 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...');
+    // 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;
+          }
 
-      // Extract authorization code for logging purposes
-      const codeMatch = navState.url.match(/code=([^&]+)/);
-      if (codeMatch && codeMatch[1]) {
-        console.log('OAuth code detected:', codeMatch[1]);
+          // Call success callback with Gmail-specific code
+          if (onSuccess) {
+            onSuccess('gmail_success');
+          }
+
+          // Close the WebView
+          if (onComplete) {
+            onComplete();
+          }
+          return;
+        }
       }
+    }
 
-      // Don't close yet - wait for the backend to process and redirect
-      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 => {
+    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 => {
+    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 => {
+    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 => {
+    // 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 => {
+    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'
+      };
     }
   };
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.modalContainer
-  }, /*#__PURE__*/React.createElement(SafeAreaView, {
+  if (error) {
+    return /*#__PURE__*/React.createElement(SafeAreaView, {
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.header
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: onClose,
+      style: styles.closeButton
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      size: 24,
+      color: "#000"
+    })), /*#__PURE__*/React.createElement(View, {
+      style: styles.titleContainer
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: getPlatformIcon(platform),
+      size: 20,
+      color: getPlatformColor(platform)
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.titleText
+    }, platform.charAt(0).toUpperCase() + platform.slice(1), " OAuth"))), /*#__PURE__*/React.createElement(View, {
+      style: styles.errorContainer
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "error-outline",
+      size: 48,
+      color: "#FF6B6B"
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.errorTitle
+    }, "Connection Error"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.errorMessage
+    }, errorMessage || error), error.includes('internet') || error.includes('network') ? /*#__PURE__*/React.createElement(View, {
+      style: styles.helpContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpTitle
+    }, "\uD83D\uDCA1 Troubleshooting Steps:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Check your Wi-Fi or cellular connection"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Try switching between Wi-Fi and cellular"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Ensure you're not using a VPN that blocks OAuth"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Close other apps that might be using bandwidth")) : error.includes('timeout') ? /*#__PURE__*/React.createElement(View, {
+      style: styles.helpContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpTitle
+    }, "\u23F1\uFE0F Connection Timeout:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Your connection might be slow"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Try again when you have a stronger signal"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Use \"Open in Browser\" for better reliability")) : error.includes('secure') || error.includes('SSL') ? /*#__PURE__*/React.createElement(View, {
+      style: styles.helpContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpTitle
+    }, "\uD83D\uDD12 Security Error:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Check your device's date and time settings"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Update your device's operating system"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Try \"Open in Browser\" as an alternative")) : /*#__PURE__*/React.createElement(View, {
+      style: styles.helpContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpTitle
+    }, "\uD83D\uDD27 General Solutions:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Close and reopen the app"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Check your internet connection"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.helpText
+    }, "\u2022 Use \"Open in Browser\" for better reliability")), /*#__PURE__*/React.createElement(View, {
+      style: styles.buttonContainer
+    }, isRetryable && /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.retryButton,
+      onPress: handleRetry
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "refresh",
+      size: 20,
+      color: "#fff",
+      style: styles.buttonIcon
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.retryButtonText
+    }, "Retry")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.browserButton,
+      onPress: handleOpenInBrowser
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "open-in-browser",
+      size: 20,
+      color: "#666",
+      style: styles.buttonIcon
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.browserButtonText
+    }, "Open in Browser"))), retryCount >= 3 && /*#__PURE__*/React.createElement(View, {
+      style: styles.persistentErrorContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.persistentErrorText
+    }, "Still having trouble? Try these steps:"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.persistentErrorStep
+    }, "1. Use \"Open in Browser\" for more reliable authentication"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.persistentErrorStep
+    }, "2. Check if other apps can access the internet"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.persistentErrorStep
+    }, "3. Restart your device if the problem persists"))));
+  }
+  return /*#__PURE__*/React.createElement(SafeAreaView, {
     style: styles.container
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.header
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.title
-  }, "Connect ", platform.charAt(0).toUpperCase() + platform.slice(1)), timeoutReached && /*#__PURE__*/React.createElement(Text, {
-    style: styles.timeoutText
-  }, "Taking longer than expected..."), /*#__PURE__*/React.createElement(TouchableOpacity, {
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: onClose,
     style: styles.closeButton
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.closeButtonText
-  }, "\u2715"))), /*#__PURE__*/React.createElement(View, {
-    style: styles.webViewContainer
-  }, isLoading && /*#__PURE__*/React.createElement(View, {
-    style: styles.loadingContainer
-  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: "large",
-    color: "#1BA9D4"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close",
+    size: 24,
+    color: "#000"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.titleContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: getPlatformIcon(platform),
+    size: 20,
+    color: getPlatformColor(platform)
   }), /*#__PURE__*/React.createElement(Text, {
-    style: styles.loadingText
-  }, "Loading...")), /*#__PURE__*/React.createElement(WebView, {
+    style: styles.titleText
+  }, platform.charAt(0).toUpperCase() + platform.slice(1), " OAuth")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: handleOpenInBrowser,
+    style: styles.browserButton
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "open-in-browser",
+    size: 20,
+    color: "#666"
+  }))), /*#__PURE__*/React.createElement(WebView, {
+    ref: webViewRef,
     source: {
       uri: url
     },
-    onNavigationStateChange: handleNavigationStateChange,
-    onLoadStart: () => setIsLoading(true),
-    onLoadEnd: () => setIsLoading(false),
+    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,
-    cacheEnabled: true // Enable cache to remember previous logins
-    ,
-    incognito: false // Disable incognito mode to remember previous logins
-    ,
+    startInLoadingState: true,
+    scalesPageToFit: true,
+    allowsInlineMediaPlayback: true,
+    mediaPlaybackRequiresUserAction: false,
+    mixedContentMode: "compatibility",
     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 => {
+    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.error(`WebView error for ${platform}:`, nativeEvent);
-      // Don't automatically close on error - let user retry or manually close
+      console.log('WebView load started:', nativeEvent.url);
+      setIsLoading(true);
     },
-    onHttpError: syntheticEvent => {
+    onLoadProgress: 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);
-        }
-      }
-    }
-  }))));
+      console.log('WebView load progress:', nativeEvent.progress);
+    },
+    renderError: errorName => /*#__PURE__*/React.createElement(View, {
+      style: styles.errorContainer
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "error-outline",
+      size: 48,
+      color: "#FF6B6B"
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.errorTitle
+    }, "WebView Error"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.errorMessage
+    }, "Failed to load the authentication page. Error: ", errorName), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.retryButton,
+      onPress: handleRetry
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.retryButtonText
+    }, "Retry"))),
+    renderLoading: () => /*#__PURE__*/React.createElement(View, {
+      style: styles.loadingContainer
+    }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+      size: "large",
+      color: COLORS.primary
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.loadingText
+    }, "Loading ", platform, "...")),
+    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
+        `
+  }));
 };
 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
+    backgroundColor: '#fff'
   },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    height: 56,
+    backgroundColor: '#f8f8f8',
     borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-    backgroundColor: '#fff',
-    zIndex: 1000
+    borderBottomColor: '#e0e0e0',
+    paddingHorizontal: 16
   },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
+  titleContainer: {
     flex: 1,
-    textAlign: 'center'
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  closeButton: {
-    padding: 8
+  titleText: {
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000'
   },
-  closeButtonText: {
-    fontSize: 20,
-    color: '#666'
+  closeButton: {
+    padding: 8,
+    position: 'absolute',
+    left: 16,
+    zIndex: 10
   },
-  webViewContainer: {
-    flex: 1,
-    width: width,
-    height: height - 60 // Adjust for header height
+  browserButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: '#666',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   webView: {
-    flex: 1,
-    width: '100%',
-    height: '100%'
+    flex: 1
   },
   loadingContainer: {
     ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
     alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.9)',
-    zIndex: 1
+    justifyContent: 'center'
   },
   loadingText: {
-    marginTop: 12,
+    marginTop: 10,
     fontSize: 16,
     color: '#666'
   },
-  timeoutText: {
-    fontSize: 12,
-    color: '#FF6B6B',
+  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',
-    marginTop: 4
+    marginBottom: 5
   }
 });
 //# sourceMappingURL=OAuthWebView.js.map