Onairos React Native SDK for social media authentication and AI model training
npm install @onairos/react-nativebash
npm install @onairos/react-native
or
yarn add @onairos/react-native
`
šÆ Example App
A complete example app is available in the example/ directory demonstrating real-world SDK integration:
`bash
cd example
npm install
npm run ios # or npm run android
`
The example app showcases:
- ā
SDK initialization and configuration
- ā
OnairosButton component integration
- ā
WelcomeScreen component usage
- ā
Custom styling options
- ā
JWT token handling and user data extraction
- ā
Error handling and debugging
See example/README.md for detailed setup instructions.
$3
The package includes full TypeScript declarations. Import types directly:
`typescript
import { OnairosButton, OnairosCredentials, PlatformConfig } from '@onairos/react-native';
// Type your component props
const MyComponent: React.FC<{ credentials: OnairosCredentials }> = ({ credentials }) => {
// Your component code
};
// Type your handlers
const handleResolved = (apiUrl: string, accessToken: string, loginDetails: any) => {
console.log('Authentication successful:', { apiUrl, accessToken, loginDetails });
};
`
$3
The package requires the following dependencies:
`bash
Core dependencies
yarn add @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-safe-area-context
Authentication dependencies
yarn add react-native-webview react-native-keychain
UI dependencies
yarn add react-native-vector-icons
Network and encryption
yarn add @react-native-community/netinfo react-native-rsa-native react-native-crypto-js
`
$3
1. Install pods:
`bash
cd ios && pod install
`
2. Add the following to your Info.plist:
`xml
CFBundleURLTypes
CFBundleURLSchemes
onairosanime
NSFaceIDUsageDescription
We use Face ID to securely access your Onairos account
`
3. Configure your OAuth providers in the project settings and register the callback URLs.
$3
1. Add the following to your android/app/src/main/AndroidManifest.xml:
`xml
`
2. Add biometric permissions:
`xml
`
Usage
š Quick Integration Guide - Start here for immediate copy-paste setup!
š For comprehensive usage examples in both JavaScript and TypeScript, see USAGE_EXAMPLES.md
$3
For modals and overlays to appear properly, you must wrap your app with the PortalHost component:
`javascript
import { PortalHost } from '@onairos/react-native';
export default function App() {
return (
{/ Your app content goes here /}
);
}
`
$3
1. Import the OnairosButton component:
`javascript
import { OnairosButton } from '@onairos/react-native';
`
2. Use the component in your app:
`javascript
export default function App() {
const handleResolved = (apiUrl, accessToken, loginDetails) => {
console.log('Authentication successful:', { apiUrl, accessToken, loginDetails });
// Store the tokens and proceed with your app logic
};
return (
AppName="YourApp"
requestData={{
"Social Media": {
"Profile Information": "Access to your basic profile data",
"Post History": "Access to your post history for analysis"
},
"Content": {
"Images": "Access to image data for AI training",
"Text": "Access to text data for AI training"
}
}}
returnLink="your-app://auth-callback"
onResolved={handleResolved}
buttonType="pill"
color="#00BFA5"
/>
);
}
`
$3
Add this to your app's entry point to handle deep linking for OAuth:
`javascript
import { initializeOAuthService } from '@onairos/react-native';
// In your app's entry point
useEffect(() => {
// Set up OAuth deep linking
initializeOAuthService();
// Clean up when component unmounts
return () => {
cleanupOAuthService();
};
}, []);
`
$3
`javascript
import { storeCredentials, getCredentials, hasCredentials } from '@onairos/react-native';
// Check if user has stored credentials
const checkAuth = async () => {
const hasExisting = await hasCredentials();
if (hasExisting) {
// Get credentials with biometric authentication
const credentials = await getCredentials({
useBiometrics: true,
biometricPrompt: {
title: 'Authenticate to continue',
subtitle: 'Please verify your identity'
}
});
if (credentials) {
// User is authenticated
console.log('User authenticated:', credentials.username);
}
} else {
// Redirect to onboarding flow
setShowOnboarding(true);
}
};
`
API Reference
$3
#### OnairosButton
The main entry point for Onairos authentication with full training flow support.
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| AppName | string | Yes | Your application name |
| requestData | object | Yes | Platform-specific OAuth scopes and data requests |
| returnLink | string | Yes | Deep link URL for OAuth callback |
| embedd | boolean | No | Whether to use embedded flow (default: false) |
| color | string | No | Button color (default: #00BFA5) |
| icon | string | No | Button icon name (default: 'auto_awesome') |
| onResolved | function | Yes | Callback for successful auth with (apiUrl, accessToken, loginDetails) |
| login | boolean | No | Enable login mode (default: false) |
| buttonType | 'circle' \| 'pill' | No | Button style (default: 'circle') |
| debug | boolean | No | Enable debug mode (default: false) |
| test | boolean | No | Enable test mode (default: false) |
#### UniversalOnboarding
The universal onboarding flow component.
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| visible | boolean | Yes | Whether the onboarding is visible |
| onClose | function | Yes | Callback when onboarding is closed |
| AppName | string | Yes | Your application name |
| requestData | object | Yes | Platform-specific OAuth scopes |
| returnLink | string | Yes | Deep link URL for OAuth callback |
| onComplete | function | Yes | Callback when onboarding is complete |
| embedd | boolean | No | Whether to use embedded flow |
| debug | boolean | No | Enable debug mode |
| test | boolean | No | Enable test mode |
#### TrainingModal
Email authentication and training progress modal.
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| visible | boolean | Yes | Whether the modal is visible |
| onCancel | function | Yes | Callback when modal is cancelled |
| onComplete | function | Yes | Callback when training is complete |
| modelKey | string | No | Model key for training |
| username | string | No | Username for training |
| isPrimaryAuth | boolean | No | Whether this is primary authentication |
| autoFocusEmailInput | boolean | No | Auto-focus email input on show |
#### WelcomeScreen
New welcome flow component with modern UI.
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| visible | boolean | Yes | Whether the screen is visible |
| onClose | function | Yes | Callback when screen is closed |
| onComplete | function | Yes | Callback when flow is complete |
#### Overlay
Data request overlay component.
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| visible | boolean | Yes | Whether the overlay is visible |
| onClose | function | Yes | Callback when overlay is closed |
| onAccept | function | Yes | Callback when request is accepted |
| AppName | string | Yes | Your application name |
| requestData | object | Yes | Data being requested |
| biometricType | 'FaceID' \| 'TouchID' \| 'BiometricID' | No | Type of biometric auth to use |
$3
#### Secure Storage
- storeCredentials(credentials, options): Store credentials securely
- getCredentials(options): Retrieve credentials with optional biometric auth
- hasCredentials(): Check if user has stored credentials
- deleteCredentials(): Delete stored credentials
- updateCredentials(updates, options): Update specific fields in credentials
- generateDeviceUsername(): Generate a device-specific unique username
- verifyCredentials(credentials): Verify if credentials are valid
#### OAuth Service
- connectPlatform(platform): Initiate OAuth flow for a specific platform
- disconnectPlatform(platform, credentials): Disconnect a platform
- initializeOAuthService(): Initialize OAuth service handlers
- cleanupOAuthService(): Clean up OAuth service handlers
- storePlatformConnection(platform, connectionData, credentials): Store platform connection
#### API Communication
- validateCredentials(username, options): Validate user credentials with the API
- createAccount(credentials, options): Create a new user account
- authenticate(credentials, options): Authenticate with the API using credentials
- refreshToken(refreshToken, options): Refresh authentication token
- getPlatformData(accessToken, platform, options): Get user's connected platform data
- getUserProfile(accessToken, options): Get user profile information
- updatePlatformConnections(accessToken, platforms, options): Update user platform connections
Development and Testing
$3
1. Clone the repository:
`bash
git clone https://github.com/onairos/onairos-react-native.git
cd onairos-react-native
`
2. Install dependencies:
`bash
yarn install
`
3. Run the typecheck:
`bash
yarn typecheck
`
$3
`bash
npm run build:all
`
$3
1. Link the package locally:
`bash
In your package directory
yarn link
In your app directory
yarn link @onairos/react-native
`
2. Run your app and test the integration.
Troubleshooting
$3
- Ensure your deep link schemes are properly configured in both iOS and Android
- Check that the callback URLs match what's registered with your OAuth providers
- Ensure all required permissions are enabled in your app configurations
$3
- Ensure proper permissions are set in Info.plist and AndroidManifest.xml
- Test on physical devices as simulators may not support all biometric features
- For iOS, ensure that Face ID/Touch ID is enabled and set up on the device
$3
#### iOS
- For keychain issues, check that the Keychain Sharing capability is enabled
- Ensure the bundle identifier is consistent with your OAuth configuration
#### Android
- For deep linking issues, check the androidManifest.xml configuration
- Ensure that biometric hardware is available on test devices
Contributing
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)