In this article, we will learn the step-by-step process of allowing users to log in to an application with Facebook and Gmail using Angular 8. Login with Facebook and Google makes it safe and easy for users to use applications. When a user clicks on the Login button with Facebook or Gmail, the user is navigated to Facebook or Google to give the app permission. In response, the user receives a Token key and other personal details. We will use the angular6-social-login Angular library in the demo.
There are a few steps to accomplish this tutorial:
- Setup a Facebook App
- Create a New Angular 8 Application
- Install and configure the “angularx-social-login” Module
- Display Sign in with Facebook Button and Basic User Profile
- Run and Test the Angular 8 Facebook Login Application
The application flow is very simple. Just a default Angular 8 component that displays a header and the Sign In with Facebook button. After login to Facebook dialogue successful, it will back to that component and change the button to the Sign Out from Facebook and display the basic user profile.
The following tools, framework, libraries, and modules are required for this tutorial:
- Node.js
- Angular 8
- angularx-social-login
- Terminal or Node.js Command Line
- IDE or Text Editor
Before moving to the steps, make sure you have installed the latest Node.js. To check it, type this command in the terminal or Node.js command line.
Logging in with Facebook and other social media platforms has made life easier for both users and developers.
This blog will help you to develop a basic Angular app to log-in with Facebook. Though this blog walks you through with writing code in the latest version of Angular as of now i.e. Angular 6, you can still achieve the same with minute changes using previous versions i.e. Angular 2, 4, 5.
Before you start writing code, you need some prerequisites that need your app to integrate with the Facebook Login service.