@onairos/react-native 3.0.22 → 3.0.25

package/src/components/UniversalOnboarding.tsx

@@ -14,13 +14,16 @@ import {
   ScrollView,
   Image,
   Switch,
+  Linking,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
 import { PinInput } from './PinInput';
 import { TrainingModal } from './TrainingModal';
+import { OAuthWebView } from './onboarding/OAuthWebView';
 import { useConnections } from '../hooks/useConnections';
-import { COLORS } from '../constants';
+import { COLORS, DEEP_LINK_CONFIG } from '../constants';
+import { initiateOAuth, initiateNativeAuth, hasNativeSDK, isOAuthCallback } from '../services/platformAuthService';
 import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
 
 const { height, width } = Dimensions.get('window');
@@ -37,7 +40,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   test = false,
   preferredPlatform,
 }) => {
-  const [step, setStep] = useState<'connect' | 'pin' | 'training'>('connect');
+  const [step, setStep] = useState<'connect' | 'pin' | 'training' | 'oauth'>('connect');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
   const [selectedTier, setSelectedTier] = useState<'Small' | 'Medium' | 'Large'>('Medium');
@@ -47,6 +50,11 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   }>({ progress: 0, eta: '' });
   const [slideAnim] = useState(new Animated.Value(height));
   const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
+  const [oauthUrl, setOauthUrl] = useState<string>('');
+  const [currentPlatform, setCurrentPlatform] = useState<string>('');
+  const [userEmail, setUserEmail] = useState<string>('user@example.com'); // Use proper email instead of random username
+  const [isConnectingPlatform, setIsConnectingPlatform] = useState<boolean>(false);
+  const [connectingPlatform, setConnectingPlatform] = useState<string | null>(null);
 
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
@@ -73,6 +81,27 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         bounciness: 0,
       }).start();
       
+      // Set up deep link listener for OAuth callbacks
+      // Using the subscription pattern for React Native's Linking API
+      const subscription = Linking.addListener('url', ({ url }) => {
+        if (isOAuthCallback(url)) {
+          handleOAuthCallback(url);
+        }
+      });
+      
+      // Check for initial URL (app was opened via deep link)
+      Linking.getInitialURL().then(initialUrl => {
+        if (initialUrl && isOAuthCallback(initialUrl)) {
+          handleOAuthCallback(initialUrl);
+        }
+      });
+      
+      // Return cleanup function
+      return () => {
+        // Remove event listener using the subscription
+        subscription.remove();
+      };
+      
       // Initialize platform toggles
       const initialToggles: { [key: string]: boolean } = {};
       platforms.forEach((platform) => {
@@ -127,35 +156,156 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     setConnections(status);
   }, [getConnectionStatus]);
 
