@onairos/react-native 3.0.29 → 3.0.31

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,92 +1,218 @@
-import React, { useCallback, useState } from 'react';
-import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
-import { WebView, WebViewNavigation } from 'react-native-webview';
+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';
-import type { OAuthWebViewProps } from '../../types';
+
+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,
-  platform,
-  onComplete,
   onClose,
   onSuccess,
+  platform = 'platform',
+  onComplete,
 }) => {
-  const [loading, setLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const webViewRef = useRef<WebView>(null);
+  
+  console.log('Opening OAuth WebView with URL:', url);
 
-  const handleNavigationStateChange = useCallback(
-    (navState: WebViewNavigation) => {
-      console.log('Navigation state changed:', navState.url);
+  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')
+    );
+    
+    // Platform-specific success patterns
+    const platformSuccessPatterns: Record<string, RegExp[]> = {
+      reddit: [
+        /reddit\.com\/api\/v1\/authorize\?done=true/,
+        /reddit\.com\/api\/v1\/authorize\/success/
+      ],
+      pinterest: [
+        /pinterest\.com\/oauth\/success/,
+        /pinterest\.com\/oauth\/complete/
+      ],
+      linkedin: [
+        /linkedin\.com\/oauth\/success/,
+        /linkedin\.com\/oauth\/complete/,
+        /linkedin\.com\/uas\/oauth2\/authorization\/success/
+      ],
+      email: [/success/],
+      instagram: [
+        /instagram\.com\/oauth\/authorize\?done=true/,
+        /instagram\.com\/oauth\/success/
+      ],
+      youtube: [
+        /accounts\.google\.com\/o\/oauth2\/approval/,
+        /youtube\.com\/oauth\/success/
+      ]
+    };
+    
+    // Check for platform-specific success patterns
+    const isPlatformSuccess = platform && platformSuccessPatterns[platform] ?
+      platformSuccessPatterns[platform].some(pattern => pattern.test(navState.url)) :
+      false;
+    
+    // Check for callback URLs that might contain the authorization code
+    const isCallbackUrl = (
+      navState.url.includes('/callback') ||
+      navState.url.includes('code=') ||
+      navState.url.includes('token=') ||
+      navState.url.includes('access_token=')
+    );
+    
+    // Extract authorization code or token if present
+    let authCode = null;
+    if (isCallbackUrl) {
+      console.log('Detected callback URL with possible code/token');
       
-      // Check for the final redirect to onairos.uk/Home
-      const isFinalRedirect = navState.url.includes('onairos.uk/Home');
+      // Try to extract code or token using different patterns
+      const codeMatch = navState.url.match(/code=([^&]+)/);
+      const tokenMatch = navState.url.match(/(?:token|access_token)=([^&]+)/);
       
-      // Check for Instagram-specific success patterns
-      const isInstagramSuccess = (
-        platform === 'instagram' && 
-        (navState.url.includes('instagram.com/oauth/authorize') || 
-         navState.url.includes('instagram.com/accounts/login') ||
-         navState.url.includes('code='))
-      );
-      
-      // Check for platform-specific success patterns
-      const isYouTubeSuccess = (
-        platform === 'youtube' && 
-        navState.url.includes('accounts.google.com/o/oauth2/approval')
-      );
-      
-      const isLinkedInSuccess = (
-        platform === 'linkedin' && 
-        navState.url.includes('linkedin.com/oauth/v2/authorization/success')
-      );
+      if (codeMatch && codeMatch[1]) {
+        authCode = codeMatch[1];
+        console.log('OAuth code extracted:', authCode);
+      } else if (tokenMatch && tokenMatch[1]) {
+        authCode = tokenMatch[1];
+        console.log('OAuth token extracted:', authCode);
+      }
       
-      // Check for callback URLs with authorization codes
-      const isCallbackUrl = navState.url.includes('/callback') || navState.url.includes('code=');
+      // Call onSuccess with the extracted code/token
+      if (authCode) {
+        onSuccess(authCode);
+      }
+    }
+    
+    // If we see the final redirect or platform-specific success, close the OAuth window
+    if (isFinalRedirect || isPlatformSuccess) {
+      console.log(`Detected success for ${platform}`);
       
-      // If we detect success, close the window and update connection status
-      if (isFinalRedirect || isInstagramSuccess || isYouTubeSuccess || isLinkedInSuccess) {
+      // If we haven't already extracted a code/token, consider this a generic success
+      if (!authCode) {
         onSuccess('success');
-        if (onComplete) {
-          onComplete();
-        }
-        return;
-      } else if (isCallbackUrl) {
-        // Extract the authorization code
-        const authCode = extractAuthCode(navState.url);
-        if (authCode) {
-          onSuccess(authCode);
-          if (onComplete) {
-            onComplete();
-          }
-        }
-        return;
       }
-    },
-    [platform, onComplete, onSuccess]
-  );
+      
+      // Close the OAuth window
+      if (onComplete) {
+        console.log('Calling onComplete to close OAuth window');
+        onComplete();
+      }
+    }
+  };
 
-  const handleLoadEnd = useCallback(() => {
-    setLoading(false);
-  }, []);
+  const handleLoadEnd = () => {
+    setIsLoading(false);
+    setError(null);
+  };
 
-  // Extract auth code from redirect URL
-  const extractAuthCode = (redirectUrl: string): string => {
-    try {
-      // First try to extract code from URL parameters
-      const codeMatch = redirectUrl.match(/code=([^&]+)/);
-      if (codeMatch && codeMatch[1]) {
-        return codeMatch[1];
-      }
-      
-      // If that fails, try parsing as URL
-      const url = new URL(redirectUrl);
-      return url.searchParams.get('code') || '';
-    } catch (error) {
-      console.error('Error extracting auth code:', error);
-      return '';
+  const handleError = (syntheticEvent: any) => {
+    const { nativeEvent } = syntheticEvent;
+    console.error('WebView error:', nativeEvent);
+    setError('Failed to load OAuth page. Please try again.');
+    setIsLoading(false);
+  };
+
+  const handleOpenInBrowser = () => {
+    Linking.openURL(url).catch(err => {
+      console.error('Failed to open URL in browser:', err);
+    });
+  };
+
+  /**
+   * 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;
     }
   };
 
+  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}>{error}</Text>
+          <TouchableOpacity style={styles.retryButton} onPress={handleOpenInBrowser}>
+            <Text style={styles.retryButtonText}>Open in Browser</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
@@ -95,76 +221,39 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         </TouchableOpacity>
         <View style={styles.titleContainer}>
           <Icon 
-            name={getPlatformIcon(platform || 'default')} 
+            name={getPlatformIcon(platform)} 
             size={20} 
-            color={getPlatformColor(platform || 'default')} 
+            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={handleNavigationStateChange}
         onLoadEnd={handleLoadEnd}
-        startInLoadingState={true}
+        onError={handleError}
         style={styles.webView}
         javaScriptEnabled={true}
         domStorageEnabled={true}
-        sharedCookiesEnabled={true}
-        thirdPartyCookiesEnabled={true}
-        allowsInlineMediaPlayback={true}
-        mediaPlaybackRequiresUserAction={false}
         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"
-        mixedContentMode="compatibility"
-        allowsFullscreenVideo={true}
-        allowsProtectedMedia={true}
       />
 
-      {loading && (
+      {isLoading && (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={COLORS.primary} />
+          <Text style={styles.loadingText}>Loading {platform}...</Text>
         </View>
       )}
     </SafeAreaView>
   );
 };
 
-/**
- * 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';
-    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';
-    default:
-      return COLORS.primary;
-  }
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -181,7 +270,15 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
+    flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleText: {
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#000',
   },
   closeButton: {
     padding: 8,
@@ -189,6 +286,12 @@ const styles = StyleSheet.create({
     left: 16,
     zIndex: 10,
   },
+  browserButton: {
+    padding: 8,
+    position: 'absolute',
+    right: 16,
+    zIndex: 10,
+  },
   webView: {
     flex: 1,
   },
@@ -198,4 +301,39 @@ const styles = StyleSheet.create({
     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,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

package/src/services/platformAuthService.ts

@@ -166,13 +166,53 @@ export const initiateNativeAuth = async (platform: string): Promise<boolean> =>
   try {
     // Currently only YouTube (Google Sign-In) is supported
     if (platform === 'youtube') {
-      // This is a placeholder for the actual implementation
-      // In a real implementation, you would import and use the Google Sign-In SDK
       console.log('Initiating native Google Sign-In for YouTube');
       
-      // Simulate a successful authentication
-      // In a real implementation, this would be the result of the Google Sign-In flow
-      return true;
+      try {
+        // Import Google Sign-In dynamically to avoid errors if not installed
+        const { GoogleSignin, statusCodes } = require('@react-native-google-signin/google-signin');
+        
+        // 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
+          offlineAccess: true,
+          hostedDomain: '',
+          forceCodeForRefreshToken: true,
+        });
+        
+        // Check if device supports Google Play Services
+        await GoogleSignin.hasPlayServices();
+        
+        // Sign in
+        const userInfo = await GoogleSignin.signIn();
+        console.log('Google Sign-In successful:', userInfo);
+        
+        // Get access token
+        const tokens = await GoogleSignin.getTokens();
+        console.log('Google tokens:', tokens);
+        
+        // Here you would typically send the tokens to your backend
+        // to associate the YouTube account with the user
+        
+        return true;
+      } catch (error: any) {
+        console.error('Google Sign-In error:', error);
+        
+        const { statusCodes: StatusCodes } = require('@react-native-google-signin/google-signin');
+        
+        if (error.code === StatusCodes.SIGN_IN_CANCELLED) {
+          console.log('User cancelled the sign-in flow');
+        } else if (error.code === StatusCodes.IN_PROGRESS) {
+          console.log('Sign-in is in progress already');
+        } else if (error.code === StatusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+          console.log('Play services not available or outdated');
+        } else {
+          console.log('Some other error happened');
+        }
+        
+        return false;
+      }
     }
     
     throw new Error(`Native authentication not supported for ${platform}`);