Eartho one with React Native. Why you need it and how to integrate it?

Emawatson
4 min readJan 5, 2023

--

The average financial cost of a data breach is $3.86 million (IBM). Phishing accounts for 90% of data breaches. 15% of people who are successfully phished will be targeted at least once more

Passwordless authentication is a simple method nowadays. Every person in the world somehow uses passwordless authentication, but they don’t know about it. Besides those, there are developers and business owners who use passwordless authentication for their users to give them security and more privacy in terms of passwords. Eartho One is one of the most famous platforms which provides the facilities of passwordless authentication and many more.

Passwordless authentication can be understood as the process of verifying the identity of a user without the provision of a password. It is okay to assert that any method that verifies users without the use of a password falls under this category. Some more passwordless techniques are:

Biometric authentication Use of authenticator apps Knowledge-based authentication and so on

Why passwordless authentication with Eartho One?

Passwords are generally hard to remember and are vulnerable to phishing attacks. Let’s add some numbers to it. According to Retruster statistical analysis, here’s the state of phishing attacks in 2019 alone:this year.The BEC scams accounted for over $12 billion in losses (FBI). Phishing attempts have grown 65% in the last year. Around 1.5 million new phishing sites are created each month (Webroot). 76% of businesses reported being victims of a phishing attack in the last year. 30% of phishing messages get opened by targeted users (Verizon).

The events of recent times as it relates to data breaches and phishing attacks forced us to look for more secure ways to handle authentication and identity verification. This brings us to Eartho One passwordless authentication.

This makes now a great time to start preparing for the seemingly inevitable fact that, eventually, the world will go passwordless.

React Native and Eartho One:

Here, if you are using React Native for your app development, then luckily you have the best passwordless authentication provider in the world.

Here’s how you can start on day one with React Native.

Getting Started

1. Create an account with -> Eartho Creators It’s 100% free unlimited users. 2. Make your very first project by clicking on “Add Project’’ on the creators’ home screen. A project can be a website or an app.

3. After creating the project, you will see “Add Access” on the project 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 to resources.

4. Congratulations 🎉 You have created your very first “access”. Now you’re a member of Earth’s creators community 😊 Head over to our Discord server and say hello.

Step-1 : Get started

The very first step is to create an account at Eatho One which is 100% free.

Next, click on ‘Add project”, on the creators’ home screen. This project can be a website or app.

Now you will see “Add Access” on the entity page after creating the project. Make the access points for the resources you want us to administer first; these can be “login” or “premium packages” or anything else that grants your users or clients access to them.

Creating a project on Eartho One

Step-2 : SDK Integration

Now install the SDK using either npm or yarn and initialize Eartho One.

Use the following command in npm.

npm install @eartho/one-client-react

Use the following command in yarn.

yarn add @eartho/one-client-react

Now go to access eartho.world and copy the information from the “setup tab” into your Eartho client id. In stage 3 code, change it to “YOUR EARTHO CLIENT ID.” Wrap your application with EarthoOneProvider to configure the SDK.

// 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’)
);

Step 3 : Start Using

Great, now you are in the last step:

// 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;

You can simply secure your routes by using our SDK if you use Eartho with a website or app that interacts with a backend server. They will be sent to your application at the callback route after completing their Eartho logins.

Final Viewpoints:

Using Eartho one with react native is one of the best things to do first. You can protect your users from being tracked as it happens in the web 2.0. Moreover you give them an amazing ease to login into your business without any usernames or passwords.

--

--