I am going to talk about How you can create Firebase login with Facebook in Angular 7/8/9 . 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.
ng new angularfirebaseproject
Your basic project will be set up after that enter into the project folder by using the following command.
cd angularfirebaseproject
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.
Go to your Firebase account and click on Authenticate button on the sidebar navigation menu then click in front of the Facebook link.
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.
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
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() { }
}
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>
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.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to disable or enable a form element using jQuery
Use the jQuery prop() method...Method Tymon\JWTAuth\Commands\JWTGenerateCommand::handle() does not exist
Today, we are install laravel 5.5 and in...How to Install and Configure MongoDB on Ubuntu
In this article, we will share with you...How to refresh a page with jQuery
Use the JavaScript Met...How to show and hide div elements based on the selection of radio buttons in jQuery
Use the jQuery show() and hide() methods...