@onairos/react-native 3.0.21 → 3.0.24

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,9 @@ 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 [username, setUsername] = useState<string>(`user_${Math.floor(Math.random() * 10000)}`);
 
   const platforms = [
     { id: 'instagram', name: 'Instagram', icon: require('../assets/images/instagram.png') },
@@ -73,6 +79,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,12 +154,116 @@ 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 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') {
+          setPlatformToggles(prev => ({
+            ...prev,
+            [platformId]: !prev[platformId]
+          }));
+          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;
+        }
+        
+        // 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');
+        }
+      } 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
+      setPlatformToggles(prev => ({
+        ...prev,
+        [platformId]: !prev[platformId]
+      }));
+    }
+  }, [platformToggles, username]);
+  
+  /**
+   * 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: username, 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, username]);
+  
+  /**
+   * Handles completion of the OAuth flow
+   */
+  const handleOAuthSuccess = useCallback((code: string) => {
+    if (currentPlatform) {
+      // Update connections state
+      setConnections(prev => ({
+        ...prev,
+        [currentPlatform]: { userName: username, connected: true }
+      }));
+      
+      // Update platform toggles
+      setPlatformToggles(prev => ({
+        ...prev,
+        [currentPlatform]: true
+      }));
+      
+      // Return to the connect step
+      setStep('connect');
+    }
+  }, [currentPlatform, username]);
 
   const handlePinSubmit = useCallback(async (userPin: string) => {
     setPin(userPin);
@@ -294,7 +425,20 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
                       });
                     }}
                     modelKey="onairosTrainingModel"
-                    username="demo_user"
+                    username={username}
+                  />
+                )}
+                
+                {step === 'oauth' && oauthUrl && (
+                  <OAuthWebView
+                    url={oauthUrl}
+                    platform={currentPlatform}
+                    onClose={() => {
+                      setStep('connect');
+                      setOauthUrl('');
+                    }}
+                    onSuccess={handleOAuthSuccess}
+                    onComplete={() => setStep('connect')}
                   />
                 )}
               </SafeAreaView>

package/src/constants/index.ts

