React Native

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

1. Open your React Native project in Xcode.

2. Go to the project settings and select your app target.

3. Go to the Info tab and add a new URL type:

   • Identifier: eartho

   • 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.