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