Angular 12 Facebook OAuth Social Login Tutorial

Last updated on: by Editorial Team

Angular 12 Login with Facebook tutorial, In this comprehensive tutorial, you will discover how to create a login with Facebook in Angular using Facebook OAuth and angularx social login package.

This Angular Facebook Login example will show you how to sign with Facebook effortlessly. We will create a simple login with a Facebook button; the user clicks on it right after the Facebook app permission page will appear. After giving the permission, the personal details of users will be received.

In this Angular Signin with Facebook tutorial, you will use the angularx-social-login package to establish the consensus between the angular app and Facebook securely.

The angularx-social-login library helps to implement a social login and auth module for Angular 9+. You can integrate social login for Google, Facebook, Amazon, plus VK. If thats not enough, then you can also go for custom providers.

Angular 12 Login with Facebook OAuth Example

Social login is a better and faster way to logging in to an application; in social login, user signin to an app using the social networking platforms, social sites makes the login and signin process easy.

  • Step 1: Setting Up Angular Environment
  • Step 2: Add Bootstrap Package
  • Step 3: Get Facebook App ID
  • Step 4: Install Angular Social Login Package
  • Step 5: Add Social Login Modules
  • Step 6: Implement Facebook Social Login in Angular
  • Step 7: Run Development Server

Install New Angular Project

First, install the angular CLI using the required command:

npm install -g @angular/cli

Thereafter, use command to install a new angular app:

ng new ng-demo-app

Head over to angular application:

cd ng-demo-app

Add Bootstrap Package

Next, you have to add bootstrap package hence install using the following command:

npm i bootstrap

Register the Bootstrap CSS in styles array within the angular.json file:

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

Get Facebook App ID

In this step, you will learn to create a Facebook app; it allows you to access the Facebook app id. Hence get inside the Facebook Developer Dashboard with your Facebook account

Step 1: Once you landed inside the Facebook developer dashboard, click on the “Create App” button:

Create App

Step 2: Next, you see the Create an App popup, here you have to add the app display name and valid app contact email:

Create an App popup

Step 3: Then, you have reached to Add products to your app page, search for a Facebook login card and click on it:

Add products to your app

Step 4: Afterward, you need to choose the platform for your app from the iOS, Android, Web or other:

choose the platform for your app

Step 5: On the next screen you have to add the URL of the site which needs to be enabled for auth login:

add the URL of the site

Step 6: Eventually, click on the My Apps link on the top navigation segment. You will see the app information within the card; from there, you can grab the Facebook App id:

Facebook App id

Install Angular Social Login Package

Furthermore, you need to install the angularx-social-login plugin:

npm install angularx-social-login

Add Social Login Modules in App Module

Add the SocialLoginModule, SocialAuthServiceConfi, FacebookLoginProvider and ReactiveFormsModule in 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(
              'Facebook-App-ID-Goes-Here'
            )
          }
        ]
      } as SocialAuthServiceConfig,
    }    
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Implement Facebook Social Login in Angular

After that, you have to create a simple form using the Bootstrap form component, also create a login with a Facebook button with which you bind a custom function for Facebook social login.

Add recommended code in app.component.html file:

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

<div *ngIf="!isLoggedin">
  <button type="button" (click)="loginWithFacebook()" class="btn btn-primary btn-block">Signin with Facebook</button>
</div>

<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)="signOut()" class="btn btn-primary">Sign Out</button>
</div>

Insert the suggested code inside the 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 {

  loginForm: FormGroup;
  socialUser: SocialUser;
  isLoggedin: boolean = null;
  
  constructor(
    private formBuilder: FormBuilder, 
    private socialAuthService: SocialAuthService
  ) { 
    console.log(this.isLoggedin)
  }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });    
    
    this.socialAuthService.authState.subscribe((user) => {
      this.socialUser = user;
      this.isLoggedin = (user != null);
    });
  }

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

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

}

Run Angular Application

Ultimately, social login integrated into angular, and now you need to start the angular development server to test the app:

ng serve

The provided url will start the project:

http://localhost:4200

Angular 12 Facebook OAuth Social Login Tutorial

Conclusion

The angular Facebook social login tutorial is completed; this post helped us understand to create an angular Facebook login auth feature using Facebook app id using the angularx-social-login. If you liked this guide, do consider it to share it with others.