Angular 12 Facebook OAuth Social Login Tutorial

Angular 12 Facebook OAuth Social Login 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 permission, the personal details of users will be received.

In this Angular Sign-in with the 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 that’s 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 log in to an application; in social login, users sign in to an app using the social networking platforms, social sites make the login and sign-in 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:https://fefd442acef228d1f80c46b0b48a5489.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html

npm install -g @angular/cli

BashCopy

Thereafter, use the command to install a new angular app:

ng new ng-demo-app

BashCopy

Head over to angular application:

cd ng-demo-app

BashCopy

Add Bootstrap Package

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

npm i bootstrap

BashCopy

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

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

JSONCopy

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:

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

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

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

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

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:

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

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.