Integrating Eartho into Your React Native App
This section describes how to integrate Eartho into a React Native app.
1. Install the SDK
You can install the SDK using npm.
Using npm:
npm install @eartho/one-client-react-native
2. Retrieve Eartho Client ID and Access ID
Go to Eartho Creator and copy your Eartho client ID and access ID from the "Developers Integration" section.
3. Configure URL Scheme for iOS
Open your React Native project in Xcode.
Go to the project settings and select your app target.
Go to the Info
tab and add a new URL type:
URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world
Example:
Identifier: eartho
URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world
4. Initialize and Configure the SDK
Integrate Eartho into your React Native app by configuring the SDK and handling authentication.
Example Code:
App.js
Add the following code to initialize and handle authentication in your app.
// App.js
import React, { useEffect, useState } from 'react';
import { Button, View, Text } from 'react-native';
import { init as earthoInit, connectWithPopup, getIdToken, getUser, logout as earthoLogout } from '@eartho/one-client-react-native';
export default function App() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Initialize Eartho
earthoInit('YOUR_EARTHO_CLIENT_ID', 'YOUR_EARTHO_CLIENT_SECRET').then(() => {
// Check if user is already logged in
getUser().then(user => {
setUser(user);
setLoading(false);
}).catch(() => setLoading(false));
});
}, []);
const login = async () => {
try {
await connectWithPopup({ accessId: 'YOUR_EARTHO_ACCESS_ID' });
const user = await getUser();
setUser(user);
} catch (error) {
console.error('Login failed', error);
}
};
const logout = async () => {
try {
await earthoLogout();
setUser(null);
} catch (error) {
console.error('Logout failed', error);
}
};
if (loading) {
return <Text>Loading...</Text>;
}
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{user ? (
<>
<Text>Hello, {user.displayName}</Text>
<Button title="Log out" onPress={logout} />
</>
) : (
<Button title="Log in" onPress={login} />
)}
</View>
);
}
Handling Redirects for iOS
Add the following code to handle redirects in your AppDelegate.m
file:
// AppDelegate.m
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
Handling Redirects for Android
Add the following intent filter to your AndroidManifest.xml
file:
<activity
android:name="com.yourapp.MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="yourapp" android:host="auth" />
</intent-filter>
</activity>
Replace yourapp
with your app's bundle identifier.
Additional Resources
For more detailed examples and usage, visit the Eartho React Native Example Repository.