-  const togglePlatform = useCallback((platformId: string) => {
-    setPlatformToggles(prev => ({
-      ...prev,
-      [platformId]: !prev[platformId]
-    }));
-  }, []);
+  const togglePlatform = useCallback(async (platformId: string) => {
+    if (!platformToggles[platformId]) {
+      // Attempt to connect platform
+      try {
+        setIsConnectingPlatform(true);
+        setConnectingPlatform(platformId);
+        console.log(`Initiating connection for ${platformId}`);
+        
+        // Check if platform has a native SDK
+        if (hasNativeSDK(platformId)) {
+          console.log(`Using native SDK for ${platformId}`);
+          // Use native SDK for authentication
+          const success = await initiateNativeAuth(platformId);
+          if (success) {
+            console.log(`Native authentication successful for ${platformId}`);
+            // Update platform toggle state
+            setPlatformToggles(prev => ({
+              ...prev,
+              [platformId]: true
+            }));
+            
+            // Update connections state
+            setConnections(prev => ({
+              ...prev,
+              [platformId]: { userName: userEmail, connected: true }
+            }));
+          }
+        } else {
+          console.log(`Initiating OAuth flow for ${platformId}`);
+          // Use OAuth flow through proxy server
+          const oauthUrl = await initiateOAuth(platformId, userEmail);
+          if (oauthUrl) {
+            console.log(`Received OAuth URL for ${platformId}: ${oauthUrl}`);
+            setCurrentPlatform(platformId);
+            setOauthUrl(oauthUrl);
+            setStep('oauth');
+          } else {
+            console.error(`No OAuth URL returned for ${platformId}`);
+          }
+        }
+      } catch (error) {
+        console.error(`Error connecting ${platformId}:`, error);
+        // Reset toggle state on error
+        setPlatformToggles(prev => ({
+          ...prev,
+          [platformId]: false
+        }));
+      } finally {
+        setIsConnectingPlatform(false);
+        setConnectingPlatform(null);
+      }
+    } else {
+      // Disconnect platform
+      console.log(`Disconnecting ${platformId}`);
+      setPlatformToggles(prev => ({
+        ...prev,
+        [platformId]: false
+      }));
+      
+      // Update connections state
+      setConnections(prev => {
+        const newConnections = { ...prev };
+        delete newConnections[platformId];
+        return newConnections;
+      });
+    }
+  }, [platformToggles, userEmail]);
+
+  /**
+   * Handles OAuth callback URLs
+   */
+  const handleOAuthCallback = useCallback((url: string) => {
+    try {
+      // Extract the authorization code from the URL
+      const parsedUrl = new URL(url);
+      const code = parsedUrl.searchParams.get('code');
+      const platform = parsedUrl.searchParams.get('platform') || currentPlatform;
+      
+      if (code && platform) {
+        // Update connections state
+        setConnections(prev => ({
+          ...prev,
+          [platform]: { userName: userEmail, connected: true }
+        }));
+        
+        // Update platform toggles
+        setPlatformToggles(prev => ({
+          ...prev,
+          [platform]: true
+        }));
+        
+        // Return to the connect step
+        setStep('connect');
+      }
+    } catch (error) {
+      console.error('Error handling OAuth callback:', error);
+    }
+  }, [currentPlatform, userEmail]);
+  
+  /**
+   * Handles completion of the OAuth flow
+   */
+  const handleOAuthSuccess = useCallback((code: string) => {
+    console.log(`OAuth success for ${currentPlatform} with code: ${code}`);
+    
+          // Update connections for the current platform
+      if (currentPlatform) {
+        // Update connections state
+        setConnections(prev => ({
+          ...prev,
+          [currentPlatform]: { userName: userEmail, connected: true }
+        }));
+      
+      // Update platform toggles
+      setPlatformToggles(prev => ({
+        ...prev,
+        [currentPlatform]: true
+      }));
+      
+      // In a real implementation, we would send the code to our server
+      // to exchange it for an access token and store it securely
+      console.log(`Simulating token exchange for ${currentPlatform}`);
+      
+      // For demo purposes, we'll just simulate a successful token exchange
+      if (debug || test) {
+        console.log('Debug mode: Simulating successful token exchange');
+      }
+    }
+    
+    // Close OAuth window and return to connect step
+    setOauthUrl('');
+    setStep('connect');
+  }, [currentPlatform, userEmail, debug, test]);
 
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
     setStep('training');
-    // Simulate training progress
+    // Simulate training progress over 10 seconds
     let progress = 0;
     const interval = setInterval(() => {
-      progress += 0.1;
+      progress += 1; // 10% progress every second for 1 seconds total
       setTraining({
         progress,
-        eta: `${Math.round((1 - progress) * 100)} seconds remaining`,
+        eta: `${Math.round((1 - progress) * 10)} seconds remaining`,
       });
       if (progress >= 1) {
         clearInterval(interval);
-        onComplete('https://api2.onairos.uk', 'dummy-token', {
-          pin: userPin,
-          connections,
-          platformToggles,
-          selectedTier,
-          tierData: requestData?.[selectedTier],
-        });
+        // Training complete - TrainingModal will handle email input and final completion
       }
-    }, 1000);
+    }, 1000); // 1 second intervals for 10 total seconds
   }, [connections, onComplete, selectedTier, requestData, platformToggles]);
 
   const canProceedToPin = useCallback(() => {
@@ -223,26 +373,41 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
 
                       {/* Platform connection options */}
                       <View style={styles.platformsContainer}>
-                        {platforms.map((platform) => (
-                          <View key={platform.id} style={styles.platformItem}>
-                            <View style={styles.platformInfo}>
-                              <Image 
-                                source={platform.icon} 
-                                style={styles.platformIcon} 
-                                resizeMode="contain"
-                              />
+                                              {platforms.map((platform) => (
+                        <View key={platform.id} style={[
+                          styles.platformItem,
+                          connections[platform.id]?.connected && styles.platformItemConnected
+                        ]}>
+                          <View style={styles.platformInfo}>
+                            <Image 
+                              source={platform.icon} 
+                              style={styles.platformIcon} 
+                              resizeMode="contain"
+                            />
+                            <View style={styles.platformTextContainer}>
                               <Text style={styles.platformName}>
                                 {platform.name}
                               </Text>
+                              {connections[platform.id]?.connected && (
+                                <Text style={styles.connectedText}>Connected</Text>
+                              )}
                             </View>
-                            <Switch
-                              value={platformToggles[platform.id]}
-                              onValueChange={() => togglePlatform(platform.id)}
-                              trackColor={{ false: '#767577', true: '#81b0ff' }}
-                              thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
-                            />
                           </View>
-                        ))}
+                          <View style={styles.platformActions}>
+                            {connectingPlatform === platform.id ? (
+                              <ActivityIndicator size="small" color={COLORS.primary} />
+                            ) : (
+                              <Switch
+                                value={platformToggles[platform.id] || connections[platform.id]?.connected || false}
+                                onValueChange={() => togglePlatform(platform.id)}
+                                trackColor={{ false: '#767577', true: '#81b0ff' }}
+                                thumbColor={platformToggles[platform.id] || connections[platform.id]?.connected ? '#2196F3' : '#f4f3f4'}
+                                disabled={connectingPlatform !== null}
+                              />
+                            )}
+                          </View>
+                        </View>
+                      ))}
                       </View>
                     </ScrollView>
 
@@ -291,10 +456,24 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         platformToggles,
                         selectedTier,
                         tierData: requestData?.[selectedTier],
+                        userEmail,
                       });
                     }}
                     modelKey="onairosTrainingModel"
