Login with Facebook in Angular 12

Angular 12 social login with facebook using angularx-social-login library example; In this tutorial, i am going to show you from scratch how to create facebook app and implement social login in angular 12 app.

Social Auth Facebook allows users to register and login to your Drupal site with their Facebook account. The module allows websites to request any scopes, so any tasks requiring authentication with Facebook services can be performed.

Before integrating Facebook social login in Angular, you need to be create facebook app for your angular app. In this example; I will tell you how to create app in facebook and get client eid and secret from facebook.

How to Login with Facebook in Angular 12

• Step 1 – Create Facebook App
• Step 2 – Create New Angular App
• Step 3 – Install Social Login Library
• Step 4 – Import Modules on App.Module.ts File
• Step 5 – Add Code on View File
• Step 6 – Add Code On App.Component ts File
• Step 7 – Start the Angular Facebook Login App

Step 1 – Create Facebook App

Visit the following url https://developers.facebook.com/apps/ and create a new facebook app. Then get facebook secret id and key.

Step 2 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 3 – Install Social Login Library

Then install NPM package called angularx-social-login for implement facebook social login in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

npm install --save angularx-social-login

After that, open angular.json file and update the following code into it:

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

Step 4 – Import Modules on App.Module.ts File

Go to src/app directory and open app.module.ts file. And please add YourFacebookAppID in following code. Then add the following lines of into 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
      } 
  ],
...

Step 5 – Add Code on View File

Create facebook social login button in angular 12 app. So, visit src/app/app.component.html and update the following code into it:

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

Step 5 – Add Code On App.Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into 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);
    });
  }
}

Step 7 – Start the Angular Facebook Login App

Execute the following command on terminal to start angular facebook social login app:

ng serve

Recommended Angular Posts