@onairos/react-native 3.0.2 → 3.0.4

package/src/components/onboarding/OAuthWebView.tsx

@@ -10,25 +10,45 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   platform,
   onComplete,
   onClose,
+  onSuccess,
 }) => {
   const [loading, setLoading] = useState(true);
 
   const handleNavigationStateChange = useCallback(
     (navState: WebViewNavigation) => {
       // Check if the URL includes our redirect URI
-      if (navState.url.startsWith('onairosreact://auth/')) {
-        // OAuth flow is complete - callback will be handled by the deep link handler
-        onComplete();
+      if (navState.url.startsWith('onairosanime://auth/')) {
+        // Extract the authorization code from the URL
+        const authCode = extractAuthCode(navState.url);
+        if (authCode) {
+          onSuccess(authCode);
+        }
+        
+        // OAuth flow is complete
+        if (onComplete) {
+          onComplete();
+        }
         return;
       }
     },
-    [onComplete]
+    [onComplete, onSuccess]
   );
 
   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 '';
+    }
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
@@ -37,9 +57,9 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         </TouchableOpacity>
         <View style={styles.titleContainer}>
           <Icon 
-            name={getPlatformIcon(platform)} 
+            name={getPlatformIcon(platform || 'default')} 
             size={20} 
-            color={getPlatformColor(platform)} 
+            color={getPlatformColor(platform || 'default')} 
           />
         </View>
       </View>
@@ -49,7 +69,7 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         onNavigationStateChange={handleNavigationStateChange}
         onLoadEnd={handleLoadEnd}
         startInLoadingState={true}
-        renderLoading={() => null} // We'll handle our own loading UI
+        renderLoading={() => <View />}
         style={styles.webView}
       />
 

package/src/components/onboarding/PlatformConnector.tsx

@@ -179,6 +179,11 @@ export const PlatformConnector: React.FC<PlatformConnectorProps> = ({
           platform={activeWebview}
           onComplete={handleWebViewComplete}
           onClose={handleWebViewClose}
+          onSuccess={(code) => {
+            console.log(`Received authorization code for ${activeWebview}: ${code}`);
+            // In a real implementation, we'd pass this code to our API service
+            handleWebViewComplete();
+          }}
         />
       )}
     </View>

package/src/components/screens/ConnectorScreen.tsx

@@ -36,8 +36,9 @@ export const ConnectorScreen: React.FC<ConnectorScreenProps> = ({
         // Transform platforms data to connection status format
         Object.entries(credentials.platforms).forEach(([platform, data]) => {
           if (data && 'username' in data) {
-            connectionStatus[platform as keyof ConnectionStatus] = {
+            connectionStatus[platform] = {
               userName: data.username,
+              connected: true
             };
           }
         });
@@ -120,7 +121,7 @@ export const ConnectorScreen: React.FC<ConnectorScreenProps> = ({
 
   // Check if user can proceed to next step
   const canProceed = useCallback(() => {
-    const connectedPlatforms = Object.values(connections).filter(Boolean).length;
+    const connectedPlatforms = Object.values(connections).filter(conn => conn.connected).length;
     return connectedPlatforms >= 2;
   }, [connections]);
 

package/src/constants/index.ts

@@ -1,82 +1,82 @@
-import type { PlatformConfig } from '../types';
-
-export const COLORS = {
-  primary: '#1BA9D4',
-  headerBg: '#F8F9FA',
-  text: {
-    primary: '#000000',
-    secondary: '#666666',
-  },
-  border: '#E5E5E5',
-  success: '#34C759',
-  error: '#FF3B30',
-  instagram: '#E1306C',
-  pinterest: '#E60023',
-  reddit: '#FF4500',
-  youtube: '#FF0000',
-  white: '#FFFFFF',
-  black: '#000000',
-  gray: '#666666',
-  lightGray: '#E5E5E5',
-};
-
-export const PLATFORMS: Record<string, PlatformConfig> = {
-  instagram: {
-    name: 'Instagram',
-    icon: 'instagram',
-    color: COLORS.instagram,
-    description: 'Connect your Instagram account to train your AI model',
-  },
-  pinterest: {
-    name: 'Pinterest',
-    icon: 'pinterest',
-    color: COLORS.pinterest,
-    description: 'Use your Pinterest boards for AI training',
-  },
-  reddit: {
-    name: 'Reddit',
-    icon: 'reddit',
-    color: COLORS.reddit,
-    description: 'Connect Reddit to enhance your AI model',
-  },
-  youtube: {
-    name: 'YouTube',
-    icon: 'youtube',
-    color: COLORS.youtube,
-    description: 'Use YouTube data to improve AI recommendations',
-  },
-};
-
-export const API_ENDPOINTS = {
-  base: 'https://api2.onairos.uk',
-  oauth: {
-    instagram: '/instagram/auth',
-    pinterest: '/pinterest/auth',
-    reddit: '/reddit/auth',
-    youtube: '/youtube/auth',
-  },
-  callback: {
-    instagram: '/instagram/callback',
-    pinterest: '/pinterest/callback',
-    reddit: '/reddit/callback',
-    youtube: '/youtube/callback',
-  },
-};
-
-export const STORAGE_KEYS = {
-  credentials: 'onairos_credentials',
-  connections: 'onairos_connections',
-};
-
-export const PIN_REQUIREMENTS = {
-  minLength: 8,
-  requireUppercase: true,
-  requireLowercase: true,
-  requireNumber: true,
-  requireSpecialChar: true,
-};
-
-export const DEEP_LINK_CONFIG = {
-  scheme: 'onairosreact',
-  host: 'authenticate',
+import type { PlatformConfig } from '../types';
+
+export const COLORS = {
+  primary: '#1BA9D4',
+  headerBg: '#F8F9FA',
+  text: {
+    primary: '#000000',
+    secondary: '#666666',
+  },
+  border: '#E5E5E5',
+  success: '#34C759',
+  error: '#FF3B30',
+  instagram: '#E1306C',
+  pinterest: '#E60023',
+  reddit: '#FF4500',
+  youtube: '#FF0000',
+  white: '#FFFFFF',
+  black: '#000000',
+  gray: '#666666',
+  lightGray: '#E5E5E5',
+};
+
+export const PLATFORMS: Record<string, PlatformConfig> = {
+  instagram: {
+    name: 'Instagram',
+    icon: 'instagram',
+    color: COLORS.instagram,
+    description: 'Connect your Instagram account to train your AI model',
+  },
+  pinterest: {
+    name: 'Pinterest',
+    icon: 'pinterest',
+    color: COLORS.pinterest,
+    description: 'Use your Pinterest boards for AI training',
+  },
+  reddit: {
+    name: 'Reddit',
+    icon: 'reddit',
+    color: COLORS.reddit,
+    description: 'Connect Reddit to enhance your AI model',
+  },
+  youtube: {
+    name: 'YouTube',
+    icon: 'youtube',
+    color: COLORS.youtube,
+    description: 'Use YouTube data to improve AI recommendations',
+  },
+};
+
+export const API_ENDPOINTS = {
+  base: 'https://api2.onairos.uk',
+  oauth: {
+    instagram: '/instagram/auth',
+    pinterest: '/pinterest/auth',
+    reddit: '/reddit/auth',
+    youtube: '/youtube/auth',
+  },
+  callback: {
+    instagram: '/instagram/callback',
+    pinterest: '/pinterest/callback',
+    reddit: '/reddit/callback',
+    youtube: '/youtube/callback',
+  },
+};
+
+export const STORAGE_KEYS = {
+  credentials: 'onairos_credentials',
+  connections: 'onairos_connections',
+};
+
+export const PIN_REQUIREMENTS = {
+  minLength: 8,
+  requireUppercase: true,
+  requireLowercase: true,
+  requireNumber: true,
+  requireSpecialChar: true,
+};
+
+export const DEEP_LINK_CONFIG = {
+  scheme: 'onairosanime',
+  host: 'authenticate',
 }; 

package/src/hooks/useConnections.ts

@@ -1,35 +1,77 @@
 import { useState, useCallback } from 'react';
-import * as Keychain from 'react-native-keychain';
+import { Platform } from 'react-native';
 import { STORAGE_KEYS } from '../constants';
 import type { ConnectionStatus } from '../types';
 
+// Create a mock storage for environments without Keychain access (like Expo Go)
+const mockConnectionStorage: Record<string, ConnectionStatus> = {};
+
+// Try to import Keychain, but provide fallbacks if not available
+let Keychain: any = null;
+try {
+  // This import might fail in Expo Go or environments without native modules
+  Keychain = require('react-native-keychain');
+} catch (error) {
+  console.warn('react-native-keychain module not available in useConnections, using mock storage');
+}
+
+// Check if Keychain is properly initialized and available
+const isKeychainAvailable = () => {
+  try {
+    return Keychain && typeof Keychain.getGenericPassword === 'function';
+  } catch (e) {
+    return false;
+  }
+};
+
 export const useConnections = () => {
   const [isConnecting, setIsConnecting] = useState(false);
 
   const getConnectionStatus = useCallback(async (): Promise<ConnectionStatus> => {
     try {
-      const stored = await Keychain.getGenericPassword({
-        service: STORAGE_KEYS.connections
-      });
-      if (stored) {
-        return JSON.parse(stored.password);
+      if (isKeychainAvailable()) {
+        const stored = await Keychain.getGenericPassword({
+          service: STORAGE_KEYS.connections
+        });
+        if (stored) {
+          return JSON.parse(stored.password);
+        }
+      } else {
+        // Use in-memory mock storage if Keychain is not available
+        return mockConnectionStorage[STORAGE_KEYS.connections] || {};
       }
       return {};
     } catch (error) {
       console.error('Error getting connection status:', error);
+      
+      // Return mock data in debug mode to prevent crashes
+      if (__DEV__) {
+        return {
+          instagram: { userName: 'instagram_debug_user', connected: true },
+          youtube: { userName: 'youtube_debug_user', connected: true }
+        };
+      }
+      
       return {};
     }
   }, []);
 
   const saveConnectionStatus = useCallback(async (status: ConnectionStatus) => {
     try {
-      await Keychain.setGenericPassword(
-        'connections',
-        JSON.stringify(status),
-        { service: STORAGE_KEYS.connections }
-      );
+      if (isKeychainAvailable()) {
+        await Keychain.setGenericPassword(
+          'connections',
+          JSON.stringify(status),
+          { service: STORAGE_KEYS.connections }
+        );
+      } else {
+        // Use in-memory mock storage if Keychain is not available
+        mockConnectionStorage[STORAGE_KEYS.connections] = status;
+      }
     } catch (error) {
       console.error('Error saving connection status:', error);
+      // Save to mock storage as fallback
+      mockConnectionStorage[STORAGE_KEYS.connections] = status;
     }
   }, []);
 
@@ -39,7 +81,9 @@ export const useConnections = () => {
       console.log(`[Mock] Connecting to ${platform}`);
       
       // Simulate connection delay
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise<void>((resolve) => {
+        setTimeout(() => resolve(), 1000);
+      });
       
       const status = await getConnectionStatus();
       status[platform] = {
@@ -51,7 +95,18 @@ export const useConnections = () => {
       console.log(`[Mock] Successfully connected to ${platform}`);
     } catch (error) {
       console.error(`Error connecting to ${platform}:`, error);
-      throw error;
+      // In development, provide mock data even on error
+      if (__DEV__) {
+        const status = {
+          [platform]: {
+            userName: `Fallback User (${platform})`,
+            connected: true
+          }
+        };
+        await saveConnectionStatus(status);
+      } else {
+        throw error;
+      }
     } finally {
       setIsConnecting(false);
     }
@@ -60,11 +115,16 @@ export const useConnections = () => {
   const disconnectPlatform = useCallback(async (platform: string) => {
     try {
       const status = await getConnectionStatus();
-      delete status[platform];
-      await saveConnectionStatus(status);
+      if (status && platform in status) {
+        delete status[platform];
+        await saveConnectionStatus(status);
+      }
     } catch (error) {
       console.error(`Error disconnecting ${platform}:`, error);
-      throw error;
+      // Don't throw in development mode
+      if (!__DEV__) {
+        throw error;
+      }
     }
   }, [getConnectionStatus, saveConnectionStatus]);
 

package/src/hooks/useCredentials.ts

@@ -77,12 +77,16 @@ export const useCredentials = () => {
 
       const data = await response.json();
       return {
+        success: true,
         isValid: data.valid,
         credentials: data.credentials,
       };
     } catch (error) {
       console.error('Error validating credentials:', error);
-      return { isValid: false };
+      return { 
+        success: false,
+        isValid: false
+      };
     }
   }, []);
 

package/src/index.ts

@@ -4,6 +4,12 @@
  */
 
 // Main components
+import { Onairos } from './components/Onairos';
+import { OnairosButton } from './components/OnairosButton';
+import { Overlay } from './components/Overlay';
+import { UniversalOnboarding } from './components/UniversalOnboarding';
+
+// Export main components
 export { Onairos } from './components/Onairos';
 export { OnairosButton } from './components/OnairosButton';
 export { Overlay as OnairosOverlay } from './components/Overlay';
@@ -78,6 +84,10 @@ export type {
   OAuthWebViewProps,
   PlatformConfig,
   ApiResponse,
+  CredentialsResult,
+  OverlayProps,
+  BiometricOptions,
+  PinRequirements,
 } from './types';
 
 export type { StorageOptions, OnairosCredentials } from './utils/secureStorage';
@@ -91,4 +101,22 @@ export { COLORS, PLATFORMS, API_ENDPOINTS, STORAGE_KEYS, PIN_REQUIREMENTS, DEEP_
 export { onairosApi } from './api';
 export { OAuthService } from './services/oauthService';
 export * from './utils/secureStorage';
-export * from './utils/encryption';
+export * from './utils/encryption';
+
+// Define component types for default export using React.ComponentType
+import * as React from 'react';
+import type { OnairosButtonProps, UniversalOnboardingProps } from './types';
+
+interface OverlayComponent extends React.FC<any> {}
+interface OnairosComponent extends React.FC<any> {}
+
+// Define the public components for default export
+const components = {
+  Onairos: Onairos as OnairosComponent,
+  OnairosButton: OnairosButton as React.ComponentType<OnairosButtonProps>,
+  OnairosOverlay: Overlay as OverlayComponent,
+  UniversalOnboarding: UniversalOnboarding as React.ComponentType<UniversalOnboardingProps>,
+};
+
+// Export the components as the default export
+export default components;