@onairos/react-native 3.0.69 → 3.0.70

package/src/components/onboarding/OAuthWebView.tsx

@@ -177,49 +177,87 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
     
     // 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);
     
-    if (retryCount < 2) {
-      console.log(`🔄 Retrying OAuth load (attempt ${retryCount + 1}/2)`);
+    // 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 short delay
+      // 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();
         }
-      }, 3000);
+      }, retryDelay);
     } else {
       setError(errorMessage);
-    setIsLoading(false);
+      setIsLoading(false);
+      
+      // Show additional help for persistent errors
+      if (retryCount >= 3) {
+        console.log('❌ Maximum retries reached, showing error to user');
+      }
     }
   };
 
@@ -303,14 +341,66 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
           <Icon name="error-outline" size={48} color="#FF6B6B" />
           <Text style={styles.errorTitle}>Connection Error</Text>
           <Text style={styles.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}>
             <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>
+            </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>
     );
@@ -469,6 +559,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingVertical: 12,
     borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   webView: {
     flex: 1,
@@ -509,6 +602,9 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
     borderRadius: 8,
     marginRight: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   retryButtonText: {
     color: '#fff',
@@ -526,4 +622,39 @@ const styles = StyleSheet.create({
     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,
+  },
 });

package/src/services/platformAuthService.ts

@@ -100,6 +100,17 @@ export const initiateOAuth = async (platform: string, username: string, appName?
     console.log('🌐 Platform uses OAuth WebView flow');
     console.log('🔗 Auth endpoint:', PLATFORM_AUTH_CONFIG[platform].authEndpoint);
 
+    // Pre-flight connectivity check
+    console.log('🔍 Performing pre-flight connectivity check...');
+    const connectivityResult = await testApiConnectivity();
+    
+    if (!connectivityResult.success) {
+      console.error('❌ Pre-flight connectivity check failed:', connectivityResult.error);
+      throw new Error(`Cannot reach authentication server: ${connectivityResult.error}`);
+    }
+    
+    console.log('✅ Pre-flight connectivity check passed');
+
     // Handle Instagram with specific API format
     if (platform === 'instagram') {
       const state = 'djksbfds';
@@ -112,13 +123,31 @@ export const initiateOAuth = async (platform: string, username: string, appName?
 
       console.log('📤 Sending Instagram OAuth request:', jsonData);
 
-      const response = await fetch('https://api2.onairos.uk/instagram/authorize', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(jsonData),
-      });
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
+
+      let response: Response;
+      try {
+        response = await fetch('https://api2.onairos.uk/instagram/authorize', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'User-Agent': 'OnairosReactNative/1.0',
+          },
+          body: JSON.stringify(jsonData),
+          signal: controller.signal,
+        });
+      } catch (fetchError) {
+        clearTimeout(timeoutId);
+        
+        if (fetchError.name === 'AbortError') {
+          throw new Error(`Request timeout: Instagram OAuth server took too long to respond`);
+        }
+        
+        throw new Error(`Network error: ${fetchError.message || 'Failed to connect to Instagram OAuth server'}`);
+      }
+      
+      clearTimeout(timeoutId);
 
       console.log('📡 Instagram OAuth response status:', response.status);
       console.log('📡 Instagram OAuth response headers:', response.headers);
@@ -134,7 +163,13 @@ export const initiateOAuth = async (platform: string, username: string, appName?
       
       if (responseData.instagramURL) {
         console.log('✅ Instagram OAuth URL received:', responseData.instagramURL);
-        return responseData.instagramURL;
+        
+        // Validate the URL before returning
+        if (await validateOAuthUrl(responseData.instagramURL)) {
+          return responseData.instagramURL;
+        } else {
+          throw new Error('Received invalid Instagram OAuth URL');
+        }
       }
       
       console.error('❌ No Instagram URL found in response');
@@ -152,14 +187,32 @@ export const initiateOAuth = async (platform: string, username: string, appName?
 
     console.log(`📤 Sending ${platform} OAuth request:`, jsonData);
 
-    // Make the request to get the OAuth URL
-    const response = await fetch(PLATFORM_AUTH_CONFIG[platform].authEndpoint, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(jsonData),
-    });
+    // Make the request to get the OAuth URL with enhanced error handling
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
+
+    let response: Response;
+    try {
+      response = await fetch(PLATFORM_AUTH_CONFIG[platform].authEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'User-Agent': 'OnairosReactNative/1.0',
+        },
+        body: JSON.stringify(jsonData),
+        signal: controller.signal,
+      });
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError.name === 'AbortError') {
+        throw new Error(`Request timeout: ${platform} OAuth server took too long to respond`);
+      }
+      
+      throw new Error(`Network error: ${fetchError.message || 'Failed to connect to OAuth server'}`);
+    }
+    
+    clearTimeout(timeoutId);
 
     console.log(`📡 ${platform} OAuth response status:`, response.status);
     console.log(`📡 ${platform} OAuth response headers:`, response.headers);
@@ -181,36 +234,108 @@ export const initiateOAuth = async (platform: string, username: string, appName?
     }
     
     // Check if the response contains the OAuth URL based on platform
