@onairos/react-native 3.0.34 → 3.0.36

package/src/components/onboarding/OAuthWebView.tsx

@@ -32,44 +32,94 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
 }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  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);
 
+  // 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 handleNavigationStateChange = (navState: any) => {
     console.log(`Navigation state changed for ${platform}:`, navState.url);
     
+    // Check for error states first
+    if (navState.url.includes('error=') || navState.url.includes('access_denied')) {
+      console.log('OAuth error detected:', navState.url);
+      setError('Authentication was cancelled or failed. Please try again.');
+      return;
+    }
+    
     // 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') ||
+      navState.url.includes('onairos.uk') && navState.url.includes('success')
     );
     
-    // Platform-specific success patterns
+    // Enhanced platform-specific success patterns
     const platformSuccessPatterns: Record<string, RegExp[]> = {
       reddit: [
         /reddit\.com\/api\/v1\/authorize\?done=true/,
-        /reddit\.com\/api\/v1\/authorize\/success/
+        /reddit\.com\/api\/v1\/authorize\/success/,
+        /reddit\.com.*code=/
       ],
       pinterest: [
         /pinterest\.com\/oauth\/success/,
-        /pinterest\.com\/oauth\/complete/
+        /pinterest\.com\/oauth\/complete/,
+        /pinterest\.com.*code=/,
+        /api2\.onairos\.uk\/pinterest\/callback/,
+        /onairos\.uk.*pinterest/
       ],
       linkedin: [
         /linkedin\.com\/oauth\/success/,
         /linkedin\.com\/oauth\/complete/,
-        /linkedin\.com\/uas\/oauth2\/authorization\/success/
+        /linkedin\.com\/uas\/oauth2\/authorization\/success/,
+        /linkedin\.com.*code=/
       ],
-      email: [/success/],
+      email: [/success/, /complete/],
       instagram: [
         /instagram\.com\/oauth\/authorize\?done=true/,
-        /instagram\.com\/oauth\/success/
+        /instagram\.com\/oauth\/success/,
+        /instagram\.com.*code=/,
+        /api2\.onairos\.uk\/instagram\/callback/,
+        /onairos\.uk.*instagram/
       ],
       youtube: [
         /accounts\.google\.com\/o\/oauth2\/approval/,
-        /youtube\.com\/oauth\/success/
+        /youtube\.com\/oauth\/success/,
+        /accounts\.google\.com.*code=/,
+        /api2\.onairos\.uk\/youtube\/callback/
       ]
     };
     
@@ -83,7 +133,9 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
       navState.url.includes('/callback') ||
       navState.url.includes('code=') ||
       navState.url.includes('token=') ||
-      navState.url.includes('access_token=')
+      navState.url.includes('access_token=') ||
+      navState.url.includes('api2.onairos.uk') ||
+      navState.url.includes('oauth_token=')
     );
     
     // Extract authorization code or token if present
@@ -94,18 +146,38 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
       // Try to extract code or token using different patterns
       const codeMatch = navState.url.match(/code=([^&]+)/);
       const tokenMatch = navState.url.match(/(?:token|access_token)=([^&]+)/);
+      const oauthTokenMatch = navState.url.match(/oauth_token=([^&]+)/);
       
       if (codeMatch && codeMatch[1]) {
-        authCode = codeMatch[1];
+        authCode = decodeURIComponent(codeMatch[1]);
         console.log('OAuth code extracted:', authCode);
       } else if (tokenMatch && tokenMatch[1]) {
-        authCode = tokenMatch[1];
+        authCode = decodeURIComponent(tokenMatch[1]);
+        console.log('OAuth token extracted:', authCode);
+      } else if (oauthTokenMatch && oauthTokenMatch[1]) {
+        authCode = decodeURIComponent(oauthTokenMatch[1]);
         console.log('OAuth token extracted:', authCode);
       }
       
       // Call onSuccess with the extracted code/token
       if (authCode) {
+        console.log(`Calling onSuccess for ${platform} with code:`, authCode);
+        
+        // Clear timeout since OAuth completed successfully
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        
         onSuccess(authCode);
+        
+        // Close the OAuth window after a short delay
+        setTimeout(() => {
+          if (onComplete) {
+            console.log('Calling onComplete to close OAuth window');
+            onComplete();
+          }
+        }, 1000);
+        return;
       }
     }
     
