I'll teach you how to use Angular 13 to set up a Firebase login with Facebook. As we all know, Firebase has a plethora of features for user authentication.

This robust real-time database is quick, dependable, and safe. With Angular's latest version, you can quickly install the Firebase Facebook login authentication service to allow your users to authenticate with Facebook API.

For this example, I'll be utilizing the AngularFire2 library from the node package manager (NPM) and the most recent Angular version.

Setup an Angular App to Create a Facebook Login

ng new firebaseproject

After that, use the following command to access the project folder and set up your basic project.

cd firebaseproject

To avoid strict type warnings or errors, put "strict": false in the tsconfig.json file's compilerOptions parameter.

Setup AngularFire2 Library

In your Angular project, enable Firebase (AngularFire2 library).

npm install firebase @angular/fire --save

Make the connection between your Firebase account and your Angular app once you've finished setting up this library.

Go to the src/environments/environment.ts file in the environments folder of your project. Then, as shown below, add the firebase configuration to the environment 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, then click the Authenticate button in the sidebar navigation menu, followed by a click in front of the Facebook link.

Fill in your App ID name and App secret, then hit the save button. This method will activate your Firebase Facebook auth provider service.

Create an authentication service and a sign-in component.

Create the core file auth.service.ts, which will contain our main logic.

ng generate service auth

Create a signature in the template

ng generate component signin

Create a Facebook Login Auth Provider Service in Firebase.

Now, in your Angular project, build the auth.service.ts file, which will contain the fundamental logic for logging in with Facebook in Angular using 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, 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 Facebook Login

In the signin.component.html template, add a Firebase Facebook login auth provider.

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

Viewing the app.module.ts file will provide you with the reference for the final app module class.

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 {}

Ensure that the auth components are invoked by adding the appropriate tags to the app.component.ts file.

<app-signin></app-signin>

We're all set to use the browser to view the application.

ng serve --open

I hope you will like the content and it will help you to learn Angular 13 - Create a Firebase login with Facebook
If you like this content, do share.