@onairos/react-native 3.0.24 → 3.0.26

package/src/components/UniversalOnboarding.tsx

@@ -15,6 +15,7 @@ import {
   Image,
   Switch,
   Linking,
+  Alert,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
@@ -52,7 +53,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 +158,86 @@ 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]) {
-      try {
-        // Special case for Instagram which uses the existing flow
-        if (platformId === 'instagram') {
+    // Check if already connected or connecting
+    if (connections[platformId]?.connected) {
+      // Disconnect platform
+      console.log(`Disconnecting ${platformId}`);
+      setPlatformToggles(prev => ({
+        ...prev,
+        [platformId]: false
+      }));
+      
+      // Update connections state
+      setConnections(prev => {
+        const newConnections = { ...prev };
+        delete newConnections[platformId];
+        return newConnections;
+      });
+      return;
+    }
+
+    if (connectingPlatform === platformId) {
+      console.log(`Already connecting to ${platformId}, ignoring...`);
+      return;
+    }
+
+    // Attempt to connect platform
+    try {
+      setIsConnectingPlatform(true);
+      setConnectingPlatform(platformId);
+      console.log(`[OAuth] Initiating connection for ${platformId} with email: ${userEmail}`);
+      
+      // Check if platform has a native SDK
+      if (hasNativeSDK(platformId)) {
+        console.log(`[OAuth] Using native SDK for ${platformId}`);
+        // Use native SDK for authentication
+        const success = await initiateNativeAuth(platformId);
+        if (success) {
+          console.log(`[OAuth] Native authentication successful for ${platformId}`);
+          // Update platform toggle state
           setPlatformToggles(prev => ({
             ...prev,
-            [platformId]: !prev[platformId]
+            [platformId]: true
           }));
-          return;
-        }
-        
-        // Check if the platform has a native SDK
-        if (hasNativeSDK(platformId)) {
-          // Use native SDK authentication
-          setCurrentPlatform(platformId);
-          const success = await initiateNativeAuth(platformId);
           
-          if (success) {
-            // Update connections state
-            setConnections(prev => ({
-              ...prev,
-              [platformId]: { userName: username, connected: true }
-            }));
-            
-            // Update platform toggles
-            setPlatformToggles(prev => ({
-              ...prev,
-              [platformId]: true
-            }));
-          }
-          return;
+          // Update connections state
+          setConnections(prev => ({
+            ...prev,
+            [platformId]: { userName: userEmail, connected: true }
+          }));
         }
+      } else {
+        console.log(`[OAuth] Initiating OAuth flow for ${platformId}`);
+        console.log(`[OAuth] Making request to: https://api2.onairos.uk/${platformId}/authorize`);
         
-        // 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)
+        // Use OAuth flow through proxy server
+        const oauthUrl = await initiateOAuth(platformId, userEmail);
         if (oauthUrl) {
+          console.log(`[OAuth] Received OAuth URL for ${platformId}: ${oauthUrl}`);
+          setCurrentPlatform(platformId);
           setOauthUrl(oauthUrl);
           setStep('oauth');
+        } else {
+          console.error(`[OAuth] No OAuth URL returned for ${platformId}`);
+          throw new 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;
       }
-    } else {
-      // If toggling off, just update the state
+    } catch (error) {
+      console.error(`[OAuth] Error connecting ${platformId}:`, error);
+      // Reset toggle state on error
       setPlatformToggles(prev => ({
         ...prev,
-        [platformId]: !prev[platformId]
+        [platformId]: false
       }));
+      
+      // Show error to user
+      Alert.alert('Connection Error', `Failed to connect to ${platformId}. Please try again.`);
+    } finally {
+      setIsConnectingPlatform(false);
+      setConnectingPlatform(null);
     }
-  }, [platformToggles, username]);
-  
+  }, [platformToggles, userEmail, connections, connectingPlatform]);
+
   /**
    * Handles OAuth callback URLs
    */
