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