+    let oauthUrl: string | null = null;
+    
     switch (platform) {
       case 'reddit':
-        if (data.redditURL) return data.redditURL;
+        oauthUrl = data.redditURL;
         break;
       case 'pinterest':
-        if (data.pinterestURL) return data.pinterestURL;
+        oauthUrl = data.pinterestURL;
         break;
       case 'youtube':
-        if (data.youtubeURL) return data.youtubeURL;
+        oauthUrl = data.youtubeURL;
         break;
       case 'email':
         // Gmail might return under different field names
-        if (data.emailURL) return data.emailURL;
-        if (data.gmailURL) return data.gmailURL;
-        if (data.authUrl) return data.authUrl;
-        if (data.url) return data.url;
+        oauthUrl = data.emailURL || data.gmailURL || data.authUrl || data.url;
         break;
       default:
-        if (data.url) return data.url;
+        oauthUrl = data.url;
         break;
     }
 
-    console.error(`❌ No OAuth URL found in response for ${platform}. Response:`, data);
-    throw new Error(`No OAuth URL found in response for ${platform}`);
+    if (!oauthUrl) {
+      console.error(`❌ No OAuth URL found in response for ${platform}. Response:`, data);
+      throw new Error(`No OAuth URL found in response for ${platform}`);
+    }
+
+    console.log(`✅ ${platform} OAuth URL received:`, oauthUrl);
+    
+    // Validate the URL before returning
+    if (await validateOAuthUrl(oauthUrl)) {
+      return oauthUrl;
+    } else {
+      throw new Error(`Received invalid ${platform} OAuth URL`);
+    }
   } catch (error) {
     console.error(`Error initiating OAuth for ${platform}:`, error);
     throw error;
   }
 };
 
+/**
+ * Validates an OAuth URL to ensure it's reachable
+ * @param url The OAuth URL to validate
+ * @returns Promise<boolean> indicating if the URL is valid and reachable
+ */
+const validateOAuthUrl = async (url: string): Promise<boolean> => {
+  try {
+    console.log('🔍 Validating OAuth URL:', url);
+    
+    // Basic URL format validation
+    if (!url || typeof url !== 'string') {
+      console.error('❌ Invalid URL format:', url);
+      return false;
+    }
+    
+    // Check if URL starts with https
+    if (!url.startsWith('https://')) {
+      console.error('❌ URL must use HTTPS:', url);
+      return false;
+    }
+    
+    // Try to parse the URL
+    try {
+      new URL(url);
+    } catch (parseError) {
+      console.error('❌ URL parsing failed:', parseError);
+      return false;
+    }
+    
+    // Make a HEAD request to check if the URL is reachable
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+    
+    try {
+      const response = await fetch(url, {
+        method: 'HEAD',
+        signal: controller.signal,
+      });
+      
+      clearTimeout(timeoutId);
+      
+      // Accept any response that's not a network error
+      // OAuth pages might return various status codes
+      console.log('✅ OAuth URL validation successful, status:', response.status);
+      return true;
+    } catch (fetchError) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError.name === 'AbortError') {
+        console.warn('⚠️ OAuth URL validation timeout, but proceeding anyway');
+        return true; // Allow timeout as URLs might be slow to respond
+      }
+      
+      console.warn('⚠️ OAuth URL validation failed, but proceeding anyway:', fetchError.message);
+      return true; // Allow network errors as they might be temporary
+    }
+  } catch (error) {
+    console.warn('⚠️ OAuth URL validation error, but proceeding anyway:', error);
+    return true; // Allow validation errors to not block the flow
+  }
+};
+
 /**
  * Initiates the native SDK authentication flow for a platform
  * @param platform The platform to authenticate with
@@ -473,22 +598,62 @@ export const testApiConnectivity = async (): Promise<{ success: boolean; error?:
   try {
     console.log('🔍 Testing connectivity to Onairos API...');
     
-    const response = await fetch('https://api2.onairos.uk/health', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
+    // Test multiple endpoints for better reliability
+    const testEndpoints = [
+      'https://api2.onairos.uk/health',
+      'https://api2.onairos.uk', // Base URL
+    ];
     
-    console.log('🌐 API connectivity test response:', response.status);
+    let lastError: string | null = null;
     
-    if (response.ok) {
-      console.log('✅ API server is reachable');
-      return { success: true };
-    } else {
-      console.log('⚠️ API server responded with error:', response.status);
-      return { success: false, error: `API server error: ${response.status}` };
+    for (const endpoint of testEndpoints) {
+      try {
+        console.log(`🔍 Testing endpoint: ${endpoint}`);
+        
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+        
+        const response = await fetch(endpoint, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'User-Agent': 'OnairosReactNative/1.0',
+          },
+          signal: controller.signal,
+        });
+        
+        clearTimeout(timeoutId);
+        
+        console.log(`🌐 API connectivity test response for ${endpoint}:`, response.status);
+        
+        if (response.ok || response.status === 404) {
+          // Accept 404 as it means the server is reachable
+          console.log('✅ API server is reachable');
+          return { success: true };
+        } else {
+          console.log(`⚠️ API server responded with status ${response.status} for ${endpoint}`);
+          lastError = `API server error: ${response.status}`;
+          // Continue to next endpoint
+        }
+      } catch (fetchError) {
+        console.log(`❌ Failed to reach ${endpoint}:`, fetchError);
+        
+        if (fetchError.name === 'AbortError') {
+          lastError = 'Connection timeout - API server took too long to respond';
+        } else if (fetchError.message.includes('Network request failed')) {
+          lastError = 'Network error - check your internet connection';
+        } else if (fetchError.message.includes('not connected to the internet')) {
+          lastError = 'No internet connection';
+        } else {
+          lastError = `Network error: ${fetchError.message}`;
+        }
+        
+        // Continue to next endpoint
+      }
     }
+    
+    console.error('❌ All API connectivity tests failed');
+    return { success: false, error: lastError || 'Cannot reach API server' };
   } catch (error) {
     console.error('❌ API connectivity test failed:', error);
     return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };