An Ultimate all-in-one Auth Module in React Native: Enable One-line Sign-Up and Sign in with Eartho on your device.

One of the first features you must develop when building an app is a simple and seamless login and sign up flow in which users don’t need to remember complicated passwords.

A very interesting option for this is Eartho One. It’s one of the most famous platforms which provides the facilities of passwordless authentication and many more.

In this article, we’re going to dive into building a super cool React Native application using Eartho for passwordless authentication.

TL;DR

If you prefer 🍖 rather than 📖, you can play with samples in this repository.

Why passwordless authentication?

Implementing passwordless authentication can be very helpful for both Developer and your customers! The best part about it is how easy it is to use. With passwordless authentication, your customers can quickly and easily log in without needing to remember a complicated code or go through the hassle of resetting their password if they forget it. Not only does this save your customers time and frustration, but it also saves you time and resources by eliminating the process of resetting passwords for customers who forget their email address, phone number, or login credentials.

Why Eartho one?

• Ready high converting UI/UX
• Login from Google, Twitter, Github, Facebook, Apple, Microsoft, VK, Snapchat, Yandex, Reddit, SMS, Metamask at once with no extra steps or extra effort.
• Users will be protected under the third layer, which prevents companies to track after users.
• Set boundaries and rules to stop users you don’t want from connecting.
• Advanced analytics and info about your app from all sources. ready for use. no extra steps
• No-Code / Your own server. you decide.

Going Passwordless with React Native and Eartho one

1. Sign up for an account with Eartho Creators

1. Click on “Add Project” on the creators’ home screen to create your first project.

1. Once you have created the project, you can access the “Add Access” option on the project page. From there, you can create the access points for your Eartho project.

1. Install the SDK and initialize Eartho One with the below command

npm install @eartho/one-client-react-native

1. For iOS, add URL type

Identifier: eartho

URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world

1. Integrating Eartho into your app

import { init as earthoInit, connectWithRedirect, getIdToken, getUser } from '@eartho/one-client-react-native';

//1. Init the sdk
React.useEffect(() => {

earthoInit(
  "YOUR_EARTHO_CLIENT_ID", 
  "YOUR_EARTHO_CLIENT_SECRET");

}, []);


//2. open the access dialog
connectWithRedirect("access id: e.g. YOUR_EARTHO_ACCESS_ID")


//3. Get id token or user 

console.log(await getIdToken());
console.log(await getUser());

1. Copy your Eartho values from the “setup tab” And replace them with YOUR_EARTHO_CLIENT_ID , YOUR_EARTHO_CLIENT_SECRET, YOUR_EARTHO_ACCESS_ID

1. Well, that’s it. 🎉 Run the code to see it in action.🥳

Want to add Firebase as a back-end? then follow the below steps

1. Go to https://console.cloud.google.com/iam-admin/serviceaccounts?authuser=0
2. Watch this helpful video for more guidance: https://youtu.be/wpbHI-4W33g
3. Save the JSON file
4. Visit https://creator.eartho.world/
5. Select your entity and go to the security tab

1. Change the environment to Firebase Auth

1. Finally, copy the content from the JSON file and paste it onto the website.

That’s it! You done

Wrapping Up

Passwordless authentication can make the login process easier and more secure compared to traditional username and password authentication. However, setting up a passwordless authentication system from scratch can be difficult. Fortunately, Eartho simplifies the process by allowing us to easily create an app with passwordless authentication.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Please leave a comment with your feedback.

Connect with me on LinkedIn