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.