@onairos/react-native 1.0.0

package/lib/module/utils/secureStorage.js

@@ -0,0 +1,196 @@
+import * as Keychain from 'react-native-keychain';
+import { Platform } from 'react-native';
+import { sha256 } from './crypto';
+const CREDENTIALS_KEY = 'onairos_credentials';
+
+/**
+ * Store credentials securely in the device keychain with optional biometric protection
+ */
+export const storeCredentials = async (credentials, options = {}) => {
+  try {
+    const {
+      useBiometrics = true,
+      biometricPrompt
+    } = options;
+
+    // Create a JSON string of the credentials
+    const credentialsString = JSON.stringify(credentials);
+
+    // Configure security options based on platform
+    const securityOptions = {
+      service: CREDENTIALS_KEY,
+      accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY
+    };
+
+    // Add biometric protection if requested
+    if (useBiometrics) {
+      // iOS specific options
+      if (Platform.OS === 'ios') {
+        securityOptions.accessControl = Keychain.ACCESS_CONTROL.BIOMETRY_ANY_OR_DEVICE_PASSCODE;
+      }
+
+      // Android specific options
+      if (Platform.OS === 'android') {
+        securityOptions.accessControl = Keychain.ACCESS_CONTROL.BIOMETRY_ANY;
+        if (biometricPrompt) {
+          securityOptions.authenticationType = Keychain.AUTHENTICATION_TYPE.BIOMETRIC;
+          securityOptions.authenticationPrompt = {
+            title: biometricPrompt.title || 'Biometric Authentication',
+            subtitle: biometricPrompt.subtitle,
+            description: 'Please authenticate to access your Onairos credentials',
+            cancel: 'Cancel'
+          };
+        }
+      }
+    }
+
+    // Store in the secure keychain
+    await Keychain.setGenericPassword(credentials.username, credentialsString, securityOptions);
+    return true;
+  } catch (error) {
+    console.error('Error storing credentials:', error);
+    return false;
+  }
+};
+
+/**
+ * Retrieve credentials from secure storage, potentially requiring biometric authentication
+ */
+export const getCredentials = async (options = {}) => {
+  try {
+    const {
+      useBiometrics = true,
+      biometricPrompt
+    } = options;
+
+    // Configure security options
+    const securityOptions = {
+      service: CREDENTIALS_KEY
+    };
+
+    // Add biometric prompt if required
+    if (useBiometrics && biometricPrompt) {
+      securityOptions.authenticationPrompt = {
+        title: biometricPrompt.title || 'Biometric Authentication',
+        subtitle: biometricPrompt.subtitle,
+        description: 'Please authenticate to access your Onairos credentials',
+        cancel: 'Cancel'
+      };
+    }
+
+    // Retrieve from keychain
+    const result = await Keychain.getGenericPassword(securityOptions);
+    if (!result) {
+      return null;
+    }
+
+    // Parse the stored JSON
+    const credentials = JSON.parse(result.password);
+    return credentials;
+  } catch (error) {
+    console.error('Error retrieving credentials:', error);
+    return null;
+  }
+};
+
+/**
+ * Check if the user has stored credentials
+ */
+export const hasCredentials = async () => {
+  try {
+    const result = await Keychain.getGenericPassword({
+      service: CREDENTIALS_KEY
+    });
+    return !!result;
+  } catch (error) {
+    console.error('Error checking for credentials:', error);
+    return false;
+  }
+};
+
+/**
+ * Delete stored credentials
+ */
+export const deleteCredentials = async () => {
+  try {
+    await Keychain.resetGenericPassword({
+      service: CREDENTIALS_KEY
+    });
+    return true;
+  } catch (error) {
+    console.error('Error deleting credentials:', error);
+    return false;
+  }
+};
+
+/**
+ * Update specific fields in the stored credentials
+ */
+export const updateCredentials = async (updates, options = {}) => {
+  try {
+    // Get current credentials
+    const currentCredentials = await getCredentials(options);
+    if (!currentCredentials) {
+      return false;
+    }
+
+    // Merge updates with current credentials
+    const updatedCredentials = {
+      ...currentCredentials,
+      ...updates
+    };
+
+    // Store updated credentials
+    return await storeCredentials(updatedCredentials, options);
+  } catch (error) {
+    console.error('Error updating credentials:', error);
+    return false;
+  }
+};
+
+/**
+ * Generate a device-specific unique username
+ */
+export const generateDeviceUsername = async () => {
+  try {
+    // Get a device-specific identifier that we can use
+    // This is a simplified example - in production you might want to use
+    // a more robust device identifier method
+    const deviceInfo = `${Platform.OS}-${Platform.Version}-${Date.now()}`;
+
+    // Hash it to create a unique identifier
+    const username = `onairos_${sha256(deviceInfo).substring(0, 10)}`;
+    return username;
+  } catch (error) {
+    console.error('Error generating device username:', error);
+    // Fallback to a timestamp-based username if there's an error
+    return `onairos_${Date.now().toString(36)}`;
+  }
+};
+
+/**
+ * Verify if credentials are valid (not expired, etc.)
+ */
+export const verifyCredentials = async credentials => {
+  try {
+    // Basic verification - check if credentials exist and aren't too old
+    if (!credentials || !credentials.accessToken || !credentials.username) {
+      return false;
+    }
+
+    // Check for expiration (example: credentials expire after 30 days)
+    const thirtyDaysMs = 30 * 24 * 60 * 60 * 1000;
+    const isExpired = Date.now() - credentials.createdAt > thirtyDaysMs;
+    if (isExpired) {
+      return false;
+    }
+
+    // Add any additional verification logic here
+
+    return true;
+  } catch (error) {
+    console.error('Error verifying credentials:', error);
+    return false;
+  }
+};
+//# sourceMappingURL=secureStorage.js.map

