Creating React app with all social logins with 3 simple steps

“Access” refers to the ability to obtain or make use of something. In the context of information technology, “access” refers to the ability to connect to or use a computer or computer network. “Access” can also refer to the ability to enter, view, or edit data within a computer system or network.

There are three types of access control: physical, logical, and administrative. Physical access control limits access to a physical space, such as a building, room, or server room. Logical access control limits access to a computer system or network. Administrative access control limits access to the administration of a computer system or network.

Access control is important because it protects data and resources from unauthorized access. Unauthorized access can lead to data breaches, data loss, or theft. It can also lead to the disruption of service, the misuse of resources, or the unauthorized use of privileged information.

https://www.npmjs.com/package/@eartho/one-client-react

For this app, I am going to use Eartho One to giving ready built in high converting experience and Firebase Auth to manage user login and authentication. In this scenario, my app needs to communicate with Firebase Auth directly to obtain an authentication token and after that, I will add this token to every request send to my backend.

Ingredients
First, you need to create your React app. I assume you already know how to do this but in case something is not clear here is a guide
https://reactjs.org/docs/getting-started.html

You will also need to get Firebase set up. You can find instructions for doing that in the official Firebase docs.

STEP-BY-STEP INSTRUCTIONS

1. Create Access Points in Eartho Creators 1A. Begin by connecting to Eartho Creators

2B. Make your very first entity by click on “Create Project” on the creators home screen. Entity can be a website, app, event, or anything else for which you want to manage access.

3C. After creating the entity, you will see “Create Access” on the entity page. Begin by creating the access points you want us to manage; it can be “login” or “premium package” or anything that gives your users/clients access for something.

1. Integrating Eartho into your app Add Eartho into your app

npm i @eartho/one-client-react

Configure

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { EarthoOneProvider } from '@eartho/one-client-react';
import App from './App';ReactDOM.render(
  <EarthoOneProvider
    clientId="YOUR_EARTHO_CLIENT_ID"
  >
    <App />
  </EarthoOneProvider>,
  document.getElementById('app')
);

Start using

// 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 onClick={connectWithPopup}>Log in</button>;
  }
}export default App;

1. (Optional) Integrate Eartho Into Server / Firebase Auth / Aws https://eartho.world/

https://eartho-g.gitbook.io/eartho-docs/quick-start/step-3-optional-integrating-eartho-into-your-server

Thats it !
You done

https://www.npmjs.com/package/@eartho/one-client-react