Step 3 - Integrating Eartho into your app

This document describes how to complete a basic Eartho integration in a web app.

1. Before we start, you need to import Eartho into your app.

2. Integrating Eartho into your app

Need an example project? https://github.com/eartho-group/one-client-react Use the useEarthoOne hook in your components to access the authentication state (isLoading, isConnected and user) and authentication methods (connectWithPopup and logout):

// src/App.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

function App() {
  const {
    isLoading,
    isConnected,
    error,
    user,
    connectWithPopup,
    logout,
  } = useEarthoOne();

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }

  if (isConnected) {
    return (
      <div>
        Hello {user.displayName}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
        </button>
      </div>
    );
  } else {
    return <button
          className="btn btn-outline-success"
          id="login"
          onClick={() => connectWithPopup({ accessId: "YOUR_EARTHO_ACCESS_ID" })}
        >
        Log in
      </button>;
  }
}

export default App;

Use with a Class Component

Use the withEarthoOne higher order component to add the earthoOne property to Class components:

import React, { Component } from 'react';
import { withEarthoOne } from '@eartho/one-client-react';

class Profile extends Component {
  render() {
    // `this.props.earthoOne` has all the same properties as the `useEarthoOne` hook
    const { user, logout } = this.props.earthoOne;
    return <div>Hello {user.name}</div>;
  }
}

export default withEarthoOne(Profile);

3. Want to use Firebase or AWS Amplify?

Last updated