@@ -115,6 +187,7 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
       
       // If we haven't already extracted a code/token, consider this a generic success
       if (!authCode) {
+        console.log(`Calling onSuccess for ${platform} with generic success`);
         onSuccess('success');
       }
       
@@ -124,6 +197,19 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         onComplete();
       }
     }
+    
+    // Handle specific redirect patterns that indicate completion
+    if (navState.url.includes('api2.onairos.uk') && 
+        (navState.url.includes('callback') || navState.url.includes('success'))) {
+      console.log(`Backend callback detected for ${platform}`);
+      onSuccess('backend_callback_success');
+      
+      setTimeout(() => {
+        if (onComplete) {
+          onComplete();
+        }
+      }, 1500);
+    }
   };
 
   const handleLoadEnd = () => {
@@ -134,16 +220,44 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   const handleError = (syntheticEvent: any) => {
     const { nativeEvent } = syntheticEvent;
     console.error('WebView error:', nativeEvent);
-    setError('Failed to load OAuth page. Please try again.');
-    setIsLoading(false);
+    
+    if (retryCount < 2) {
+      console.log(`Retrying OAuth load (attempt ${retryCount + 1})`);
+      setRetryCount(prev => prev + 1);
+      setIsLoading(true);
+      setError(null);
+      
+      // Retry after a short delay
+      setTimeout(() => {
+        if (webViewRef.current) {
+          webViewRef.current.reload();
+        }
+      }, 2000);
+    } else {
+      setError('Failed to load OAuth page. Please try again or use the browser option.');
+      setIsLoading(false);
+    }
   };
 
   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);
+    setIsLoading(true);
+    setRetryCount(0);
+    
+    if (webViewRef.current) {
+      webViewRef.current.reload();
+    }
+  };
+
   /**
    * Get platform-specific icon
    */
@@ -205,9 +319,14 @@ 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>
-          <TouchableOpacity style={styles.retryButton} onPress={handleOpenInBrowser}>
-            <Text style={styles.retryButtonText}>Open in Browser</Text>
-          </TouchableOpacity>
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity style={styles.retryButton} onPress={handleRetry}>
+              <Text style={styles.retryButtonText}>Retry</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.browserButton} onPress={handleOpenInBrowser}>
+              <Text style={styles.browserButtonText}>Open in Browser</Text>
+            </TouchableOpacity>
+          </View>
         </View>
       </SafeAreaView>
     );
@@ -238,18 +357,91 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         onNavigationStateChange={handleNavigationStateChange}
         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}
-        userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1"
+        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
+        `}
       />
-
-      {isLoading && (
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color={COLORS.primary} />
-          <Text style={styles.loadingText}>Loading {platform}...</Text>
-        </View>
-      )}
     </SafeAreaView>
   );
 };
@@ -287,10 +479,12 @@ const styles = StyleSheet.create({
     zIndex: 10,
   },
   browserButton: {
-    padding: 8,
-    position: 'absolute',
-    right: 16,
-    zIndex: 10,
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: '#666',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
   },
   webView: {
     flex: 1,
@@ -330,10 +524,22 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingVertical: 12,
     borderRadius: 8,
+    marginRight: 10,
   },
   retryButtonText: {
     color: '#fff',
     fontSize: 16,
     fontWeight: '600',
   },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  browserButtonText: {
+    color: '#666',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

package/src/services/platformAuthService.ts

@@ -175,7 +175,7 @@ export const initiateNativeAuth = async (platform: string): Promise<boolean> =>
         // Configure Google Sign-In
         await GoogleSignin.configure({
           scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
-          webClientId: 'YOUR_WEB_CLIENT_ID', // Replace with your actual web client ID
+          webClientId: 'YOUR_ACTUAL_WEB_CLIENT_ID.apps.googleusercontent.com', // Replace with your actual web client ID
           offlineAccess: true,
           hostedDomain: '',
           forceCodeForRefreshToken: true,