@onairos/react-native 3.0.30 → 3.0.34

package/src/components/OnairosButton.tsx

@@ -12,7 +12,7 @@ import {
 import { UniversalOnboarding } from './UniversalOnboarding';
 import { Overlay } from './Overlay';
 import { COLORS } from '../constants';
-import type { OnairosButtonProps } from '../types';
+import type { OnairosButtonProps } from '../types/index';
 import { hasCredentials, getCredentials, deleteCredentials as clearCredentials } from '../utils/secureStorage';
 import { onairosApi } from '../api';
 
@@ -25,31 +25,26 @@ export interface OnairosButtonRef {
  * OnairosButton Component - A sign-in button similar to Google/Apple sign-in
  */
 export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
+  AppName,
+  requestData,
   returnLink,
   prefillUrl,
-  AppName,
   buttonType = 'normal',
-  requestData,
   buttonWidth = 180,
   buttonHeight = 48,
   hasStroke = false,
   enabled = true,
   buttonForm = 'default',
+  auto = false,
   onRejection,
   onResolved,
   preCheck,
   color,
   swerv = false,
   debug = false,
-  darkMode = false,
   preferredPlatform,
   testMode = false,
-  autoFetch = false,
-  inferenceData,
-  textLayout,
-  textColor: customTextColor,
-  proofMode = false,
-  webpageName,
+  darkMode = false,
 }, ref) => {
   const [showOnboarding, setShowOnboarding] = useState(false);
   const [showOverlay, setShowOverlay] = useState(false);
@@ -112,12 +107,8 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
     setIsLoading(true);
     
     try {
-      // If autoFetch is enabled, directly call the API with inferenceData
-      if (autoFetch) {
-        if (!inferenceData) {
-          throw new Error('inferenceData is required when autoFetch is enabled');
-        }
-        
+      // If auto is enabled, make API call automatically and return result
+      if (auto) {
         try {
           // Check if credentials exist
           const hasStoredCreds = await hasCredentials();
@@ -129,27 +120,24 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
               throw new Error('Invalid credentials');
             }
             
-            // Call the API directly with inferenceData
-            // Using a custom API call for inference
-            const result = await fetch(`https://api.onairos.ai/inference`, {
+            // Call the API directly and return result
+            const result = await fetch(`https://api2.onairos.uk/api/inference`, {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json',
                 'Authorization': `Bearer ${credentials.userPin || ''}`
               },
               body: JSON.stringify({
-              username: credentials.username,
-              modelKey: credentials.userPin || '',
-              data: inferenceData,
-              requestData: requestData || {},
-              proofMode: proofMode,
-              webpageName: webpageName || AppName
-            })
+                username: credentials.username,
+                modelKey: credentials.userPin || '',
+                requestData: requestData || {},
+                appName: AppName
+              })
             }).then(res => res.json());
             
             if (result && result.success) {
               if (onResolved) {
-                onResolved(result.apiUrl || '', result.token || '', result.data || {});
+                onResolved(result.apiUrl || 'https://api2.onairos.uk', result.token || '', result.data || {});
               }
               setIsLoading(false);
               return;
@@ -160,8 +148,8 @@ export const OnairosButton = forwardRef<OnairosButtonRef, OnairosButtonProps>(({
             // No credentials, proceed with normal flow
             console.log('No credentials found, proceeding with normal flow');
           }
-        } catch (autoFetchError) {
-          console.error('AutoFetch error:', autoFetchError);
+        } catch (automaticError) {
+          console.error('Automatic API call error:', automaticError);
           // Fall back to normal flow on error
         }
       }

package/src/components/onboarding/OAuthWebView.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import {
   View,
   Text,
@@ -7,6 +7,7 @@ import {
   ActivityIndicator,
   SafeAreaView,
   Dimensions,
+  Linking,
 } from 'react-native';
 import { WebView } from 'react-native-webview';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -30,8 +31,10 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
   onComplete,
 }) => {
   const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const webViewRef = useRef<WebView>(null);
   
-  console.log('Opening OAuth WebView with URL:', url); // Add logging
+  console.log('Opening OAuth WebView with URL:', url);
 
   const handleNavigationStateChange = (navState: any) => {
     console.log(`Navigation state changed for ${platform}:`, navState.url);
@@ -40,29 +43,11 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
     const isFinalRedirect = (
       navState.url.includes('onairos.uk/Home') ||
       navState.url.includes('onairos.uk/home') ||
-      navState.url.includes('onairos.uk/success')
+      navState.url.includes('onairos.uk/success') ||
+      navState.url.startsWith('https://onairos.uk/Home')
     );
     
-    // For YouTube specifically, we need to be more careful about when to close
-    // Only close after the backend callback redirects to onairos.uk/Home
-    if (platform === 'youtube') {
-      // Only trigger success when we see the final redirect from the backend
-      if (isFinalRedirect) {
-        console.log('YouTube OAuth completed - backend callback finished and redirected to Home');
-        onSuccess('success');
-        
-        // Close the OAuth window after a small delay to ensure redirect is processed
-        setTimeout(() => {
-          if (onComplete) {
-            console.log('Closing YouTube OAuth window after callback completion');
-            onComplete();
-          }
-        }, 500);
-      }
-      return; // Exit early for YouTube to avoid other triggers
-    }
-    
-    // Platform-specific success patterns (for non-YouTube platforms)
+    // Platform-specific success patterns
     const platformSuccessPatterns: Record<string, RegExp[]> = {
       reddit: [
         /reddit\.com\/api\/v1\/authorize\?done=true/,
@@ -77,10 +62,14 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
         /linkedin\.com\/oauth\/complete/,
         /linkedin\.com\/uas\/oauth2\/authorization\/success/
       ],
-      email: [/success/], // Generic success pattern for email
+      email: [/success/],
       instagram: [
         /instagram\.com\/oauth\/authorize\?done=true/,
         /instagram\.com\/oauth\/success/
+      ],
+      youtube: [
+        /accounts\.google\.com\/o\/oauth2\/approval/,
+        /youtube\.com\/oauth\/success/
       ]
     };
     
@@ -139,6 +128,20 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
 
   const handleLoadEnd = () => {
     setIsLoading(false);
+    setError(null);
+  };
+
+  const handleError = (syntheticEvent: any) => {
+    const { nativeEvent } = syntheticEvent;
+    console.error('WebView error:', nativeEvent);
+    setError('Failed to load OAuth page. Please try again.');
+    setIsLoading(false);
+  };
+
+  const handleOpenInBrowser = () => {
+    Linking.openURL(url).catch(err => {
+      console.error('Failed to open URL in browser:', err);
+    });
   };
 
   /**
@@ -181,6 +184,35 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
     }
   };
 
+  if (error) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.header}>
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <Icon name="close" size={24} color="#000" />
+          </TouchableOpacity>
+          <View style={styles.titleContainer}>
+            <Icon 
+              name={getPlatformIcon(platform)} 
+              size={20} 
+              color={getPlatformColor(platform)} 
+            />
+            <Text style={styles.titleText}>{platform.charAt(0).toUpperCase() + platform.slice(1)} OAuth</Text>
+          </View>
+        </View>
+        
+        <View style={styles.errorContainer}>
+          <Icon name="error-outline" size={48} color="#FF6B6B" />
+          <Text style={styles.errorTitle}>Connection Error</Text>
+          <Text style={styles.errorMessage}>{error}</Text>
+          <TouchableOpacity style={styles.retryButton} onPress={handleOpenInBrowser}>
+            <Text style={styles.retryButtonText}>Open in Browser</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.header}>
@@ -195,17 +227,20 @@ export const OAuthWebView: React.FC<OAuthWebViewProps> = ({
           />
           <Text style={styles.titleText}>{platform.charAt(0).toUpperCase() + platform.slice(1)} OAuth</Text>
         </View>
+        <TouchableOpacity onPress={handleOpenInBrowser} style={styles.browserButton}>
+          <Icon name="open-in-browser" size={20} color="#666" />
+        </TouchableOpacity>
       </View>
 
       <WebView
+        ref={webViewRef}
         source={{ uri: url }}
         onNavigationStateChange={handleNavigationStateChange}
         onLoadEnd={handleLoadEnd}
+        onError={handleError}
         style={styles.webView}
         javaScriptEnabled={true}
         domStorageEnabled={true}
-        sharedCookiesEnabled={true}
-        thirdPartyCookiesEnabled={true}
         userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1"
       />
 
@@ -251,6 +286,12 @@ const styles = StyleSheet.create({
     left: 16,
     zIndex: 10,
   },
+  browserButton: {
+    padding: 8,
+    position: 'absolute',
+    right: 16,
+    zIndex: 10,
+  },
   webView: {
     flex: 1,
   },
@@ -265,4 +306,34 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: '#666',
   },
+  errorContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  errorTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  errorMessage: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    backgroundColor: COLORS.primary,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

package/src/index.ts

@@ -118,7 +118,7 @@ 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>,
+  OnairosButton: OnairosButton,
   OnairosOverlay: Overlay as OverlayComponent,
   UniversalOnboarding: UniversalOnboarding as React.ComponentType<UniversalOnboardingProps>,
   PortalHost: PortalHost,

package/src/services/platformAuthService.ts

@@ -166,13 +166,53 @@ 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;
+      try {
+        // Import Google Sign-In dynamically to avoid errors if not installed
+        const { GoogleSignin, statusCodes } = require('@react-native-google-signin/google-signin');
+        
+        // Configure Google Sign-In
+        await GoogleSignin.configure({
+          scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
+          webClientId: 'YOUR_WEB_CLIENT_ID', // Replace with your actual web client ID
+          offlineAccess: true,
+          hostedDomain: '',
+          forceCodeForRefreshToken: true,
+        });
+        
+        // Check if device supports Google Play Services
+        await GoogleSignin.hasPlayServices();
+        
+        // Sign in
+        const userInfo = await GoogleSignin.signIn();
+        console.log('Google Sign-In successful:', userInfo);
+        
+        // Get access token
+        const tokens = await GoogleSignin.getTokens();
+        console.log('Google tokens:', tokens);
+        
+        // Here you would typically send the tokens to your backend
+        // to associate the YouTube account with the user
+        
+        return true;
+      } catch (error: any) {
+        console.error('Google Sign-In error:', error);
+        
+        const { statusCodes: StatusCodes } = require('@react-native-google-signin/google-signin');
+        
+        if (error.code === StatusCodes.SIGN_IN_CANCELLED) {
+          console.log('User cancelled the sign-in flow');
+        } else if (error.code === StatusCodes.IN_PROGRESS) {
+          console.log('Sign-in is in progress already');
+        } else if (error.code === StatusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+          console.log('Play services not available or outdated');
+        } else {
+          console.log('Some other error happened');
+        }
+        
+        return false;
+      }
     }
     
     throw new Error(`Native authentication not supported for ${platform}`);

package/src/types/index.ts

@@ -5,30 +5,32 @@ export interface DataTier {
 }
 
 export interface OnairosButtonProps {
-  returnLink?: string;
-  prefillUrl?: string;
-  AppName?: string;
-  buttonType?: 'normal' | 'pill';
-  requestData?: {
+  AppName: string;
+  requestData: {
     [key: string]: {
       type: string;
       descriptions: string;
       reward: string;
     };
   };
+  returnLink?: string;
+  prefillUrl?: string;
+  buttonType?: 'normal' | 'pill';
   buttonWidth?: number | string;
   buttonHeight?: number;
   hasStroke?: boolean;
   enabled?: boolean;
-  buttonForm?: 'default' | 'login' | 'signup';
+  buttonForm?: 'default' | 'login' | 'signup' | 'connect';
+  auto?: boolean; // If true, makes API call automatically and returns result
   onRejection?: (error?: string) => void;
-  onResolved?: (apiUrl: string, token: string, userData: any) => void;
+  onResolved?: (apiUrl: string, token: string, userData: any) => void; // Required when auto is false
   preCheck?: () => Promise<boolean>;
   color?: string;
   swerv?: boolean;
   debug?: boolean;
   preferredPlatform?: string;
   testMode?: boolean;
+  darkMode?: boolean;
 }
 
 export interface UniversalOnboardingProps {