Social login is the process of authenticating a user’s identity using their account from a social networking service. This is usually done by providing the user’s credentials (typically a username and password) to the service, which then verifies them and allows the user to log in. Social login is becoming increasingly popular as a way to streamline the login process for users. It eliminates the need for users to remember multiple sets of credentials, and it also allows users to login with their preferred social media account. Some popular social login providers include Facebook, Google, and Twitter.
Eartho One provides the developers with passwordless authentication, which has greatly eased the work of app developers. Now app developers don’t need a password for user identity; Eartho One gives you everything with just a single click.
As developers use so many passwords at one time, It is very hard to remember all of them. There is a much easier alternative to it, and that is passwordless authentication.
Is Passwordless Authentication Safe with React and Eartho One?
Using Passwordless Authentication is completely safe with React and Eartho One. In fact, it is prone to the most common cyberattacks even against all other security concerns. Passwordless authentication is safe with React and Eartho One.
Using Eartho One for passwordless authentication is inherently safer than passwords.
Find out the advantages of eliminating passwords for your users and business.
We’ll be creating a React application in today’s article that uses Eartho for passwordless authentication. We will base our application on the Eartho React Starter for simplicity. We’ll look at the advantages of passwordless authentication and how it could offer more security than more conventional authentication techniques.
Eartho
What is the point of Passwordless?
Passwordless authentication, as the name suggests, is an authentication system in which the user does not enter a password. Instead, they provide an identifier, such as an email address or phone number, and the authentication system sends a one-time passcode or link to this identifier, which the user must then provide or click to successfully authenticate. The passcode or link is only active for a short period of time, usually around five minutes. Each login request generates a new passcode or link and invalidates any previous passcodes or links. Passwordless authentication, in a sense, also provides two-factor authentication out of the box, because a user must have access to either the email account or phone number they provide.
Both users and developers benefit from passwordless authentication. Users frequently select weak passwords and reuse the same password across multiple services. We can conclude from this that users prefer convenience over security. Many developers make the logical decision to enforce stricter password requirements, but this frequently irritates users. Passwords must be securely encrypted and stored by developers, and even if all best practices are followed, a user who reuses the password on a third-party service that is compromised is also vulnerable in your application.
Who Uses Passwordless?
Today mostly all new companies, have already adopted passwordless authentication. Passwordless authentication is common in both web and mobile applications, and it is especially well-suited for mobile because the user is frequently on their device, which will receive the one-time passcode, resulting in a very intuitive workflow.
As a company that is not part of the big corporations, you kind of not allowed to ask from your users to register with username and password, because asking your users to create “new identity” while they already have a few.
What We’ll Create
In this article, we’ll learn about passwordless authentication and how it provides a simple and secure workflow for user authentication. We’ll go over how passwordless authentication works, the benefits it offers, and how to put theory into practice by implementing it in a React application.
At the end of this article you will have a popup that can authenticate your users with all types of social networks and wallets at once
1. Getting Started
1. Create an account with -> Eartho Creators
It’s 100% free, unlimited users free.
2. Make your very first entity by clicking on “Add Project” on the creators’ home screen. A project can be a website or app.
3. After creating the entity, you will see “Add 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 to resources.
4. Congratulations 🎉 You have created your very first “access”. Now you’re a member of Eartho’s creators community 😊 Head over to our Discord server and say hello.
2. SDK Integration
- Install the SDK and initialize Eartho One
Using npm
npm install @eartho/one-client-reactUsing yarn
yarn add @eartho/one-client-react2. Go to https://creator.eartho.world/ and
Copy the values of your eartho client id from “setup tab” And replace it with “YOUR_EARTHO_CLIENT_ID” in stage 3 code. 3. Configure the SDK by wrapping your application in EarthoOneProvider:
// 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’)
);3. 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;Server Side
If you use Eartho with an app or site that communicates with a backend server, you can protect your routes easily by our SDK as well. After your users finish logging in with Eartho, they’ll be returned to your application at the callback route.
That’s It
Because it simplifies login for users and can boost overall security, passwordless authentication is a perfect replacement for the conventional username and password auth. Constructing a passwordless authentication procedure from scratch might be challenging, but Eartho makes it simple as we’ve shown by building a React app in this article. We have a lot of freedom with Eartho because it lets us combine different authentication schemes to suit our organizational needs.
