Deploy Angular App to Firebase Hosting

Build Firebase Facebook Login Auth Service with Angular

Rawat Digamber /  Read Time: 3 minutes

Firebase Facebook Login

I am going to talk about How you can authenticate with Firebase facebook login auth provider API in Angular app. As we know Firebase offers tons of features for user authentication service. This powerful real-time database is fast, reliable and secure.

You can easily implement Firebase Facebook Login authentication service to let your users authenticate with Facebook API with Angular’s latest version. I will be using AngularFire2 library from the node package manager (NPM) and the latest Angular release for this tutorial.

Step: 1 – Setup Angular App for Creating Login with Facebook

ng new angularfirebaseproject

Your basic project will be set up after that enter into the project folder by using the following command.

cd angularfirebaseproject

You can follow this detailed article to set up the Angular project with external dependencies like Bootstrap4, FontAwesome, SASS, and NgBootstrap.

Step: 2 – Setup AngularFire2 Library in Angular

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

npm install firebase @angular/fire --save

Once you are done setting up this library, make the connection 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.

Firebase Credentials Setting

Step: 3 – Enable Facebook Auth Provider Service

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

Firebase Facebook Setting

Enter your App ID name and App secret then click on the save button. This method will activate your Facebook auth provider service from Firebase.

Facebook Auth Provider

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 – Create Firebase Facebook Login Auth Provider Service

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 Facebook
  FacebookAuth() {
    return this.AuthLogin(new auth.FacebookAuthProvider());
  }  

  // 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 Facebook Login Auth Provider Service in Angular HTML Template

Integrate Firebase Facebook login auth provider in signin.component.html template.

<!-- Calling FacebookAuth Api from AuthService -->
<div class="formGroup">
   <button type="button" (click)="authService.FacebookAuth()">
      Log in with Facebook
   </button>
</div>
If you are looking for a detailed explanation on fast, reliable and secure authentication system then you must check out my latest article on Complete Step by Step Firebase Authentication System with Angular 7.

GitHub Project Files + Project Demo Link

GitHub ResourcesProject Demo

Thanks a lot for taking the time to read this article, I believe this post really helpful to you. If you think this tutorial has helped you then share this post with others.

You can also follow me on Twitter @ImDigamberSingh

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional programming. I love to create modern web and mobile apps using Node JS, Mongo DB, React JS, Angular 2+, Firebase Real-time NoSQL Database, Ionic Framework, Object Oriented JavaScript, RxJS, TypeScript, jQuery etc...