@@ -79,4 +79,5 @@ export const PIN_REQUIREMENTS = {
 export const DEEP_LINK_CONFIG = {
   scheme: 'onairosanime',
   host: 'authenticate',
+  redirectUri: 'onairosanime://auth/',
 }; 

package/src/services/platformAuthService.ts

@@ -0,0 +1,175 @@
+import { Platform, Linking } from 'react-native';
+import { DEEP_LINK_CONFIG } from '../constants';
+
+// Define types for platform auth configuration
+interface PlatformAuthConfig {
+  hasNativeSDK: boolean;
+  nativeSDKPackage?: string;
+  authEndpoint: string;
+  color: string;
+}
+
+// Configuration for each platform's authentication
+const PLATFORM_AUTH_CONFIG: Record<string, PlatformAuthConfig> = {
+  instagram: {
+    hasNativeSDK: false, // Instagram doesn't have a public OAuth SDK for React Native
+    authEndpoint: 'https://api2.onairos.uk/instagram/authorize',
+    color: '#E1306C',
+  },
+  youtube: {
+    hasNativeSDK: true, // YouTube uses Google Sign-In SDK
+    nativeSDKPackage: '@react-native-google-signin/google-signin',
+    authEndpoint: 'https://api2.onairos.uk/youtube/authorize',
+    color: '#FF0000',
+  },
+  reddit: {
+    hasNativeSDK: false,
+    authEndpoint: 'https://api2.onairos.uk/reddit/authorize',
+    color: '#FF4500',
+  },
+  pinterest: {
+    hasNativeSDK: false,
+    authEndpoint: 'https://api2.onairos.uk/pinterest/authorize',
+    color: '#E60023',
+  },
+  email: {
+    hasNativeSDK: false,
+    authEndpoint: 'https://api2.onairos.uk/email/authorize',
+    color: '#4285F4',
+  },
+};
+
+/**
+ * Checks if a native SDK is available for the given platform
+ */
+export const hasNativeSDK = (platform: string): boolean => {
+  const config = PLATFORM_AUTH_CONFIG[platform];
+  return config?.hasNativeSDK || false;
+};
+
+/**
+ * Gets the auth endpoint URL for a platform
+ */
+export const getAuthEndpoint = (platform: string): string => {
+  const config = PLATFORM_AUTH_CONFIG[platform];
+  return config?.authEndpoint || '';
+};
+
+/**
+ * Gets the color associated with a platform
+ */
+export const getPlatformColor = (platform: string): string => {
+  const config = PLATFORM_AUTH_CONFIG[platform];
+  return config?.color || '#000000';
+};
+
+/**
+ * Initiates the OAuth flow for a platform
+ * @param platform The platform to authenticate with
+ * @param username The username to associate with the authentication
+ * @returns A Promise that resolves to the OAuth URL to open in a WebView or null if using native SDK
+ */
+export const initiateOAuth = async (platform: string, username: string): Promise<string | null> => {
+  try {
+    // Check if the platform is supported
+    if (!PLATFORM_AUTH_CONFIG[platform]) {
+      throw new Error(`Unsupported platform: ${platform}`);
+    }
+
+    // Check if platform has a native SDK
+    if (PLATFORM_AUTH_CONFIG[platform].hasNativeSDK) {
+      // Return null to indicate that we should use the native SDK
+      return null;
+    }
+
+    // Prepare the request body
+    const jsonData = {
+      session: {
+        username: username || 'anonymous',
+      },
+    };
+
+    // Make the request to get the OAuth URL
+    const response = await fetch(PLATFORM_AUTH_CONFIG[platform].authEndpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(jsonData),
+    });
+
+    // Parse the response
+    const data = await response.json();
+    
+    // Check if the response contains the OAuth URL
+    if (platform === 'reddit' && data.redditURL) {
+      return data.redditURL;
+    } else if (platform === 'pinterest' && data.pinterestURL) {
+      return data.pinterestURL;
+    } else if (platform === 'youtube' && data.youtubeURL) {
+      return data.youtubeURL;
+    } else if (platform === 'email' && data.emailURL) {
+      return data.emailURL;
+    } else if (data.url) {
+      return data.url;
+    }
+
+    throw new Error(`No OAuth URL found in response for ${platform}`);
+  } catch (error) {
+    console.error(`Error initiating OAuth for ${platform}:`, error);
+    throw error;
+  }
+};
+
+/**
+ * Initiates the native SDK authentication flow for a platform
+ * @param platform The platform to authenticate with
+ * @returns A Promise that resolves to the authentication result
+ */
+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;
+    }
+    
+    throw new Error(`Native authentication not supported for ${platform}`);
+  } catch (error) {
+    console.error(`Error initiating native auth for ${platform}:`, error);
+    throw error;
+  }
+};
+
+/**
+ * Handles the OAuth callback
+ * @param url The callback URL
+ * @returns The authorization code extracted from the URL
+ */
+export const handleOAuthCallback = (url: string): string | null => {
+  try {
+    // Parse the URL
+    const parsedUrl = new URL(url);
+    
+    // Extract the authorization code
+    return parsedUrl.searchParams.get('code');
+  } catch (error) {
+    console.error('Error handling OAuth callback:', error);
+    return null;
+  }
+};
+
+/**
+ * Checks if a URL is an OAuth callback
+ * @param url The URL to check
+ * @returns True if the URL is an OAuth callback
+ */
+export const isOAuthCallback = (url: string): boolean => {
+  // Check if the URL starts with our redirect URI
+  return url.startsWith('onairosanime://auth/');
+};

package/src/types.ts

@@ -54,6 +54,12 @@ export interface OnairosButtonProps {
   darkMode?: boolean;
   preferredPlatform?: string;
   testMode?: boolean;
+  autoFetch?: boolean;
+  inferenceData?: any;
+  textLayout?: 'left' | 'right' | 'center';
+  textColor?: string;
+  proofMode?: boolean;
+  webpageName?: string;
 }
 
 export interface PlatformListProps {