In this article, we will learn how to integrate login with Facebook in Angular.
– First of all, we have to create a react application.
– create a new app using the following command
ng new facebook-login
– Add the below package
npm i @abacritt/angularx-social-login
– First, we need to log in to our Facebook accounts.
– Go to the below link and go to My Apps.
https://developers.facebook.com/
– And go to the Create App.
– The steps to create an app are shown in the below image.
Step-1 – Select the type of application.
Step 2 – Add the application name and create an application.
– On the home page Application Id will be there as shown in the below image.
– Now open your app.module.ts file and add the below code:
import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SocialLoginModule, SocialAuthServiceConfig, SocialAuthService } from '@abacritt/angularx-social-login'; import { FacebookLoginProvider } from '@abacritt/angularx-social-login'; import { AcceptJSService } from '@openutility/acceptjs-angular-wrapper'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, ReactiveFormsModule, SocialLoginModule, HttpClientModule ], providers: [AcceptJSService,SocialAuthService, { provide: 'SocialAuthServiceConfig', useValue: { autoLogin: false, providers: [ { id: FacebookLoginProvider.PROVIDER_ID, provider: new FacebookLoginProvider('Your App ID'), } ], } as SocialAuthServiceConfig, }, ], bootstrap: [AppComponent] }) export class AppModule { }
The below code add-in app.component.html file
<div class="container" style="max-width: 550px"> <h2 class="text-center mb-5">Angular Login with Facebook</h2> <div *ngIf="isLoggedin === true"> <div class="form-group"> <label>First Name</label> <input type="text" class="form-control" [value]="socialUser.firstName" id="firstname" readonly> </div> <div class="form-group"> <label>Last Name</label> <input type="text" class="form-control" [value]="socialUser.lastName" id="lastname" readonly> </div> <div class="form-group"> <label>Email</label> <input type="text" class="form-control" [value]="socialUser.email" id="email" readonly> </div> <button type="button" (click)="logOut()" class="btn btn-primary">Log Out</button> </div> <button type="button" (click)="loginWithFacebook()">Facebook</button> </div>
Now, add the below code in app.component.ts file
import { FacebookLoginProvider, SocialAuthService } from '@abacritt/angularx-social-login'; import { Component } from '@angular/core'; import { SocialUser } from 'angularx-social-login'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { loginForm!: FormGroup; socialUser!: SocialUser; isLoggedin?: boolean; constructor( private formBuilder: FormBuilder, public socialAuthService: SocialAuthService ) { } ngOnInit(): void { this.loginForm = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required], }); this.socialAuthService.authState.subscribe((user) => { this.socialUser = user; this.isLoggedin = user!= null; console.log(this.socialUser); }); } loginWithFacebook():void { console.log(this.socialAuthService.signIn(FacebookLoginProvider.PROVIDER_ID)) this.socialAuthService.signIn(FacebookLoginProvider.PROVIDER_ID).then((res)=>{ console.log(res) }) } logOut():any { this.socialAuthService.signOut(); } }
Output:-