Angular 14 Tutorial- Learn To Build Firebase Login With Facebook In An Angular App

Build Firebase Login With Facebook In An Angular App; We will learn how to create the Firebase login With Facebook In Angular. We already know that Firebase offers numerous features for User Authentication Service.

It’s pretty easy to implement Firebase Facebook Login Authentication Service to let our users Authenticate with Facebook API with Angular.

In this Angular tutorial, we will use AngularFire2 Library from the Node Package Manager (NPM) and the latest Angular release.

Setup Angular App For Creating Login With Facebook

ng new angularfirebaseproject

Our basic project will be set up after it enters into the project folder by using the given command:

cd angularfirebaseproject

Further, we set “strict”:false under compilerOptions property in the tsconfig.json file in order to remove strict type warnings or errors:

Setup AngularFire2 Library

In this step, we have to set up Firebase (AngularFire2 Library) in our Angular project:

npm install firebase @angular/fire --save

After we have set up this library, we need to make the connection between our Firebase account and our Angular app.

So, we go to the src/environments.ts file in our project’s environments folder. Then, we will add the Firebase configuration in the environment files as given below:

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxx-xxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxx",
    storageBucket: "xxxxxxxx",
    messagingSenderId: "xxxxxx",
    appId: "xxxxx",
    measurementId: "xxxxxxxxxxxxxxxx"
  }
};

Enable Facebook Auth Provider Service

We will now go to our Firebase account and click on the Authenticate button on the sidebar navigation menu and then click in front of the Facebook link:

Here, we will enter the App ID name and App secret. Then, click on the save button. This method will activate our Facebook Auth Provider Service from firebase.

Create Auth Service And Sign In Component

Now, we create the auth.service.ts core file which will hold our main logic:

ng generate service auth

Then, we will create Sign In template

ng generate component signin

Create firebase Facebook Login Auth Provider Service

Now, we will create the auth.service.ts file in the Angular project. This will hold the core logic of login with Facebook in Angular with Firebase:

import { Injectable } from '@angular/core';
import { FacebookAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(
    public afAuth: AngularFireAuth // Inject Firebase auth service
  ) {}
  // Sign in with Facebook
  FacebookAuth() {
    return this.AuthLogin(new FacebookAuthProvider());
  }
  // Auth logic to run auth providers
  AuthLogin(provider) {
    return this.afAuth
      .signInWithPopup(provider)
      .then((result) => {
        console.log('You have been successfully logged in!');
      })
      .catch((error) => {
        console.log(error);
      });
  }
}

Now, we go to our the signin.component.ts template:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css'],
})
export class SigninComponent implements OnInit {
  constructor(public authService: AuthService) {}
  ngOnInit() {}
}

Implement Login With Facebook In Angular

Afterward, we integrate Firebase Facebook Login Auth Provider in the signin.component.html template:

<div class="formGroup">
  <button type="button" (click)="authService.FacebookAuth()">
    Log in with Facebook
  </button>
</div>

We may get the reference of final app module class by viewing the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { SigninComponent } from './signin/signin.component';
@NgModule({
  declarations: [AppComponent, SigninComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
  ],
  providers: [AuthService],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now, we have to evoke the auth components by adding the given tags in the app.components.ts file:

<app-signin></app-signin>

We are ready to view the application on the browser:

ng serve --open

Conclusion

Here, in this Angular guide, we have learned how smooth and easy it is to build firebase login with facebook in an Angular app.

Thanks