-                    username="demo_user"
+                    username={userEmail}
+                  />
+                )}
+                
+                {step === 'oauth' && oauthUrl && (
+                  <OAuthWebView
+                    url={oauthUrl}
+                    platform={currentPlatform}
+                    onClose={() => {
+                      setStep('connect');
+                      setOauthUrl('');
+                    }}
+                    onSuccess={handleOAuthSuccess}
+                    onComplete={() => setStep('connect')}
                   />
                 )}
               </SafeAreaView>
@@ -422,6 +601,24 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#000',
   },
+  platformTextContainer: {
+    flex: 1,
+  },
+  connectedText: {
+    fontSize: 12,
+    color: '#4CAF50',
+    fontWeight: '500',
+    marginTop: 2,
+  },
+  platformActions: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  platformItemConnected: {
+    backgroundColor: '#F8F9FA',
+    borderColor: '#4CAF50',
+    borderWidth: 1,
+  },
   footer: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react';
-import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, ActivityIndicator, SafeAreaView, TouchableOpacity, Text } from 'react-native';
 import { WebView, WebViewNavigation } from 'react-native-webview';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { COLORS } from '../../constants';
+import { isOAuthSuccess, handleOAuthCallback } from '../../services/platformAuthService';
 import type { OAuthWebViewProps } from '../../types';
 
 export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
