Facebook Authentication in Angular

Let the users sign in with their Facebook Account to your Angular application

Facebook Sign In Demo

Social Media Registration and Login are very easy and most desirable ways to register in new apps. Using existing login information from a social network provider like Facebook, Twitter, or Google, the user can sign into a third-party website instead of creating a new account specifically for that website. This simplifies registrations and logins for end users.

Adding Social Login to your applications has several perks.

1. Increase in the number of registrations.
2. Email is verified.
3. Access richer user profiles.
4. Up-to-date profiles.
5. One-click return experience.

In this article, we will see how to register using Facebook Accounts in Angular.

Angular Social Login: Social login and authentication module for Angular 9+. Supports authentication with Google, Facebook, Amazon, Microsoft, and VK out of the box. Can be extended to other providers also.

Let’s Dive In

Step 1: Get Facebook App ID

We will do some necessary and simple steps in your Facebook account in order to get the App ID and enable the login function for your app. You can use your own Facebook account or create a new account for this.

Go to Facebook for Developers and sign in, click on My Apps.

You’ll be redirected to a new page there click on Create App

My Apps Dashboard

Now choose customer, and click Next

Create App

Enter your display name and then Create App.

Display Name

Now you’ll be redirected to your App Dashboard, where you’ll find Facebook Login, click on Set Up on it.

Facebook Login Set Up

Click on Web

Give your website URL in the Site URL area and click on Save and Continue

Facebook Site URL

Now, Go to Settings → Basic

Sidebar

Now give your website privacy URL, Terms of Service URL, and User Data Deletion in the input fields.

Then, click Save Changes

App Dashboard

Change the App Mode into Live.

App Mode: Live

Step 2: Set Up Facebook Login

Click on Dashboard

App Dashboard

Now you’ll be redirected to your App Dashboard, where you’ll find Facebook Login, click on Set Up on it.

Facebook Login Set Up

Click on Web

Give your website URL in the Site URL area and click on Save and Continue

Facebook Site URL

In the sidebar, go to Facebook Login → Settings

Facebook Login → Settings

Click on Get Advanced Access

You will be redirected to the Permissions and Features Page

Try to find public_profile, Now click Get Advanced Access

public_profile

Click on Confirm.

public_profile advanced access

Again go to Facebook Login → Settings

Change Login with the JavaScript SDK into Yes, and gove your website URL in the text area of Allowed Domains for the JavaScript SDK

JavaScript SDK

Now click on Save changes.

Project Structure

First, create the base folder (facebook-authentication-project) which contains all the project-related files and directories.

$ ng new facebook-authentication-project

Step 3: Initialize App

Now our next step is to initialize our project by running the below command in the terminal.

$ ng serve --open

Now we will install the required dependencies.

$ npm i angularx-social-login, bootstrap

Now, generate two components, login, and dashboard.

$ ng g c login

login component

$ ng g c dashboard

dashboard component

Step 4: Setup your Code

Now our next step is to initialize our project by running the below command in the terminal.

4.1 Configure app.module.ts

‘Now we set up app.module.ts . In your AppModule, import the SocialLoginModule.

4.2 Setup app-routing.module.ts

create the routing URLs for Login and Dashboard Page.

In App HTML page app.component.html

provide the <router-outlet></router-outlet>

app.component.html

4.3 Setup Login Component

Now go to login.component.ts and set up your signInFacebookHandler code.

1. First import FacebookLoginProvider and SocialAuthService from ‘angularx-social-login’

2. Now, writhe the signInFacebookHandler() function in login.component

Now setup the login.component.html page

4.4 Setup Dashboard Component

Now Similar to Login Component, first we will set up the dashboard.component.ts and then login.component.html

Now go to dashboard.component.ts and set up your ngOnInit() code.

Now set up the Html code for Dashboard in dashboard.component.ts file.

Our App is completed. Now we can test.

Step 5: Test the work

Startup the server and open the project URL on the browser.

The project URL is https://localhost:4200

Hit this URL on the browser

Continue with Facebook

Click on Continue with Facebook

A dialog box will open, enter your credentials

Facebook Credential

Now you can able to get your credentials. (Here: Name, and Photo).

Dashboard

Now you are good to go with the registration process using your Facebook credentials.

Note: Facebook never shares their user’s email with 3rd party applications. Instead, it provides “id” which we can use for the Registration and Login functionalities in our website or application.

Conclusion

In this article, We have seen:-

1. How to generate Facebook App ID using Facebook for Developers.
2. How to Set Up Facebook Login
3. How to setup App Module and authenticate Facebook users using Angular
4. How to perform Routing in Angular.
5. How to store data in your local storage.
6. How to get the data from local storage and display it on your dashboard.

You can find the code [here].

Read my other articles:

Google Authentication in Angular

How to Host React Web App on Firebase

Why SQL is important in Data Science?

Cloud Computing revolution in aerospace and defence

If you like this article, give it a clap 👏