Angular 16 Facebook OAuth Social Login Tutorial

Login with Facebook using angularx-social-login library in Angular 16; Through this tutorial, i am going to show you how to integrate facebook social login oauth in Angular 16 apps.

Angular 16 Facebook OAuth Social Login Tutorial

Follow the below given steps to integrate facebook login OAuth in Angular 16 apps; as follows:

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

Step 1 – Create Facebook Login App

Use the following steps to create facebook login app in facebook developer console; as follows:

Step 1 – Visit the following url https://developers.facebook.com/apps/ and create a new facebook app.

Step 2 – Create facebook app with email and app name.

Step 3 – Then, Navigate to setting->advanced and add redirect URL.

Step 4 – Now, add valid auth redirect url. So, click facebook login->setting and add valid auth redirect URL.

Step 5 – Finally, Navigate to facebook developers dashboard and copy the following App ID and App SECRET.

Now, save facebook secret id and secret key,Which is found from the Facebook Developer Console App.

Step 2 – Create New Angular App

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 3 – Install Social Facebook Login Library

Then run the following command on command prompt to install NPM package called angularx-social-login for implement facebook social login in angular apps:

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 in 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 Facebook Login Button on View File

In this step, create facebook social login button in angular 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 6 – Import Components in App.Component ts File

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

Run the following command on command prompt to start angular facebook social login app:

ng serve

Related Tutorials