Login with Twitter in Angular9 using Firebase

I am going to show you how you can build login with Twitter using Firebase database with Angular 7|8|9 feature with Real-time database. Firebase offers various auth provider Apis for the user authentication system. In order to create Firebase Twitter login service, you must set up a basic Angular project and create Firebase account set up a project in Firebase account.

Once you are done with the above process then you must enter in your project directory and setup AngularFire2 real-time database library from the node package manager community. After that you can easily build Angular Firebase Twitter login service It will let your users authenticate with Twitter auth provider with Angular.

Step: 1 – Setup Angular App

ng new angularfirebaseproject

Your basic project is set to be used the second step is to enter into the project folder by using the following command.

cd angularfirebaseproject

Step: 2 – Setup AngularFire2 Library in Angular 7|8|9

Now setup Firebase (AngularFire2 library) in your Angular project.

npm install firebase @angular/fire --save

You’ve successfully installed AngularFire2 library from NPM community, let’s make the communication between your Firebase account and your Angular app.

Go to src/environments/enviorment.ts and enviorment.prod.ts files in your project’s enviornments folder. Then add your firebase configuration details in both the environment files as given below.

Step: 3 – Enable Twitter Auth Provider Service in Firebase Account

Go to your Firebase account and click on Authenticate button on the sidebar navigation menu then click in front of the Twitter link.

Step: 4 – Create Auth Service and Sign in component

Create auth.service.ts core file which will hold our main logic.

ng generate service auth

Create Sign in the template

ng generate component signin

Step: 5 – Generate Main Auth Service in Angular 7|8|9

Go to your auth.service.ts template.

import { Injectable } from '@angular/core';
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
  ) { }

  // Sign in with Twitter
  TwitterAuth() {
    return this.AuthLogin(new auth.TwitterAuthProvider());
  }  

  // Auth logic to run auth providers
  AuthLogin(provider) {
    return this.afAuth.auth.signInWithPopup(provider)
    .then((result) => {
        console.log('You have been successfully logged in!')
    }).catch((error) => {
        console.log(error)
    })
  }

}

Go to your signin.component.html template.

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})

export class SignInComponent implements OnInit {

  constructor(public authService: AuthService) { }

  ngOnInit() { }

}

Step: 6 – Implement Twitter Login Auth Provider Service in Angular 7|8|9

Integrate Twitter login service in signin.component.html template.

<!-- Calling TwitterAuth() Api from AuthService -->
<div class="formGroup">
  <button type="button" (click)="authService.TwitterAuth()">
    Log in with Twitter
  </button>
</div>

i hope you like this article.

Author : Harsukh Makwana