@onairos/react-native 3.0.24 → 3.0.25

package/src/components/UniversalOnboarding.tsx

@@ -52,7 +52,9 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const [platformToggles, setPlatformToggles] = useState<{[key: string]: boolean}>({});
   const [oauthUrl, setOauthUrl] = useState<string>('');
   const [currentPlatform, setCurrentPlatform] = useState<string>('');
-  const [username, setUsername] = useState<string>(`user_${Math.floor(Math.random() * 10000)}`);
+  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') },
@@ -155,63 +157,73 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   }, [getConnectionStatus]);
 
   const togglePlatform = useCallback(async (platformId: string) => {
-    // If toggling on, initiate the OAuth flow for the platform
     if (!platformToggles[platformId]) {
+      // Attempt to connect platform
       try {
-        // Special case for Instagram which uses the existing flow
-        if (platformId === 'instagram') {
-          setPlatformToggles(prev => ({
-            ...prev,
-            [platformId]: !prev[platformId]
-          }));
-          return;
-        }
+        setIsConnectingPlatform(true);
+        setConnectingPlatform(platformId);
+        console.log(`Initiating connection for ${platformId}`);
         
-        // Check if the platform has a native SDK
+        // Check if platform has a native SDK
         if (hasNativeSDK(platformId)) {
-          // Use native SDK authentication
-          setCurrentPlatform(platformId);
+          console.log(`Using native SDK for ${platformId}`);
+          // Use native SDK for authentication
           const success = await initiateNativeAuth(platformId);
-          
           if (success) {
-            // Update connections state
-            setConnections(prev => ({
+            console.log(`Native authentication successful for ${platformId}`);
+            // Update platform toggle state
+            setPlatformToggles(prev => ({
               ...prev,
-              [platformId]: { userName: username, connected: true }
+              [platformId]: true
             }));
             
-            // Update platform toggles
-            setPlatformToggles(prev => ({
+            // Update connections state
+            setConnections(prev => ({
               ...prev,
-              [platformId]: true
+              [platformId]: { userName: userEmail, connected: true }
             }));
           }
-          return;
-        }
-        
-        // For other platforms, use the web OAuth flow
-        setCurrentPlatform(platformId);
-        const oauthUrl = await initiateOAuth(platformId, username);
-        
-        // If oauthUrl is null, it means we should use native SDK (which should have been caught above)
-        if (oauthUrl) {
-          setOauthUrl(oauthUrl);
-          setStep('oauth');
+        } 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 initiating OAuth for ${platformId}:`, error);
-        // If there's an error, don't toggle the platform
-        return;
+        console.error(`Error connecting ${platformId}:`, error);
+        // Reset toggle state on error
+        setPlatformToggles(prev => ({
+          ...prev,
+          [platformId]: false
+        }));
+      } finally {
+        setIsConnectingPlatform(false);
+        setConnectingPlatform(null);
       }
     } else {
-      // If toggling off, just update the state
+      // Disconnect platform
+      console.log(`Disconnecting ${platformId}`);
       setPlatformToggles(prev => ({
         ...prev,
-        [platformId]: !prev[platformId]
+        [platformId]: false
       }));
+      
+      // Update connections state
+      setConnections(prev => {
+        const newConnections = { ...prev };
+        delete newConnections[platformId];
+        return newConnections;
+      });
     }
-  }, [platformToggles, username]);
-  
+  }, [platformToggles, userEmail]);
+
   /**
    * Handles OAuth callback URLs
    */
@@ -226,7 +238,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         // Update connections state
         setConnections(prev => ({
           ...prev,
-          [platform]: { userName: username, connected: true }
+          [platform]: { userName: userEmail, connected: true }
         }));
         
         // Update platform toggles
@@ -241,18 +253,21 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     } catch (error) {
       console.error('Error handling OAuth callback:', error);
     }
-  }, [currentPlatform, username]);
+  }, [currentPlatform, userEmail]);
   
   /**
    * Handles completion of the OAuth flow
    */
   const handleOAuthSuccess = useCallback((code: string) => {
-    if (currentPlatform) {
-      // Update connections state
-      setConnections(prev => ({
-        ...prev,
-        [currentPlatform]: { userName: username, connected: true }
-      }));
+    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 => ({
@@ -260,33 +275,37 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         [currentPlatform]: true
       }));
       
-      // Return to the connect step
-      setStep('connect');
+      // 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');
+      }
     }
-  }, [currentPlatform, username]);
+    
+    // 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(() => {
@@ -354,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>
 
@@ -422,10 +456,11 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         platformToggles,
                         selectedTier,
                         tierData: requestData?.[selectedTier],
+                        userEmail,
                       });
                     }}
                     modelKey="onairosTrainingModel"
-                    username={username}
+                    username={userEmail}
                   />
                 )}
                 
@@ -566,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,7 +77,7 @@ export const PIN_REQUIREMENTS = {
 };
 
 export const DEEP_LINK_CONFIG = {
-  scheme: 'onairosanime',
-  host: 'authenticate',
-  redirectUri: 'onairosanime://auth/',
+  scheme: 'onairosevents',
+  host: 'auth',
+  redirectUri: 'onairosevents://auth/callback',
 };