@@ -226,7 +252,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 +267,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 +289,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(() => {
@@ -339,13 +372,20 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                           <Text style={styles.onairosIconText}>O</Text>
                         </View>
                       </View>
+                      <Text style={styles.headerDescription}>
+                        Generate insights from your data to send to {AppName}
+                      </Text>
                     </View>
 
-                    <ScrollView style={styles.content}>
+                    <ScrollView 
+                      style={styles.content}
+                      contentContainerStyle={styles.contentContainer}
+                      showsVerticalScrollIndicator={false}
+                    >
                       {/* Main title and description */}
                       <View style={styles.titleContainer}>
                         <Text style={styles.mainTitle}>
-                          Connect your data to create a Persona of you, to connect to Cosmos
+                          Connect your data to create a Persona of you
                         </Text>
                         <Text style={styles.privacyMessage}>
                           None of your app data is shared with ANYONE
@@ -355,23 +395,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 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"
                               />
-                              <Text style={styles.platformName}>
-                                {platform.name}
-                              </Text>
+                              <View style={styles.platformTextContainer}>
+                                <Text style={styles.platformName}>
+                                  {platform.name}
+                                </Text>
+                                {connections[platform.id]?.connected && (
+                                  <Text style={styles.connectedText}>Connected</Text>
+                                )}
+                                {connectingPlatform === platform.id && (
+                                  <Text style={styles.connectingText}>Connecting...</Text>
+                                )}
+                              </View>
+                            </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: '#4CAF50' }}
+                                  thumbColor={platformToggles[platform.id] || connections[platform.id]?.connected ? '#4CAF50' : '#f4f3f4'}
+                                  disabled={connectingPlatform !== null}
+                                />
+                              )}
                             </View>
-                            <Switch
-                              value={platformToggles[platform.id]}
-                              onValueChange={() => togglePlatform(platform.id)}
-                              trackColor={{ false: '#767577', true: '#81b0ff' }}
-                              thumbColor={platformToggles[platform.id] ? '#2196F3' : '#f4f3f4'}
-                            />
                           </View>
                         ))}
                       </View>
@@ -422,10 +480,11 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                         platformToggles,
                         selectedTier,
                         tierData: requestData?.[selectedTier],
+                        userEmail,
                       });
                     }}
                     modelKey="onairosTrainingModel"
-                    username={username}
+                    username={userEmail}
                   />
                 )}
                 
@@ -460,7 +519,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     backgroundColor: '#fff',
     width: width,
-    height: height * 0.6,
+    height: height * 0.85,
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',
@@ -482,8 +541,12 @@ const styles = StyleSheet.create({
     backgroundColor: '#E0E0E0',
   },
   header: {
-    padding: 24,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    paddingBottom: 8,
     alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
   },
   headerContent: {
     flexDirection: 'row',
@@ -518,6 +581,13 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: '#000',
   },
+  headerDescription: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginTop: 12,
+    paddingHorizontal: 16,
+  },
   titleContainer: {
     marginBottom: 30,
   },
@@ -536,7 +606,10 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1,
+  },
+  contentContainer: {
     paddingHorizontal: 24,
+    paddingBottom: 20,
   },
   platformsContainer: {
     marginTop: 16,
@@ -547,10 +620,18 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 16,
     backgroundColor: '#fff',
-    borderRadius: 16,
-    marginBottom: 16,
+    borderRadius: 12,
+    marginBottom: 12,
     borderWidth: 1,
-    borderColor: '#eee',
+    borderColor: '#E0E0E0',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
   },
   platformInfo: {
     flexDirection: 'row',
@@ -566,6 +647,30 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: '#000',
   },
+  platformTextContainer: {
+    flex: 1,
+  },
+  connectedText: {
+    fontSize: 12,
+    color: '#4CAF50',
+    fontWeight: '500',
+    marginTop: 2,
+  },
+  connectingText: {
+    fontSize: 12,
+    color: '#FF9800',
+    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',
 };