How to login into Angular 9 application with Facebook?

Hello to all, welcome again on therichpost.com. In this post, I will tell you, How to login into Angular 9 application with Facebook?

Here are the complete commands and code snippet and please follow carefully:

1. Here are the basics commands to set angular 9 your system:

npm install -g @angular/cli 

ng new angularbootstrap //Create new Angular Project

$ cd angularbootstrap // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Here is the command to install bootstrap 4 into your angular 9 applicatiopn:

npm install --save bootstrap

3. Here is the command to install Angular 9 Social login module:

npm install --save angularx-social-login

4. Here are the bootstrap 4 css and js path, you need to include into your angular.json file:

"styles": [
        ...
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ...
         ],
"scripts": [
       ...
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ...
       ]

5. Here is the html code, you need to add into your src\app\app.component.html file:

div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h4>About Me</h4>
     <h3>{{user.name}}</h3>
      <h5>Photo of me:</h5>
      <div class="fakeimg"><img src="{{user.photoUrl}}"></div>
     <button (click)="signInWithFB()" class="btn btn-primary">Login Facebook</button>
   </div>
  </div>
</div>

6. Here is the code, you need to add into your app.module.ts file:

...

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { FacebookLoginProvider } from "angularx-social-login";
let config = new AuthServiceConfig([
  
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("YourFacebookAppID")
  }
]);

export function provideConfig() {
  return config;
}
...

...
 providers: [
      {
      provide: AuthServiceConfig,
      useFactory: provideConfig
      } 
  ],
...

6. Here is the code, you need to add into your app.component.ts file:

import { Component } from '@angular/core';
import { AuthService } from "angularx-social-login";
import { FacebookLoginProvider} from "angularx-social-login";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularbootstrap';
  private user: any;
  private loggedIn: boolean;
  constructor(private authService: AuthService) { }
  //Logion
  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  
  } 
  // Logout Function
  signOut(): void {
    this.authService.signOut();
  }
  ngOnInit() {
    //Get User Data
    this.authService.authState.subscribe((user) => {
      this.user = user;
    
      this.loggedIn = (user != null);
    });
  }
}

This is it and please run ng serve command and check the output. If you have any kind of query then please do comment below.

Jassa

Thank you