@onairos/react-native 3.6.8 → 3.6.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +423 -423
- package/lib/commonjs/api/index.js +1 -1
- package/lib/commonjs/assets/images/Checkbox.svg +3 -3
- package/lib/commonjs/assets/images/EnochE.svg +19 -19
- package/lib/commonjs/assets/images/Personalityprofile.svg +3 -3
- package/lib/commonjs/assets/images/Personalitytraits.svg +3 -3
- package/lib/commonjs/assets/images/Userpreferences.svg +3 -3
- package/lib/commonjs/assets/images/arrow.svg +20 -20
- package/lib/commonjs/assets/images/basicproficon.svg +43 -43
- package/lib/commonjs/assets/images/basicprofile.svg +3 -3
- package/lib/commonjs/assets/images/checkmark.svg +4 -4
- package/lib/commonjs/assets/images/contentanalysis.svg +3 -3
- package/lib/commonjs/assets/images/contenticon.svg +23 -23
- package/lib/commonjs/assets/images/personalityicon.svg +18 -18
- package/lib/commonjs/assets/images/x-close.svg +3 -3
- package/lib/commonjs/components/BodyText.js +1 -1
- package/lib/commonjs/components/BrandMark.js +1 -1
- package/lib/commonjs/components/CodeInput.js +1 -1
- package/lib/commonjs/components/EmailInput.js +1 -1
- package/lib/commonjs/components/GoogleButton.js +1 -1
- package/lib/commonjs/components/HeadingGroup.js +1 -1
- package/lib/commonjs/components/LLMDataInputModal.js +1 -1
- package/lib/commonjs/components/ModalHeader.js +1 -1
- package/lib/commonjs/components/ModalSheet.js +1 -1
- package/lib/commonjs/components/Onairos.js +1 -1
- package/lib/commonjs/components/OnairosButton.js +1 -1
- package/lib/commonjs/components/OnairosSignInButton.js +1 -1
- package/lib/commonjs/components/Overlay.js +1 -1
- package/lib/commonjs/components/PersonaImage.js +1 -1
- package/lib/commonjs/components/PersonaLoadingScreen.js +1 -1
- package/lib/commonjs/components/PersonalizationConsentScreen.js +1 -1
- package/lib/commonjs/components/PinCreationScreen.js +1 -1
- package/lib/commonjs/components/PinInput.js +1 -1
- package/lib/commonjs/components/PlatformConnectorsStep.js +1 -1
- package/lib/commonjs/components/PlatformList.js +1 -1
- package/lib/commonjs/components/PlatformToggle.js +1 -1
- package/lib/commonjs/components/PrimaryButton.js +1 -1
- package/lib/commonjs/components/SignInMatchAnimation.js +1 -1
- package/lib/commonjs/components/SignInStep.js +1 -1
- package/lib/commonjs/components/UniversalOnboarding.js +1 -1
- package/lib/commonjs/components/VerificationStep.js +1 -1
- package/lib/commonjs/components/WelcomeScreen.js +1 -1
- package/lib/commonjs/components/icons/Basicproficon.js +1 -1
- package/lib/commonjs/components/icons/Basicprofile.js +1 -1
- package/lib/commonjs/components/icons/Checkbox.js +1 -1
- package/lib/commonjs/components/icons/Checkmark.js +1 -1
- package/lib/commonjs/components/icons/Contentanalysis.js +1 -1
- package/lib/commonjs/components/icons/Contenticon.js +1 -1
- package/lib/commonjs/components/icons/EnochE.js +1 -1
- package/lib/commonjs/components/icons/Personalityicon.js +1 -1
- package/lib/commonjs/components/icons/Personalityprofile.js +1 -1
- package/lib/commonjs/components/icons/Personalitytraits.js +1 -1
- package/lib/commonjs/components/icons/Userpreferences.js +1 -1
- package/lib/commonjs/components/icons/index.js +1 -1
- package/lib/commonjs/components/onboarding/OAuthWebView.js +1 -1
- package/lib/commonjs/components/onboarding/OnboardingHeader.js +1 -1
- package/lib/commonjs/components/onboarding/PinInput.js +1 -1
- package/lib/commonjs/components/onboarding/PlatformConnector.js +1 -1
- package/lib/commonjs/config/PLATFORM_APIS.md +559 -0
- package/lib/commonjs/config/api.js +1 -1
- package/lib/commonjs/config/telegramConfig.js +8 -0
- package/lib/commonjs/config/webchangelog/md +607 -0
- package/lib/commonjs/constants/index.js +1 -1
- package/lib/commonjs/context/AuthContext.js +1 -1
- package/lib/commonjs/hooks/useConnectedAccounts.js +1 -1
- package/lib/commonjs/hooks/useConnections.js +1 -1
- package/lib/commonjs/hooks/useCredentials.js +1 -1
- package/lib/commonjs/hooks/useUserConnections.js +1 -1
- package/lib/commonjs/index.js +1 -1
- package/lib/commonjs/services/SDK_API_KEY_VALIDATION.md +421 -421
- package/lib/commonjs/services/apiClient.js +1 -1
- package/lib/commonjs/services/apiKeyService.js +99 -99
- package/lib/commonjs/services/authService.js +72 -72
- package/lib/commonjs/services/biometricPinService.js +1 -1
- package/lib/commonjs/services/chatGPTConversationExtractor.js +1 -1
- package/lib/commonjs/services/chatGPTConversationService.js +1 -1
- package/lib/commonjs/services/claudeConversationExtractor.js +1 -1
- package/lib/commonjs/services/claudeConversationService.js +1 -1
- package/lib/commonjs/services/connectedAccountsService.js +1 -1
- package/lib/commonjs/services/googleAuthService.js +1 -1
- package/lib/commonjs/services/hingeDataExtractor.js +1 -1
- package/lib/commonjs/services/hingeDataService.js +1 -1
- package/lib/commonjs/services/imageCompressionService.js +1 -1
- package/lib/commonjs/services/instagramDataExtractor.js +1 -1
- package/lib/commonjs/services/instagramDataService.js +1 -1
- package/lib/commonjs/services/jwtStorageService.js +1 -1
- package/lib/commonjs/services/linkedinDOMExtractor.js +1 -1
- package/lib/commonjs/services/linkedinProfileService.js +1 -1
- package/lib/commonjs/services/linkedinScrapingService.js +1 -1
- package/lib/commonjs/services/llmDataStorage.js +1 -1
- package/lib/commonjs/services/mobileTrainingService.js +1 -1
- package/lib/commonjs/services/oauthService.js +20 -20
- package/lib/commonjs/services/pinEncryptionService.js +1 -1
- package/lib/commonjs/services/pinStorageUtils.js +1 -1
- package/lib/commonjs/services/platformAuthService.js +1 -1
- package/lib/commonjs/services/sephoraDataExtractor.js +1 -1
- package/lib/commonjs/services/sephoraDataService.js +1 -1
- package/lib/commonjs/services/storageService.js +1 -1
- package/lib/commonjs/services/telegramDataExtractor.js +1 -1
- package/lib/commonjs/services/telegramDataService.js +1 -1
- package/lib/commonjs/services/trainingApiHelpers.js +1 -1
- package/lib/commonjs/services/userConnectionsService.js +1 -1
- package/lib/commonjs/services/youtubeMigrationService.js +1 -1
- package/lib/commonjs/theme/index.js +1 -1
- package/lib/commonjs/types/index.js +1 -1
- package/lib/commonjs/types.js +1 -1
- package/lib/commonjs/utils/Portal.js +1 -1
- package/lib/commonjs/utils/api.js +1 -1
- package/lib/commonjs/utils/assetRegistry.js +1 -1
- package/lib/commonjs/utils/auth.js +1 -1
- package/lib/commonjs/utils/connectorTests.js +1 -1
- package/lib/commonjs/utils/crypto.js +1 -1
- package/lib/commonjs/utils/debugHelper.js +1 -1
- package/lib/commonjs/utils/encryption.js +1 -1
- package/lib/commonjs/utils/eventUtils.js +1 -1
- package/lib/commonjs/utils/haptics.js +1 -1
- package/lib/commonjs/utils/imagePreloader.js +1 -1
- package/lib/commonjs/utils/networkDiagnostics.js +1 -1
- package/lib/commonjs/utils/onairosApi.js +1 -1
- package/lib/commonjs/utils/programmaticFlow.js +1 -1
- package/lib/commonjs/utils/retryHelper.js +1 -1
- package/lib/commonjs/utils/secureStorage.js +1 -1
- package/lib/commonjs/utils/webviewScripts/chatgpt.js +1 -1
- package/lib/commonjs/utils/webviewScripts/claude.js +1 -1
- package/lib/commonjs/utils/webviewScripts/hinge.js +1 -1
- package/lib/commonjs/utils/webviewScripts/index.js +1 -1
- package/lib/commonjs/utils/webviewScripts/instagram.js +1 -1
- package/lib/commonjs/utils/webviewScripts/linkedin.js +1 -1
- package/lib/commonjs/utils/webviewScripts/sephora.js +1 -1
- package/lib/commonjs/utils/webviewScripts/telegram.js +1 -1
- package/lib/module/api/index.js +1 -1
- package/lib/module/assets/images/Checkbox.svg +3 -3
- package/lib/module/assets/images/EnochE.svg +19 -19
- package/lib/module/assets/images/Personalityprofile.svg +3 -3
- package/lib/module/assets/images/Personalitytraits.svg +3 -3
- package/lib/module/assets/images/Userpreferences.svg +3 -3
- package/lib/module/assets/images/arrow.svg +20 -20
- package/lib/module/assets/images/basicproficon.svg +43 -43
- package/lib/module/assets/images/basicprofile.svg +3 -3
- package/lib/module/assets/images/checkmark.svg +4 -4
- package/lib/module/assets/images/contentanalysis.svg +3 -3
- package/lib/module/assets/images/contenticon.svg +23 -23
- package/lib/module/assets/images/personalityicon.svg +18 -18
- package/lib/module/assets/images/x-close.svg +3 -3
- package/lib/module/components/BodyText.js +1 -1
- package/lib/module/components/BrandMark.js +1 -1
- package/lib/module/components/CodeInput.js +1 -1
- package/lib/module/components/EmailInput.js +1 -1
- package/lib/module/components/GoogleButton.js +1 -1
- package/lib/module/components/HeadingGroup.js +1 -1
- package/lib/module/components/LLMDataInputModal.js +1 -1
- package/lib/module/components/ModalHeader.js +1 -1
- package/lib/module/components/ModalSheet.js +1 -1
- package/lib/module/components/Onairos.js +1 -1
- package/lib/module/components/OnairosButton.js +1 -1
- package/lib/module/components/OnairosSignInButton.js +1 -1
- package/lib/module/components/Overlay.js +1 -1
- package/lib/module/components/PersonaImage.js +1 -1
- package/lib/module/components/PersonaLoadingScreen.js +1 -1
- package/lib/module/components/PersonalizationConsentScreen.js +1 -1
- package/lib/module/components/PinCreationScreen.js +1 -1
- package/lib/module/components/PinInput.js +1 -1
- package/lib/module/components/PlatformConnectorsStep.js +1 -1
- package/lib/module/components/PlatformList.js +1 -1
- package/lib/module/components/PlatformToggle.js +1 -1
- package/lib/module/components/PrimaryButton.js +1 -1
- package/lib/module/components/SignInMatchAnimation.js +1 -1
- package/lib/module/components/SignInStep.js +1 -1
- package/lib/module/components/UniversalOnboarding.js +1 -1
- package/lib/module/components/VerificationStep.js +1 -1
- package/lib/module/components/WelcomeScreen.js +1 -1
- package/lib/module/components/icons/Basicproficon.js +1 -1
- package/lib/module/components/icons/Basicprofile.js +1 -1
- package/lib/module/components/icons/Checkbox.js +1 -1
- package/lib/module/components/icons/Checkmark.js +1 -1
- package/lib/module/components/icons/Contentanalysis.js +1 -1
- package/lib/module/components/icons/Contenticon.js +1 -1
- package/lib/module/components/icons/EnochE.js +1 -1
- package/lib/module/components/icons/Personalityicon.js +1 -1
- package/lib/module/components/icons/Personalityprofile.js +1 -1
- package/lib/module/components/icons/Personalitytraits.js +1 -1
- package/lib/module/components/icons/Userpreferences.js +1 -1
- package/lib/module/components/onboarding/OAuthWebView.js +1 -1
- package/lib/module/components/onboarding/OnboardingHeader.js +1 -1
- package/lib/module/components/onboarding/PinInput.js +1 -1
- package/lib/module/components/onboarding/PlatformConnector.js +1 -1
- package/lib/module/config/PLATFORM_APIS.md +559 -0
- package/lib/module/config/api.js +1 -1
- package/lib/module/config/telegramConfig.js +8 -0
- package/lib/module/config/webchangelog/md +607 -0
- package/lib/module/constants/index.js +1 -1
- package/lib/module/context/AuthContext.js +1 -1
- package/lib/module/hooks/useConnectedAccounts.js +1 -1
- package/lib/module/hooks/useConnections.js +1 -1
- package/lib/module/hooks/useCredentials.js +1 -1
- package/lib/module/hooks/useUserConnections.js +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/services/SDK_API_KEY_VALIDATION.md +421 -421
- package/lib/module/services/apiClient.js +1 -1
- package/lib/module/services/apiKeyService.js +99 -99
- package/lib/module/services/authService.js +72 -72
- package/lib/module/services/biometricPinService.js +1 -1
- package/lib/module/services/chatGPTConversationExtractor.js +1 -1
- package/lib/module/services/chatGPTConversationService.js +1 -1
- package/lib/module/services/claudeConversationExtractor.js +1 -1
- package/lib/module/services/claudeConversationService.js +1 -1
- package/lib/module/services/connectedAccountsService.js +1 -1
- package/lib/module/services/googleAuthService.js +1 -1
- package/lib/module/services/hingeDataExtractor.js +1 -1
- package/lib/module/services/hingeDataService.js +1 -1
- package/lib/module/services/imageCompressionService.js +1 -1
- package/lib/module/services/instagramDataExtractor.js +1 -1
- package/lib/module/services/instagramDataService.js +1 -1
- package/lib/module/services/jwtStorageService.js +1 -1
- package/lib/module/services/linkedinDOMExtractor.js +1 -1
- package/lib/module/services/linkedinProfileService.js +1 -1
- package/lib/module/services/linkedinScrapingService.js +1 -1
- package/lib/module/services/llmDataStorage.js +1 -1
- package/lib/module/services/mobileTrainingService.js +1 -1
- package/lib/module/services/oauthService.js +20 -20
- package/lib/module/services/pinEncryptionService.js +1 -1
- package/lib/module/services/pinStorageUtils.js +1 -1
- package/lib/module/services/platformAuthService.js +1 -1
- package/lib/module/services/sephoraDataExtractor.js +1 -1
- package/lib/module/services/sephoraDataService.js +1 -1
- package/lib/module/services/storageService.js +1 -1
- package/lib/module/services/telegramDataExtractor.js +1 -1
- package/lib/module/services/telegramDataService.js +1 -1
- package/lib/module/services/trainingApiHelpers.js +1 -1
- package/lib/module/services/userConnectionsService.js +1 -1
- package/lib/module/services/youtubeMigrationService.js +1 -1
- package/lib/module/theme/index.js +1 -1
- package/lib/module/types.js +1 -1
- package/lib/module/utils/Portal.js +1 -1
- package/lib/module/utils/api.js +1 -1
- package/lib/module/utils/assetRegistry.js +1 -1
- package/lib/module/utils/auth.js +1 -1
- package/lib/module/utils/connectorTests.js +1 -1
- package/lib/module/utils/crypto.js +1 -1
- package/lib/module/utils/debugHelper.js +1 -1
- package/lib/module/utils/encryption.js +1 -1
- package/lib/module/utils/eventUtils.js +1 -1
- package/lib/module/utils/haptics.js +1 -1
- package/lib/module/utils/networkDiagnostics.js +1 -1
- package/lib/module/utils/onairosApi.js +1 -1
- package/lib/module/utils/programmaticFlow.js +1 -1
- package/lib/module/utils/retryHelper.js +1 -1
- package/lib/module/utils/secureStorage.js +1 -1
- package/lib/module/utils/webviewScripts/chatgpt.js +1 -1
- package/lib/module/utils/webviewScripts/claude.js +1 -1
- package/lib/module/utils/webviewScripts/hinge.js +1 -1
- package/lib/module/utils/webviewScripts/index.js +1 -1
- package/lib/module/utils/webviewScripts/instagram.js +1 -1
- package/lib/module/utils/webviewScripts/linkedin.js +1 -1
- package/lib/module/utils/webviewScripts/sephora.js +1 -1
- package/lib/module/utils/webviewScripts/telegram.js +1 -1
- package/package.json +172 -172
package/README.md
CHANGED
|
@@ -1,424 +1,424 @@
|
|
|
1
|
-
# Onairos React Native SDK
|
|
2
|
-
|
|
3
|
-
A React Native SDK for integrating Onairos authentication and AI model training into your mobile applications. This package provides a complete solution for social media platform connection, secure authentication, and AI model training.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Universal onboarding flow with multi-platform support
|
|
8
|
-
- Multi-platform OAuth authentication (Pinterest, YouTube, LinkedIn, Gmail, Reddit)
|
|
9
|
-
- Real-time AI model training with Socket.io integration
|
|
10
|
-
- Secure credential management with biometric authentication
|
|
11
|
-
- PIN-based security with validation and encryption
|
|
12
|
-
- Deep linking support for OAuth callbacks
|
|
13
|
-
- Email verification and account management
|
|
14
|
-
- Existing user detection and data confirmation
|
|
15
|
-
- Background training optimization
|
|
16
|
-
- Comprehensive error handling and retry logic
|
|
17
|
-
- Haptic feedback integration
|
|
18
|
-
- Customizable UI components
|
|
19
|
-
- Full TypeScript support
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install @onairos/react-native
|
|
25
|
-
# or
|
|
26
|
-
yarn add @onairos/react-native
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## 🎯 Example App
|
|
30
|
-
|
|
31
|
-
A complete example app is available in the `example/` directory demonstrating real-world SDK integration:
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
cd example
|
|
35
|
-
npm install
|
|
36
|
-
npm run ios # or npm run android
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
The example app showcases:
|
|
40
|
-
- ✅ SDK initialization and configuration
|
|
41
|
-
- ✅ OnairosButton component integration
|
|
42
|
-
- ✅ WelcomeScreen component usage
|
|
43
|
-
- ✅ Custom styling options
|
|
44
|
-
- ✅ JWT token handling and user data extraction
|
|
45
|
-
- ✅ Error handling and debugging
|
|
46
|
-
|
|
47
|
-
See [`example/README.md`](./example/README.md) for detailed setup instructions.
|
|
48
|
-
|
|
49
|
-
### TypeScript Support
|
|
50
|
-
|
|
51
|
-
The package includes full TypeScript declarations. Import types directly:
|
|
52
|
-
|
|
53
|
-
```typescript
|
|
54
|
-
import { OnairosButton, OnairosCredentials, PlatformConfig } from '@onairos/react-native';
|
|
55
|
-
|
|
56
|
-
// Type your component props
|
|
57
|
-
const MyComponent: React.FC<{ credentials: OnairosCredentials }> = ({ credentials }) => {
|
|
58
|
-
// Your component code
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
// Type your handlers
|
|
62
|
-
const handleResolved = (apiUrl: string, accessToken: string, loginDetails: any) => {
|
|
63
|
-
console.log('Authentication successful:', { apiUrl, accessToken, loginDetails });
|
|
64
|
-
};
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
### Required Dependencies
|
|
68
|
-
|
|
69
|
-
The package requires the following dependencies:
|
|
70
|
-
|
|
71
|
-
```bash
|
|
72
|
-
# Core dependencies
|
|
73
|
-
yarn add @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-safe-area-context
|
|
74
|
-
|
|
75
|
-
# Authentication dependencies
|
|
76
|
-
yarn add react-native-webview react-native-keychain
|
|
77
|
-
|
|
78
|
-
# UI dependencies
|
|
79
|
-
yarn add react-native-vector-icons
|
|
80
|
-
|
|
81
|
-
# Network and encryption
|
|
82
|
-
yarn add @react-native-community/netinfo react-native-rsa-native react-native-crypto-js
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### iOS Setup
|
|
86
|
-
|
|
87
|
-
1. Install pods:
|
|
88
|
-
```bash
|
|
89
|
-
cd ios && pod install
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
2. Add the following to your `Info.plist`:
|
|
93
|
-
```xml
|
|
94
|
-
<key>CFBundleURLTypes</key>
|
|
95
|
-
<array>
|
|
96
|
-
<dict>
|
|
97
|
-
<key>CFBundleURLSchemes</key>
|
|
98
|
-
<array>
|
|
99
|
-
<!-- <string>onairosreact</string> -->
|
|
100
|
-
<string>onairosanime</string>
|
|
101
|
-
</array>
|
|
102
|
-
</dict>
|
|
103
|
-
</array>
|
|
104
|
-
|
|
105
|
-
<!-- Add for biometric authentication -->
|
|
106
|
-
<key>NSFaceIDUsageDescription</key>
|
|
107
|
-
<string>We use Face ID to securely access your Onairos account</string>
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
3. Configure your OAuth providers in the project settings and register the callback URLs.
|
|
111
|
-
|
|
112
|
-
### Android Setup
|
|
113
|
-
|
|
114
|
-
1. Add the following to your `android/app/src/main/AndroidManifest.xml`:
|
|
115
|
-
```xml
|
|
116
|
-
<activity>
|
|
117
|
-
<!-- ... -->
|
|
118
|
-
<intent-filter>
|
|
119
|
-
<action android:name="android.intent.action.VIEW" />
|
|
120
|
-
<category android:name="android.intent.category.DEFAULT" />
|
|
121
|
-
<category android:name="android.intent.category.BROWSABLE" />
|
|
122
|
-
<!-- <data android:scheme="onairosreact" /> -->
|
|
123
|
-
<data android:scheme="onairosanime" />
|
|
124
|
-
</intent-filter>
|
|
125
|
-
</activity>
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
2. Add biometric permissions:
|
|
129
|
-
```xml
|
|
130
|
-
<uses-permission android:name="android.permission.USE_BIOMETRIC" />
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
## Usage
|
|
134
|
-
|
|
135
|
-
📖 **[Quick Integration Guide](./QUICK_INTEGRATION_GUIDE.md) - Start here for immediate copy-paste setup!**
|
|
136
|
-
|
|
137
|
-
📖 **For comprehensive usage examples in both JavaScript and TypeScript, see [USAGE_EXAMPLES.md](./USAGE_EXAMPLES.md)**
|
|
138
|
-
|
|
139
|
-
### Important: Setup Portal Host
|
|
140
|
-
|
|
141
|
-
For modals and overlays to appear properly, you must wrap your app with the `PortalHost` component:
|
|
142
|
-
|
|
143
|
-
```javascript
|
|
144
|
-
import { PortalHost } from '@onairos/react-native';
|
|
145
|
-
|
|
146
|
-
export default function App() {
|
|
147
|
-
return (
|
|
148
|
-
<PortalHost>
|
|
149
|
-
{/* Your app content goes here */}
|
|
150
|
-
<MainNavigator />
|
|
151
|
-
</PortalHost>
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Basic Button Integration
|
|
157
|
-
|
|
158
|
-
1. Import the OnairosButton component:
|
|
159
|
-
```javascript
|
|
160
|
-
import { OnairosButton } from '@onairos/react-native';
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
2. Use the component in your app:
|
|
164
|
-
```javascript
|
|
165
|
-
export default function App() {
|
|
166
|
-
const handleResolved = (apiUrl, accessToken, loginDetails) => {
|
|
167
|
-
console.log('Authentication successful:', { apiUrl, accessToken, loginDetails });
|
|
168
|
-
// Store the tokens and proceed with your app logic
|
|
169
|
-
};
|
|
170
|
-
|
|
171
|
-
return (
|
|
172
|
-
<View style={styles.container}>
|
|
173
|
-
<OnairosButton
|
|
174
|
-
AppName="YourApp"
|
|
175
|
-
requestData={{
|
|
176
|
-
"Social Media": {
|
|
177
|
-
"Profile Information": "Access to your basic profile data",
|
|
178
|
-
"Post History": "Access to your post history for analysis"
|
|
179
|
-
},
|
|
180
|
-
"Content": {
|
|
181
|
-
"Images": "Access to image data for AI training",
|
|
182
|
-
"Text": "Access to text data for AI training"
|
|
183
|
-
}
|
|
184
|
-
}}
|
|
185
|
-
returnLink="your-app://auth-callback"
|
|
186
|
-
onResolved={handleResolved}
|
|
187
|
-
buttonType="pill"
|
|
188
|
-
color="#00BFA5"
|
|
189
|
-
/>
|
|
190
|
-
</View>
|
|
191
|
-
);
|
|
192
|
-
}
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
### Initialize OAuth Service
|
|
196
|
-
|
|
197
|
-
Add this to your app's entry point to handle deep linking for OAuth:
|
|
198
|
-
|
|
199
|
-
```javascript
|
|
200
|
-
import { initializeOAuthService } from '@onairos/react-native';
|
|
201
|
-
|
|
202
|
-
// In your app's entry point
|
|
203
|
-
useEffect(() => {
|
|
204
|
-
// Set up OAuth deep linking
|
|
205
|
-
initializeOAuthService();
|
|
206
|
-
|
|
207
|
-
// Clean up when component unmounts
|
|
208
|
-
return () => {
|
|
209
|
-
cleanupOAuthService();
|
|
210
|
-
};
|
|
211
|
-
}, []);
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
### Working with Secure Storage
|
|
215
|
-
|
|
216
|
-
```javascript
|
|
217
|
-
import { storeCredentials, getCredentials, hasCredentials } from '@onairos/react-native';
|
|
218
|
-
|
|
219
|
-
// Check if user has stored credentials
|
|
220
|
-
const checkAuth = async () => {
|
|
221
|
-
const hasExisting = await hasCredentials();
|
|
222
|
-
|
|
223
|
-
if (hasExisting) {
|
|
224
|
-
// Get credentials with biometric authentication
|
|
225
|
-
const credentials = await getCredentials({
|
|
226
|
-
useBiometrics: true,
|
|
227
|
-
biometricPrompt: {
|
|
228
|
-
title: 'Authenticate to continue',
|
|
229
|
-
subtitle: 'Please verify your identity'
|
|
230
|
-
}
|
|
231
|
-
});
|
|
232
|
-
|
|
233
|
-
if (credentials) {
|
|
234
|
-
// User is authenticated
|
|
235
|
-
console.log('User authenticated:', credentials.username);
|
|
236
|
-
}
|
|
237
|
-
} else {
|
|
238
|
-
// Redirect to onboarding flow
|
|
239
|
-
setShowOnboarding(true);
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
## API Reference
|
|
245
|
-
|
|
246
|
-
### Main Components
|
|
247
|
-
|
|
248
|
-
#### `OnairosButton`
|
|
249
|
-
|
|
250
|
-
The main entry point for Onairos authentication with full training flow support.
|
|
251
|
-
|
|
252
|
-
| Prop | Type | Required | Description |
|
|
253
|
-
|------|------|----------|-------------|
|
|
254
|
-
| AppName | string | Yes | Your application name |
|
|
255
|
-
| requestData | object | Yes | Platform-specific OAuth scopes and data requests |
|
|
256
|
-
| returnLink | string | Yes | Deep link URL for OAuth callback |
|
|
257
|
-
| embedd | boolean | No | Whether to use embedded flow (default: false) |
|
|
258
|
-
| color | string | No | Button color (default: #00BFA5) |
|
|
259
|
-
| icon | string | No | Button icon name (default: 'auto_awesome') |
|
|
260
|
-
| onResolved | function | Yes | Callback for successful auth with (apiUrl, accessToken, loginDetails) |
|
|
261
|
-
| login | boolean | No | Enable login mode (default: false) |
|
|
262
|
-
| buttonType | 'circle' \| 'pill' | No | Button style (default: 'circle') |
|
|
263
|
-
| debug | boolean | No | Enable debug mode (default: false) |
|
|
264
|
-
| test | boolean | No | Enable test mode (default: false) |
|
|
265
|
-
|
|
266
|
-
#### `UniversalOnboarding`
|
|
267
|
-
|
|
268
|
-
The universal onboarding flow component.
|
|
269
|
-
|
|
270
|
-
| Prop | Type | Required | Description |
|
|
271
|
-
|------|------|----------|-------------|
|
|
272
|
-
| visible | boolean | Yes | Whether the onboarding is visible |
|
|
273
|
-
| onClose | function | Yes | Callback when onboarding is closed |
|
|
274
|
-
| AppName | string | Yes | Your application name |
|
|
275
|
-
| requestData | object | Yes | Platform-specific OAuth scopes |
|
|
276
|
-
| returnLink | string | Yes | Deep link URL for OAuth callback |
|
|
277
|
-
| onComplete | function | Yes | Callback when onboarding is complete |
|
|
278
|
-
| embedd | boolean | No | Whether to use embedded flow |
|
|
279
|
-
| debug | boolean | No | Enable debug mode |
|
|
280
|
-
| test | boolean | No | Enable test mode |
|
|
281
|
-
|
|
282
|
-
#### `TrainingModal`
|
|
283
|
-
|
|
284
|
-
Email authentication and training progress modal.
|
|
285
|
-
|
|
286
|
-
| Prop | Type | Required | Description |
|
|
287
|
-
|------|------|----------|-------------|
|
|
288
|
-
| visible | boolean | Yes | Whether the modal is visible |
|
|
289
|
-
| onCancel | function | Yes | Callback when modal is cancelled |
|
|
290
|
-
| onComplete | function | Yes | Callback when training is complete |
|
|
291
|
-
| modelKey | string | No | Model key for training |
|
|
292
|
-
| username | string | No | Username for training |
|
|
293
|
-
| isPrimaryAuth | boolean | No | Whether this is primary authentication |
|
|
294
|
-
| autoFocusEmailInput | boolean | No | Auto-focus email input on show |
|
|
295
|
-
|
|
296
|
-
#### `WelcomeScreen`
|
|
297
|
-
|
|
298
|
-
New welcome flow component with modern UI.
|
|
299
|
-
|
|
300
|
-
| Prop | Type | Required | Description |
|
|
301
|
-
|------|------|----------|-------------|
|
|
302
|
-
| visible | boolean | Yes | Whether the screen is visible |
|
|
303
|
-
| onClose | function | Yes | Callback when screen is closed |
|
|
304
|
-
| onComplete | function | Yes | Callback when flow is complete |
|
|
305
|
-
|
|
306
|
-
#### `Overlay`
|
|
307
|
-
|
|
308
|
-
Data request overlay component.
|
|
309
|
-
|
|
310
|
-
| Prop | Type | Required | Description |
|
|
311
|
-
|------|------|----------|-------------|
|
|
312
|
-
| visible | boolean | Yes | Whether the overlay is visible |
|
|
313
|
-
| onClose | function | Yes | Callback when overlay is closed |
|
|
314
|
-
| onAccept | function | Yes | Callback when request is accepted |
|
|
315
|
-
| AppName | string | Yes | Your application name |
|
|
316
|
-
| requestData | object | Yes | Data being requested |
|
|
317
|
-
| biometricType | 'FaceID' \| 'TouchID' \| 'BiometricID' | No | Type of biometric auth to use |
|
|
318
|
-
|
|
319
|
-
### Utility Functions
|
|
320
|
-
|
|
321
|
-
#### Secure Storage
|
|
322
|
-
|
|
323
|
-
- `storeCredentials(credentials, options)`: Store credentials securely
|
|
324
|
-
- `getCredentials(options)`: Retrieve credentials with optional biometric auth
|
|
325
|
-
- `hasCredentials()`: Check if user has stored credentials
|
|
326
|
-
- `deleteCredentials()`: Delete stored credentials
|
|
327
|
-
- `updateCredentials(updates, options)`: Update specific fields in credentials
|
|
328
|
-
- `generateDeviceUsername()`: Generate a device-specific unique username
|
|
329
|
-
- `verifyCredentials(credentials)`: Verify if credentials are valid
|
|
330
|
-
|
|
331
|
-
#### OAuth Service
|
|
332
|
-
|
|
333
|
-
- `connectPlatform(platform)`: Initiate OAuth flow for a specific platform
|
|
334
|
-
- `disconnectPlatform(platform, credentials)`: Disconnect a platform
|
|
335
|
-
- `initializeOAuthService()`: Initialize OAuth service handlers
|
|
336
|
-
- `cleanupOAuthService()`: Clean up OAuth service handlers
|
|
337
|
-
- `storePlatformConnection(platform, connectionData, credentials)`: Store platform connection
|
|
338
|
-
|
|
339
|
-
#### API Communication
|
|
340
|
-
|
|
341
|
-
- `validateCredentials(username, options)`: Validate user credentials with the API
|
|
342
|
-
- `createAccount(credentials, options)`: Create a new user account
|
|
343
|
-
- `authenticate(credentials, options)`: Authenticate with the API using credentials
|
|
344
|
-
- `refreshToken(refreshToken, options)`: Refresh authentication token
|
|
345
|
-
- `getPlatformData(accessToken, platform, options)`: Get user's connected platform data
|
|
346
|
-
- `getUserProfile(accessToken, options)`: Get user profile information
|
|
347
|
-
- `updatePlatformConnections(accessToken, platforms, options)`: Update user platform connections
|
|
348
|
-
|
|
349
|
-
## Development and Testing
|
|
350
|
-
|
|
351
|
-
### Setup Development Environment
|
|
352
|
-
|
|
353
|
-
1. Clone the repository:
|
|
354
|
-
```bash
|
|
355
|
-
git clone https://github.com/onairos/onairos-react-native.git
|
|
356
|
-
cd onairos-react-native
|
|
357
|
-
```
|
|
358
|
-
|
|
359
|
-
2. Install dependencies:
|
|
360
|
-
```bash
|
|
361
|
-
yarn install
|
|
362
|
-
```
|
|
363
|
-
|
|
364
|
-
3. Run the typecheck:
|
|
365
|
-
```bash
|
|
366
|
-
yarn typecheck
|
|
367
|
-
```
|
|
368
|
-
|
|
369
|
-
### Building the Package
|
|
370
|
-
|
|
371
|
-
```bash
|
|
372
|
-
npm run build:all
|
|
373
|
-
```
|
|
374
|
-
|
|
375
|
-
### Testing with a Local App
|
|
376
|
-
|
|
377
|
-
1. Link the package locally:
|
|
378
|
-
```bash
|
|
379
|
-
# In your package directory
|
|
380
|
-
yarn link
|
|
381
|
-
|
|
382
|
-
# In your app directory
|
|
383
|
-
yarn link @onairos/react-native
|
|
384
|
-
```
|
|
385
|
-
|
|
386
|
-
2. Run your app and test the integration.
|
|
387
|
-
|
|
388
|
-
## Troubleshooting
|
|
389
|
-
|
|
390
|
-
### OAuth Callback Issues
|
|
391
|
-
|
|
392
|
-
- Ensure your deep link schemes are properly configured in both iOS and Android
|
|
393
|
-
- Check that the callback URLs match what's registered with your OAuth providers
|
|
394
|
-
- Ensure all required permissions are enabled in your app configurations
|
|
395
|
-
|
|
396
|
-
### Biometric Authentication Issues
|
|
397
|
-
|
|
398
|
-
- Ensure proper permissions are set in Info.plist and AndroidManifest.xml
|
|
399
|
-
- Test on physical devices as simulators may not support all biometric features
|
|
400
|
-
- For iOS, ensure that Face ID/Touch ID is enabled and set up on the device
|
|
401
|
-
|
|
402
|
-
### Platform Specific Issues
|
|
403
|
-
|
|
404
|
-
#### iOS
|
|
405
|
-
|
|
406
|
-
- For keychain issues, check that the Keychain Sharing capability is enabled
|
|
407
|
-
- Ensure the bundle identifier is consistent with your OAuth configuration
|
|
408
|
-
|
|
409
|
-
#### Android
|
|
410
|
-
|
|
411
|
-
- For deep linking issues, check the androidManifest.xml configuration
|
|
412
|
-
- Ensure that biometric hardware is available on test devices
|
|
413
|
-
|
|
414
|
-
## Contributing
|
|
415
|
-
|
|
416
|
-
1. Fork the repository
|
|
417
|
-
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
418
|
-
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
419
|
-
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
420
|
-
5. Open a Pull Request
|
|
421
|
-
|
|
422
|
-
## License
|
|
423
|
-
|
|
1
|
+
# Onairos React Native SDK
|
|
2
|
+
|
|
3
|
+
A React Native SDK for integrating Onairos authentication and AI model training into your mobile applications. This package provides a complete solution for social media platform connection, secure authentication, and AI model training.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Universal onboarding flow with multi-platform support
|
|
8
|
+
- Multi-platform OAuth authentication (Pinterest, YouTube, LinkedIn, Gmail, Reddit)
|
|
9
|
+
- Real-time AI model training with Socket.io integration
|
|
10
|
+
- Secure credential management with biometric authentication
|
|
11
|
+
- PIN-based security with validation and encryption
|
|
12
|
+
- Deep linking support for OAuth callbacks
|
|
13
|
+
- Email verification and account management
|
|
14
|
+
- Existing user detection and data confirmation
|
|
15
|
+
- Background training optimization
|
|
16
|
+
- Comprehensive error handling and retry logic
|
|
17
|
+
- Haptic feedback integration
|
|
18
|
+
- Customizable UI components
|
|
19
|
+
- Full TypeScript support
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @onairos/react-native
|
|
25
|
+
# or
|
|
26
|
+
yarn add @onairos/react-native
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 🎯 Example App
|
|
30
|
+
|
|
31
|
+
A complete example app is available in the `example/` directory demonstrating real-world SDK integration:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
cd example
|
|
35
|
+
npm install
|
|
36
|
+
npm run ios # or npm run android
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
The example app showcases:
|
|
40
|
+
- ✅ SDK initialization and configuration
|
|
41
|
+
- ✅ OnairosButton component integration
|
|
42
|
+
- ✅ WelcomeScreen component usage
|
|
43
|
+
- ✅ Custom styling options
|
|
44
|
+
- ✅ JWT token handling and user data extraction
|
|
45
|
+
- ✅ Error handling and debugging
|
|
46
|
+
|
|
47
|
+
See [`example/README.md`](./example/README.md) for detailed setup instructions.
|
|
48
|
+
|
|
49
|
+
### TypeScript Support
|
|
50
|
+
|
|
51
|
+
The package includes full TypeScript declarations. Import types directly:
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
import { OnairosButton, OnairosCredentials, PlatformConfig } from '@onairos/react-native';
|
|
55
|
+
|
|
56
|
+
// Type your component props
|
|
57
|
+
const MyComponent: React.FC<{ credentials: OnairosCredentials }> = ({ credentials }) => {
|
|
58
|
+
// Your component code
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// Type your handlers
|
|
62
|
+
const handleResolved = (apiUrl: string, accessToken: string, loginDetails: any) => {
|
|
63
|
+
console.log('Authentication successful:', { apiUrl, accessToken, loginDetails });
|
|
64
|
+
};
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Required Dependencies
|
|
68
|
+
|
|
69
|
+
The package requires the following dependencies:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
# Core dependencies
|
|
73
|
+
yarn add @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-safe-area-context
|
|
74
|
+
|
|
75
|
+
# Authentication dependencies
|
|
76
|
+
yarn add react-native-webview react-native-keychain
|
|
77
|
+
|
|
78
|
+
# UI dependencies
|
|
79
|
+
yarn add react-native-vector-icons
|
|
80
|
+
|
|
81
|
+
# Network and encryption
|
|
82
|
+
yarn add @react-native-community/netinfo react-native-rsa-native react-native-crypto-js
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### iOS Setup
|
|
86
|
+
|
|
87
|
+
1. Install pods:
|
|
88
|
+
```bash
|
|
89
|
+
cd ios && pod install
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
2. Add the following to your `Info.plist`:
|
|
93
|
+
```xml
|
|
94
|
+
<key>CFBundleURLTypes</key>
|
|
95
|
+
<array>
|
|
96
|
+
<dict>
|
|
97
|
+
<key>CFBundleURLSchemes</key>
|
|
98
|
+
<array>
|
|
99
|
+
<!-- <string>onairosreact</string> -->
|
|
100
|
+
<string>onairosanime</string>
|
|
101
|
+
</array>
|
|
102
|
+
</dict>
|
|
103
|
+
</array>
|
|
104
|
+
|
|
105
|
+
<!-- Add for biometric authentication -->
|
|
106
|
+
<key>NSFaceIDUsageDescription</key>
|
|
107
|
+
<string>We use Face ID to securely access your Onairos account</string>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
3. Configure your OAuth providers in the project settings and register the callback URLs.
|
|
111
|
+
|
|
112
|
+
### Android Setup
|
|
113
|
+
|
|
114
|
+
1. Add the following to your `android/app/src/main/AndroidManifest.xml`:
|
|
115
|
+
```xml
|
|
116
|
+
<activity>
|
|
117
|
+
<!-- ... -->
|
|
118
|
+
<intent-filter>
|
|
119
|
+
<action android:name="android.intent.action.VIEW" />
|
|
120
|
+
<category android:name="android.intent.category.DEFAULT" />
|
|
121
|
+
<category android:name="android.intent.category.BROWSABLE" />
|
|
122
|
+
<!-- <data android:scheme="onairosreact" /> -->
|
|
123
|
+
<data android:scheme="onairosanime" />
|
|
124
|
+
</intent-filter>
|
|
125
|
+
</activity>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
2. Add biometric permissions:
|
|
129
|
+
```xml
|
|
130
|
+
<uses-permission android:name="android.permission.USE_BIOMETRIC" />
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Usage
|
|
134
|
+
|
|
135
|
+
📖 **[Quick Integration Guide](./QUICK_INTEGRATION_GUIDE.md) - Start here for immediate copy-paste setup!**
|
|
136
|
+
|
|
137
|
+
📖 **For comprehensive usage examples in both JavaScript and TypeScript, see [USAGE_EXAMPLES.md](./USAGE_EXAMPLES.md)**
|
|
138
|
+
|
|
139
|
+
### Important: Setup Portal Host
|
|
140
|
+
|
|
141
|
+
For modals and overlays to appear properly, you must wrap your app with the `PortalHost` component:
|
|
142
|
+
|
|
143
|
+
```javascript
|
|
144
|
+
import { PortalHost } from '@onairos/react-native';
|
|
145
|
+
|
|
146
|
+
export default function App() {
|
|
147
|
+
return (
|
|
148
|
+
<PortalHost>
|
|
149
|
+
{/* Your app content goes here */}
|
|
150
|
+
<MainNavigator />
|
|
151
|
+
</PortalHost>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Basic Button Integration
|
|
157
|
+
|
|
158
|
+
1. Import the OnairosButton component:
|
|
159
|
+
```javascript
|
|
160
|
+
import { OnairosButton } from '@onairos/react-native';
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
2. Use the component in your app:
|
|
164
|
+
```javascript
|
|
165
|
+
export default function App() {
|
|
166
|
+
const handleResolved = (apiUrl, accessToken, loginDetails) => {
|
|
167
|
+
console.log('Authentication successful:', { apiUrl, accessToken, loginDetails });
|
|
168
|
+
// Store the tokens and proceed with your app logic
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
return (
|
|
172
|
+
<View style={styles.container}>
|
|
173
|
+
<OnairosButton
|
|
174
|
+
AppName="YourApp"
|
|
175
|
+
requestData={{
|
|
176
|
+
"Social Media": {
|
|
177
|
+
"Profile Information": "Access to your basic profile data",
|
|
178
|
+
"Post History": "Access to your post history for analysis"
|
|
179
|
+
},
|
|
180
|
+
"Content": {
|
|
181
|
+
"Images": "Access to image data for AI training",
|
|
182
|
+
"Text": "Access to text data for AI training"
|
|
183
|
+
}
|
|
184
|
+
}}
|
|
185
|
+
returnLink="your-app://auth-callback"
|
|
186
|
+
onResolved={handleResolved}
|
|
187
|
+
buttonType="pill"
|
|
188
|
+
color="#00BFA5"
|
|
189
|
+
/>
|
|
190
|
+
</View>
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Initialize OAuth Service
|
|
196
|
+
|
|
197
|
+
Add this to your app's entry point to handle deep linking for OAuth:
|
|
198
|
+
|
|
199
|
+
```javascript
|
|
200
|
+
import { initializeOAuthService } from '@onairos/react-native';
|
|
201
|
+
|
|
202
|
+
// In your app's entry point
|
|
203
|
+
useEffect(() => {
|
|
204
|
+
// Set up OAuth deep linking
|
|
205
|
+
initializeOAuthService();
|
|
206
|
+
|
|
207
|
+
// Clean up when component unmounts
|
|
208
|
+
return () => {
|
|
209
|
+
cleanupOAuthService();
|
|
210
|
+
};
|
|
211
|
+
}, []);
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### Working with Secure Storage
|
|
215
|
+
|
|
216
|
+
```javascript
|
|
217
|
+
import { storeCredentials, getCredentials, hasCredentials } from '@onairos/react-native';
|
|
218
|
+
|
|
219
|
+
// Check if user has stored credentials
|
|
220
|
+
const checkAuth = async () => {
|
|
221
|
+
const hasExisting = await hasCredentials();
|
|
222
|
+
|
|
223
|
+
if (hasExisting) {
|
|
224
|
+
// Get credentials with biometric authentication
|
|
225
|
+
const credentials = await getCredentials({
|
|
226
|
+
useBiometrics: true,
|
|
227
|
+
biometricPrompt: {
|
|
228
|
+
title: 'Authenticate to continue',
|
|
229
|
+
subtitle: 'Please verify your identity'
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
if (credentials) {
|
|
234
|
+
// User is authenticated
|
|
235
|
+
console.log('User authenticated:', credentials.username);
|
|
236
|
+
}
|
|
237
|
+
} else {
|
|
238
|
+
// Redirect to onboarding flow
|
|
239
|
+
setShowOnboarding(true);
|
|
240
|
+
}
|
|
241
|
+
};
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
## API Reference
|
|
245
|
+
|
|
246
|
+
### Main Components
|
|
247
|
+
|
|
248
|
+
#### `OnairosButton`
|
|
249
|
+
|
|
250
|
+
The main entry point for Onairos authentication with full training flow support.
|
|
251
|
+
|
|
252
|
+
| Prop | Type | Required | Description |
|
|
253
|
+
|------|------|----------|-------------|
|
|
254
|
+
| AppName | string | Yes | Your application name |
|
|
255
|
+
| requestData | object | Yes | Platform-specific OAuth scopes and data requests |
|
|
256
|
+
| returnLink | string | Yes | Deep link URL for OAuth callback |
|
|
257
|
+
| embedd | boolean | No | Whether to use embedded flow (default: false) |
|
|
258
|
+
| color | string | No | Button color (default: #00BFA5) |
|
|
259
|
+
| icon | string | No | Button icon name (default: 'auto_awesome') |
|
|
260
|
+
| onResolved | function | Yes | Callback for successful auth with (apiUrl, accessToken, loginDetails) |
|
|
261
|
+
| login | boolean | No | Enable login mode (default: false) |
|
|
262
|
+
| buttonType | 'circle' \| 'pill' | No | Button style (default: 'circle') |
|
|
263
|
+
| debug | boolean | No | Enable debug mode (default: false) |
|
|
264
|
+
| test | boolean | No | Enable test mode (default: false) |
|
|
265
|
+
|
|
266
|
+
#### `UniversalOnboarding`
|
|
267
|
+
|
|
268
|
+
The universal onboarding flow component.
|
|
269
|
+
|
|
270
|
+
| Prop | Type | Required | Description |
|
|
271
|
+
|------|------|----------|-------------|
|
|
272
|
+
| visible | boolean | Yes | Whether the onboarding is visible |
|
|
273
|
+
| onClose | function | Yes | Callback when onboarding is closed |
|
|
274
|
+
| AppName | string | Yes | Your application name |
|
|
275
|
+
| requestData | object | Yes | Platform-specific OAuth scopes |
|
|
276
|
+
| returnLink | string | Yes | Deep link URL for OAuth callback |
|
|
277
|
+
| onComplete | function | Yes | Callback when onboarding is complete |
|
|
278
|
+
| embedd | boolean | No | Whether to use embedded flow |
|
|
279
|
+
| debug | boolean | No | Enable debug mode |
|
|
280
|
+
| test | boolean | No | Enable test mode |
|
|
281
|
+
|
|
282
|
+
#### `TrainingModal`
|
|
283
|
+
|
|
284
|
+
Email authentication and training progress modal.
|
|
285
|
+
|
|
286
|
+
| Prop | Type | Required | Description |
|
|
287
|
+
|------|------|----------|-------------|
|
|
288
|
+
| visible | boolean | Yes | Whether the modal is visible |
|
|
289
|
+
| onCancel | function | Yes | Callback when modal is cancelled |
|
|
290
|
+
| onComplete | function | Yes | Callback when training is complete |
|
|
291
|
+
| modelKey | string | No | Model key for training |
|
|
292
|
+
| username | string | No | Username for training |
|
|
293
|
+
| isPrimaryAuth | boolean | No | Whether this is primary authentication |
|
|
294
|
+
| autoFocusEmailInput | boolean | No | Auto-focus email input on show |
|
|
295
|
+
|
|
296
|
+
#### `WelcomeScreen`
|
|
297
|
+
|
|
298
|
+
New welcome flow component with modern UI.
|
|
299
|
+
|
|
300
|
+
| Prop | Type | Required | Description |
|
|
301
|
+
|------|------|----------|-------------|
|
|
302
|
+
| visible | boolean | Yes | Whether the screen is visible |
|
|
303
|
+
| onClose | function | Yes | Callback when screen is closed |
|
|
304
|
+
| onComplete | function | Yes | Callback when flow is complete |
|
|
305
|
+
|
|
306
|
+
#### `Overlay`
|
|
307
|
+
|
|
308
|
+
Data request overlay component.
|
|
309
|
+
|
|
310
|
+
| Prop | Type | Required | Description |
|
|
311
|
+
|------|------|----------|-------------|
|
|
312
|
+
| visible | boolean | Yes | Whether the overlay is visible |
|
|
313
|
+
| onClose | function | Yes | Callback when overlay is closed |
|
|
314
|
+
| onAccept | function | Yes | Callback when request is accepted |
|
|
315
|
+
| AppName | string | Yes | Your application name |
|
|
316
|
+
| requestData | object | Yes | Data being requested |
|
|
317
|
+
| biometricType | 'FaceID' \| 'TouchID' \| 'BiometricID' | No | Type of biometric auth to use |
|
|
318
|
+
|
|
319
|
+
### Utility Functions
|
|
320
|
+
|
|
321
|
+
#### Secure Storage
|
|
322
|
+
|
|
323
|
+
- `storeCredentials(credentials, options)`: Store credentials securely
|
|
324
|
+
- `getCredentials(options)`: Retrieve credentials with optional biometric auth
|
|
325
|
+
- `hasCredentials()`: Check if user has stored credentials
|
|
326
|
+
- `deleteCredentials()`: Delete stored credentials
|
|
327
|
+
- `updateCredentials(updates, options)`: Update specific fields in credentials
|
|
328
|
+
- `generateDeviceUsername()`: Generate a device-specific unique username
|
|
329
|
+
- `verifyCredentials(credentials)`: Verify if credentials are valid
|
|
330
|
+
|
|
331
|
+
#### OAuth Service
|
|
332
|
+
|
|
333
|
+
- `connectPlatform(platform)`: Initiate OAuth flow for a specific platform
|
|
334
|
+
- `disconnectPlatform(platform, credentials)`: Disconnect a platform
|
|
335
|
+
- `initializeOAuthService()`: Initialize OAuth service handlers
|
|
336
|
+
- `cleanupOAuthService()`: Clean up OAuth service handlers
|
|
337
|
+
- `storePlatformConnection(platform, connectionData, credentials)`: Store platform connection
|
|
338
|
+
|
|
339
|
+
#### API Communication
|
|
340
|
+
|
|
341
|
+
- `validateCredentials(username, options)`: Validate user credentials with the API
|
|
342
|
+
- `createAccount(credentials, options)`: Create a new user account
|
|
343
|
+
- `authenticate(credentials, options)`: Authenticate with the API using credentials
|
|
344
|
+
- `refreshToken(refreshToken, options)`: Refresh authentication token
|
|
345
|
+
- `getPlatformData(accessToken, platform, options)`: Get user's connected platform data
|
|
346
|
+
- `getUserProfile(accessToken, options)`: Get user profile information
|
|
347
|
+
- `updatePlatformConnections(accessToken, platforms, options)`: Update user platform connections
|
|
348
|
+
|
|
349
|
+
## Development and Testing
|
|
350
|
+
|
|
351
|
+
### Setup Development Environment
|
|
352
|
+
|
|
353
|
+
1. Clone the repository:
|
|
354
|
+
```bash
|
|
355
|
+
git clone https://github.com/onairos/onairos-react-native.git
|
|
356
|
+
cd onairos-react-native
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
2. Install dependencies:
|
|
360
|
+
```bash
|
|
361
|
+
yarn install
|
|
362
|
+
```
|
|
363
|
+
|
|
364
|
+
3. Run the typecheck:
|
|
365
|
+
```bash
|
|
366
|
+
yarn typecheck
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Building the Package
|
|
370
|
+
|
|
371
|
+
```bash
|
|
372
|
+
npm run build:all
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
### Testing with a Local App
|
|
376
|
+
|
|
377
|
+
1. Link the package locally:
|
|
378
|
+
```bash
|
|
379
|
+
# In your package directory
|
|
380
|
+
yarn link
|
|
381
|
+
|
|
382
|
+
# In your app directory
|
|
383
|
+
yarn link @onairos/react-native
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
2. Run your app and test the integration.
|
|
387
|
+
|
|
388
|
+
## Troubleshooting
|
|
389
|
+
|
|
390
|
+
### OAuth Callback Issues
|
|
391
|
+
|
|
392
|
+
- Ensure your deep link schemes are properly configured in both iOS and Android
|
|
393
|
+
- Check that the callback URLs match what's registered with your OAuth providers
|
|
394
|
+
- Ensure all required permissions are enabled in your app configurations
|
|
395
|
+
|
|
396
|
+
### Biometric Authentication Issues
|
|
397
|
+
|
|
398
|
+
- Ensure proper permissions are set in Info.plist and AndroidManifest.xml
|
|
399
|
+
- Test on physical devices as simulators may not support all biometric features
|
|
400
|
+
- For iOS, ensure that Face ID/Touch ID is enabled and set up on the device
|
|
401
|
+
|
|
402
|
+
### Platform Specific Issues
|
|
403
|
+
|
|
404
|
+
#### iOS
|
|
405
|
+
|
|
406
|
+
- For keychain issues, check that the Keychain Sharing capability is enabled
|
|
407
|
+
- Ensure the bundle identifier is consistent with your OAuth configuration
|
|
408
|
+
|
|
409
|
+
#### Android
|
|
410
|
+
|
|
411
|
+
- For deep linking issues, check the androidManifest.xml configuration
|
|
412
|
+
- Ensure that biometric hardware is available on test devices
|
|
413
|
+
|
|
414
|
+
## Contributing
|
|
415
|
+
|
|
416
|
+
1. Fork the repository
|
|
417
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
418
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
419
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
420
|
+
5. Open a Pull Request
|
|
421
|
+
|
|
422
|
+
## License
|
|
423
|
+
|
|
424
424
|
MIT
|