Build Firebase Login with Facebook in Angular 16

I am going to show you how you can create Firebase login with Facebook in Angular. 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.

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

Next, to remove strict type warnings or error make sure to set “strict”: false under compilerOptions property in tsconfig.json file.

Setup AngularFire2 Library

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

npm install @angular/fire firebase@9.16.0 --legacy-peer-deps

You’ve successfully installed AngularFire2 library from NPM community, let’s connect Firebase to your Angular application.

First, create src/environments/ folder and environment.ts file, then add firebase configurations in environments/environment.ts file.

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

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 and Sign in component

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

ng generate service auth

Create Firebase Facebook Login Auth Provider Service

Now, you have to create auth.service.ts file in 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);
      });
  }
}

Go to your signin.component.ts template.

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(public authService: AuthService) {}
}

Implement Login with Facebook in Angular

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

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

You 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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthService } from './auth.service';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule,
  ],
  providers: [AuthService],
  bootstrap: [AppComponent],
})
export class AppModule {}

We are ready to view the application on the browser.

ng serve --open

You can download the full code of this tutorial from GitHub.