package/lib/module/utils/secureStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Keychain","Platform","sha256","CREDENTIALS_KEY","storeCredentials","credentials","options","useBiometrics","biometricPrompt","credentialsString","JSON","stringify","securityOptions","service","accessible","ACCESSIBLE","WHEN_UNLOCKED_THIS_DEVICE_ONLY","OS","accessControl","ACCESS_CONTROL","BIOMETRY_ANY_OR_DEVICE_PASSCODE","BIOMETRY_ANY","authenticationType","AUTHENTICATION_TYPE","BIOMETRIC","authenticationPrompt","title","subtitle","description","cancel","setGenericPassword","username","error","console","getCredentials","result","getGenericPassword","parse","password","hasCredentials","deleteCredentials","resetGenericPassword","updateCredentials","updates","currentCredentials","updatedCredentials","generateDeviceUsername","deviceInfo","Version","Date","now","substring","toString","verifyCredentials","accessToken","thirtyDaysMs","isExpired","createdAt"],"sourceRoot":"..\\..\\..\\src","sources":["utils/secureStorage.ts"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@onairos/react-native",
+  "version": "1.0.0",
+  "description": "Onairos React Native SDK for social media authentication and AI model training",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install",
+    "build": "bob build",
+    "clean": "del lib"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "oauth",
+    "social-media",
+    "authentication",
+    "onairos"
+  ],
+  "repository": "https://github.com/onairos/onairos-react-native",
+  "author": "Onairos",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/onairos/onairos-react-native/issues"
+  },
+  "homepage": "https://github.com/onairos/onairos-react-native#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^4",
+    "@react-native-community/netinfo": "^9.0.0",
+    "react-native-crypto-js": "^1.0.0",
+    "react-native-gesture-handler": "^2.0.0",
+    "react-native-keychain": "^8.0.0",
+    "react-native-reanimated": "^2.0.0",
+    "react-native-rsa-native": "^2.0.0",
+    "react-native-safe-area-context": "^4.0.0",
+    "react-native-vector-icons": "^9.0.0",
+    "react-native-webview": "^11.0.0"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "^3.0.0",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.70.0",
+    "@types/react-native-vector-icons": "^6.4.13",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "metro-react-native-babel-preset": "^0.73.10",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.71.0",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "typescript": "^4.5.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module"
+    ]
+  }
+}

