Create Login with Facebook in Angular 13 Application

In this comprehensive guide, you learn bit by bit on creating a login with Facebook in the angular app using the angularx-social-login package.

Sign-in with Facebook is the faster way to authenticate without creating a new user account; in this angular Facebook signin example, we will create one such feature.

To accomplish this task, we need a new angular application, bootstrap package to create the login form UI, angularx-social-login plugin, and most importantly, the Facebook app id.

The Angular Social Login module helps you build social login system in angular, and it offers impeccable support for Angular 9+.

You can create login authentication for numerous social media networking sites such as Amazon, Facebook, Google, and VK.

However, it is not limited to only specified providers, but you can extend it to other providers.

Angular 13 Login with Facebook OAuth Example

Here are the several steps building towards Angular login with the Facebook module.

  • Step 1: Install Angular Project
  • Step 2: Add Angular Social Login Plugin
  • Step 3: Create Facebook App ID
  • Step 4: Import Angular Social Login
  • Step 5: Create Login with Facebook
  • Step 6: Test Angular Application

Install Angular Project

Angular CLI is required to work on the angular project, install it with the suggested command:

npm install -g @angular/cli

Next, you can create a new angular project:

ng new angular-login-app

Go inside the project:

cd ng new angular-login-app

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

To design the login form UI, you need to install a third-party Bootstrap package; hence use the recommended command:

npm i bootstrap

Insert Bootstrap package CSS in styles array inside the angular.json:

...
...
...
"styles": [
     "src/styles.scss",
     "node_modules/bootstrap/dist/css/bootstrap.min.css"
]
...
...
...

Add Angular Social Login Plugin

Next, you have to install the angular social login plugin using the NM command:

npm install angularx-social-login

Subsequently, we have to plug-in the angular social login module in angular app. But before that we need a Facebook app id, consequently, in the next step we will create the Facebook app id.

Create Facebook App ID

Creating a Facebook app id requires you to visit Facebook Developer Dashboard, you need to follow the recommended steps to create Facebook App Id:

Step 1: Invoke the first step by clicking on the “Create App” button.

Facebook Create App

Step 2: The previous action manifests a Create an App modal. Add the app name and app contact email the click on the Create App large button to go to the next step.

Create an App modal

Step 3: Subsequently, a list of product cards displays on the screen. Out of these innumerable options, you have to look for a Facebook Login card, click on the Set-Up link.

Facebook list of product cards

Step 4: On the next page, you need to choose the required platform out of iOS, Android, Web, and Other options. For this tutorial, we selected the Web option.

choose the platform

Step 5: At this point, you have to add the url of your app where you have to enable the Facebook login service. For instance, we are working with localhost, so we added the default angular development server url.

add app url

Step 6: At last, you have to copy your App ID; you can find it under the My Apps page within your Facebook app card.

your App ID

Import Angular Social Login in Angular

First import FacebookLoginProvider, SocialLoginModule, SocialAuthServiceConfig modules from the ‘angularx-social-login’ package, and then add them inside the appropriate import providers array. You also need ReactiveFormsModule to create the login form, so install it too.

Add the suggested code in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ReactiveFormsModule } from '@angular/forms';
import { FacebookLoginProvider, SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    SocialLoginModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(
              'Replace-With-Facebook-App-ID'
            )
          }
        ]
      } as SocialAuthServiceConfig,
    }    
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Create Login with Facebook in Angular

In this step, create a basic signin form using the HTML, first define a login with Facebook button, associate an event with the login method, also set the condition if the user is logged in then hide the login button else show it.

When the user logged in with Facebook, then show the user information on the form with the logout button.

Open and update the following code in app.component.html:

<h2 class="text-center mb-5">Angular Login with Facebook</h2>

<div *ngIf="!isSignedin">
  <button type="button" (click)="facebookSignin()" class="btn btn-primary btn-block">Login with Facebook</button>
</div>

<div *ngIf="isSignedin === true">
  <div class="form-group">
    <label>First Name</label>
    <input type="text" class="form-control" [value]="user.firstName" id="firstname" readonly>
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" class="form-control" [value]="user.lastName" id="lastname" readonly>
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="text" class="form-control" [value]="user.email" id="email" readonly>
  </div>

  <button type="button" (click)="logOut()" class="btn btn-primary">Log Out</button>
</div>

Open and add the following code in app.component.ts file:

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { SocialAuthService, FacebookLoginProvider, SocialUser } from 'angularx-social-login';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  myForm: FormGroup;
  user: SocialUser;
  isSignedin: boolean = null;
  
  constructor(
    private formBuilder: FormBuilder, 
    private socialAuthService: SocialAuthService
  ) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });    
    
    this.socialAuthService.authState.subscribe((user) => {
      this.user = user;
      this.isSignedin = (user != null);
      console.log(this.user);
    });
  }

  facebookSignin(): void {
    this.socialAuthService.signIn(FacebookLoginProvider.PROVIDER_ID);
  }

  logOut(): void {
    this.socialAuthService.signOut();
  }

}

Test Angular Application

You can start the angular server using the following command:

ng serve

You can check the developed app on this url:

http://localhost:4200

Conclusion

Social login is the better and quicker way to access the user using the social networking site. In this article, we explained how to log in with Facebook in an angular app with a third-party package.

I hope this tutorial will help you clear the concept of social auth in angular.