Passwordless Authentication with Angular and Eartho

We’ll be creating a Angular application in today’s article that uses Eartho for passwordless authentication. We will base our application on the Eartho Angular 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

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

Why use Eartho?

Here’s why:

• Ready high converting UI/UX
• You don’t need to read the documents of all companies and you don’t need to open accounts there.
• Login from Google, Twitter, Github, Facebook, Apple, Microsoft, VK, Snapchat, Yandex, Reddit, SMS, Metamask at once with not extra steps or extra effort.
• Your users will be protected under our third layer, we prevent from companies to track after your 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. Eartho support all, your own server, our server, firebase auth and many more.
• What We’ll Create
• In this article, we’ll learn about Eartho and Firebase Auth and how to enjoy the benefits of both.

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 while using Firebase Auth

Getting Started

1. Create an account with -> Eartho Creators
   It’s 100% free, unlimited users free.

2. Make your very first project by clicking on “Add Project” on the creators’ home screen. A project can be a website or app.

3. After creating the project, 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.

SDK Integration

Install the SDK and initialize Eartho One
Using npm

npm install @eartho/one-client-angular

Using yarn

yarn add @eartho/one-client-angular

1. 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:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the module from the SDK
import { AuthModule } from '@eartho/one-client-angular';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
// Import the module into the application, with configuration
    AuthModule.forRoot({
      clientId: 'YOUR_EARTHO_CLIENT_ID',
    }),
  ],
bootstrap: [AppComponent],
})
export class AppModule {}

Start Using

import { Component } from '@angular/core';
// Import the AuthService type from the SDK
import { AuthService } from '@eartho/one-client-angular';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'My App';
// Inject the authentication service into your component through the constructor
  constructor(public auth: AuthService) {}
connectWithRedirect(): void {
    // Call this to redirect the user to the login page
    this.auth.connectWithPopup({access_id:"YOUR_EARTHO_ACCESS_ID"});
  }
}

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, Eartho 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 Angular 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.