package/src/components/DataRequestModal.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Modal,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS, PLATFORMS } from '../constants';
+
+interface DataRequestModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onAccept: () => void;
+  requestData: Record<string, Record<string, string>>;
+  AppName: string;
+}
+
+export const DataRequestModal: React.FC<DataRequestModalProps> = ({
+  visible,
+  onClose,
+  onAccept,
+  requestData,
+  AppName,
+}) => {
+  const renderPermissions = () => {
+    return Object.entries(requestData).map(([platform, permissions]) => {
+      const platformConfig = PLATFORMS[platform];
+      if (!platformConfig) return null;
+
+      return (
+        <View key={platform} style={styles.platformContainer}>
+          <View style={styles.platformHeader}>
+            <Icon name={platformConfig.icon} size={24} color={platformConfig.color} />
+            <Text style={styles.platformName}>{platformConfig.name}</Text>
+          </View>
+          <View style={styles.permissionsContainer}>
+            {Object.entries(permissions).map(([key, value]) => (
+              <Text key={key} style={styles.permissionText}>
+                • {key}: {value}
+              </Text>
+            ))}
+          </View>
+        </View>
+      );
+    });
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalContent}>
+          <View style={styles.header}>
+            <Icon name="auto_awesome" size={24} color={COLORS.primary} />
+            <Text style={styles.headerTitle}>
+              {AppName} Data Request
+            </Text>
+            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+              <Icon name="close" size={24} color="#000" />
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView style={styles.scrollContent}>
+            <Text style={styles.description}>
+              {AppName} is requesting access to the following data:
+            </Text>
+            {renderPermissions()}
+          </ScrollView>
+
+          <View style={styles.footer}>
+            <TouchableOpacity
+              style={[styles.button, styles.cancelButton]}
+              onPress={onClose}
+            >
+              <Text style={styles.cancelButtonText}>Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.button, styles.acceptButton]}
+              onPress={onAccept}
+            >
+              <Text style={styles.acceptButtonText}>Accept</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    width: '90%',
+    maxHeight: '80%',
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: COLORS.headerBg,
+  },
+  headerTitle: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: '#000',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  description: {
+    fontSize: 16,
+    color: COLORS.text.secondary,
+    marginBottom: 16,
+  },
+  platformContainer: {
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    borderRadius: 8,
+    padding: 12,
+  },
+  platformHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  platformName: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginLeft: 8,
+  },
+  permissionsContainer: {
+    marginLeft: 32,
+  },
+  permissionText: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 4,
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: COLORS.border,
+    justifyContent: 'flex-end',
+  },
+  button: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+    marginLeft: 12,
+  },
+  cancelButton: {
+    backgroundColor: COLORS.border,
+  },
+  acceptButton: {
+    backgroundColor: COLORS.primary,
+  },
+  cancelButtonText: {
+    color: COLORS.text.secondary,
+    fontWeight: '600',
+  },
+  acceptButtonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+}); 

package/src/components/Notification.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Animated } from 'react-native';
+
+const Notification = ({ message, color = 'blue', duration = 3000, onClose }) => {
+  const [fadeAnim] = useState(new Animated.Value(0));
+  
+  useEffect(() => {
+    // Fade in
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+    
+    // Set timeout to fade out
+    const timer = setTimeout(() => {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start(() => {
+        if (onClose) onClose();
+      });
+    }, duration);
+    
+    return () => clearTimeout(timer);
+  }, []);
+  
+  // Determine background color based on the color prop
+  const getBackgroundColor = () => {
+    switch (color) {
+      case 'red':
+        return '#FFEBEE';
+      case 'green':
+        return '#E8F5E9';
+      case 'yellow':
+        return '#FFF8E1';
+      default:
+        return '#E3F2FD';
+    }
+  };
+  
+  // Determine text color based on the color prop
+  const getTextColor = () => {
+    switch (color) {
+      case 'red':
+        return '#D32F2F';
+      case 'green':
+        return '#388E3C';
+      case 'yellow':
+        return '#F57F17';
+      default:
+        return '#1976D2';
+    }
+  };
+  
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          backgroundColor: getBackgroundColor(),
+          opacity: fadeAnim,
+          transform: [
+            {
+              translateY: fadeAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-20, 0],
+              }),
+            },
+          ],
+        },
+      ]}
+    >
+      <Text style={[styles.message, { color: getTextColor() }]}>{message}</Text>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 40,
+    left: 20,
+    right: 20,
+    padding: 16,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+    zIndex: 1000,
+  },
+  message: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+
+export default Notification;