@@ -13,41 +14,83 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   onSuccess,
 }) => {
   const [loading, setLoading] = useState(true);
+  const [currentUrl, setCurrentUrl] = useState(url);
 
   const handleNavigationStateChange = useCallback(
     (navState: WebViewNavigation) => {
-      // Check if the URL includes our redirect URI
-      if (navState.url.startsWith('onairosanime://auth/')) {
-        // Extract the authorization code from the URL
-        const authCode = extractAuthCode(navState.url);
-        if (authCode) {
-          onSuccess(authCode);
+      console.log(`[OAuthWebView] Navigation state changed for ${platform}:`, navState.url);
+      setCurrentUrl(navState.url);
+      
+      // Check for final redirect to onairos.uk/Home (indicates proxy has processed the callback)
+      if (navState.url.includes('onairos.uk/Home')) {
+        console.log(`[OAuthWebView] Detected final redirect to onairos.uk/Home for ${platform}`);
+        
+        // Add a small delay to ensure the redirect is fully processed
+        setTimeout(() => {
+          onSuccess('success');
+          if (onComplete) {
+            onComplete();
+          }
+        }, 500);
+        return;
+      }
+      
+      // Check for platform-specific success patterns using the service
+      if (platform && isOAuthSuccess(navState.url, platform)) {
+        console.log(`[OAuthWebView] Detected platform-specific success pattern for ${platform}`);
+        
+        // For YouTube/Google, wait for the final redirect
+        if (platform === 'youtube') {
+          console.log(`[OAuthWebView] YouTube success detected, waiting for final redirect...`);
+          // Don't close immediately for YouTube, wait for the onairos.uk/Home redirect
+          return;
         }
         
-        // OAuth flow is complete
-        if (onComplete) {
-          onComplete();
+        // For other platforms, close immediately
+        setTimeout(() => {
+          onSuccess('success');
+          if (onComplete) {
+            onComplete();
+          }
+        }, 300);
+        return;
+      }
+      
+      // Check for callback URLs with authorization codes
+      if (navState.url.includes('/callback') || navState.url.includes('code=')) {
+        console.log(`[OAuthWebView] Detected callback URL for ${platform}:`, navState.url);
+        
+        // Extract the authorization code
+        const authCode = handleOAuthCallback(navState.url);
+        if (authCode) {
+          console.log(`[OAuthWebView] Extracted auth code for ${platform}:`, authCode);
+          onSuccess(authCode);
+          if (onComplete) {
+            onComplete();
+          }
         }
         return;
       }
     },
-    [onComplete, onSuccess]
+    [platform, onComplete, onSuccess]
   );
 
+  const handleLoadStart = useCallback(() => {
+    setLoading(true);
+  }, []);
+
   const handleLoadEnd = useCallback(() => {
     setLoading(false);
   }, []);
 
-  // Extract auth code from redirect URL
-  const extractAuthCode = (redirectUrl: string): string => {
-    try {
-      const url = new URL(redirectUrl);
-      return url.searchParams.get('code') || '';
-    } catch (error) {
-      console.error('Error extracting auth code:', error);
-      return '';
-    }
-  };
+  const handleError = useCallback((syntheticEvent: any) => {
+    const { nativeEvent } = syntheticEvent;
+    console.error(`[OAuthWebView] WebView error for ${platform}:`, nativeEvent);
+    setLoading(false);
+  }, [platform]);
+
+  // Get iOS Safari user agent for better compatibility
+  const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1';
 
   return (
     <SafeAreaView style={styles.container}>
@@ -61,21 +104,56 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
             size={20} 
             color={getPlatformColor(platform || 'default')} 
           />
+          <Text style={styles.platformTitle}>
+            Connect {platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'Account'}
+          </Text>
         </View>
+        <View style={styles.placeholder} />
       </View>
 
       <WebView
         source={{ uri: url }}
         onNavigationStateChange={handleNavigationStateChange}
+        onLoadStart={handleLoadStart}
         onLoadEnd={handleLoadEnd}
+        onError={handleError}
         startInLoadingState={true}
         renderLoading={() => <View />}
         style={styles.webView}
+        // Essential WebView configuration for OAuth
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        cacheEnabled={true}
+        incognito={false} // Allow session persistence
+        sharedCookiesEnabled={true} // Critical for Google/YouTube OAuth
+        thirdPartyCookiesEnabled={true} // Required for OAuth flows
+        userAgent={userAgent} // iOS Safari for better compatibility
+        // Additional settings for better OAuth support
+        allowsInlineMediaPlayback={true}
+        mediaPlaybackRequiresUserAction={false}
+        allowsBackForwardNavigationGestures={true}
+        // Security settings
+        allowsLinkPreview={false}
+        allowFileAccess={false}
+        allowUniversalAccessFromFileURLs={false}
+        mixedContentMode="compatibility"
       />
 
       {loading && (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={COLORS.primary} />
+          <Text style={styles.loadingText}>
+            Connecting to {platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'platform'}...
+          </Text>
+        </View>
+      )}
+      
+      {/* Debug info in development */}
+      {__DEV__ && (
+        <View style={styles.debugContainer}>
+          <Text style={styles.debugText} numberOfLines={1}>
+            {currentUrl}
+          </Text>
         </View>
       )}
     </SafeAreaView>
@@ -95,6 +173,8 @@ const getPlatformIcon = (platform: string): string => {
       return 'push-pin';
     case 'reddit':
       return 'forum';
+    case 'email':
+      return 'email';
     default:
       return 'link';
   }
@@ -113,6 +193,8 @@ const getPlatformColor = (platform: string): string => {
       return '#E60023';
     case 'reddit':
       return '#FF4500';
+    case 'email':
+      return '#4285F4';
     default:
       return COLORS.primary;
   }
@@ -134,21 +216,49 @@ const styles = StyleSheet.create({
   },
   titleContainer: {
     flex: 1,
+    flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'center',
+  },
+  platformTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#000',
+    marginLeft: 8,
   },
   closeButton: {
     padding: 8,
-    position: 'absolute',
-    left: 16,
-    zIndex: 10,
+    width: 40,
+  },
+  placeholder: {
+    width: 40,
   },
   webView: {
     flex: 1,
   },
   loadingContainer: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
     alignItems: 'center',
     justifyContent: 'center',
   },
+  loadingText: {
+    fontSize: 16,
+    color: '#666',
+    marginTop: 16,
+    textAlign: 'center',
+  },
+  debugContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: 8,
+  },
+  debugText: {
+    color: '#fff',
+    fontSize: 12,
+    fontFamily: 'monospace',
+  },
 });

package/src/constants/index.ts

@@ -77,6 +77,7 @@ export const PIN_REQUIREMENTS = {
 };
 
 export const DEEP_LINK_CONFIG = {
-  scheme: 'onairosanime',
-  host: 'authenticate',
+  scheme: 'onairosevents',
+  host: 'auth',
+  redirectUri: 'onairosevents://auth/callback',
 };