Single Sign On(SSO) with Amazon and Facebook in Angular

Table of contents

Reading Time: 4 minutes

Introduction

In the blog, we are going to learn about Amazon and Facebook single sign-on using angularx social login package with the help of an example. We will create a simple login button for Amazon and Facebook. When a user clicks the app permission page will appear.

Here you will discover how to create a login with Facebook and Amazon in Angular using OAuth Social Login.

Once the user gives permission to the app, the personal information/details will be received by the app.
In the mechanism, you will use the angularx-social-login package to establish the connection between the angular app with Amazon and Facebook securely.

The angularx-social-login ( @abacritt/angularx-social-login ) module helps to implement a social login and auth module for Angular 9+ apps. You can integrate social login for plus VK, Facebook, and Amazon. If that’s not enough, you can also go for custom providers.

Amazon OAuth Example

The OAuth Login (Social Login) provides an easy and faster way to implement the Single Sign On into a web app. It eases the login and sign-in process through social sites like Facebook, Instagram, and Amazon.

So below are the step-wise step process to set up the Sign-On in the angular application.

Step1: Create the developer Account on Amazon for single sign-on.

To implement SSO firstly you need to create a developer account on Amazon. So to start with the developer’s Account go to this link: https://developer.amazon.com or follow the below reference image.

Amazon Developer Console for single sign on

Step 2: Setup Your Single sign-on Auth Provider: Get Amazon App ID

In this step, you need to create an Amazon app; and this app makes a client id for you. Hence to create the amazon app you need to get inside the Amazon Developer Dashboard with your Amazon account for the Amazon app.
Amazon: Amazon Developer Dashboard

Once you landed inside the Amazon developer dashboard, You need to create an Amazon security profile to receive the Amazon client ID and client secret id. So you need to click on the Create a Security Profile button. The screenshot is also attached for reference.

Now type the Security Profile Name, Security Profile Description, and a Consent Privacy Notice URL for your app, and then click on the save button.

Once you clicked on the save button the client id and the client’s secret is generated for you.

amazon OAuth2 Credentials for single sign on

Just copy the client ID credentials for the Angular app or note it in the notepad.

First, install the Angular CLI using the required command:

npm install -g @angular/cli

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

ng new ng-demo-app

Head over to the angular application and then you need to install the angularx-social-login module using the following command:

npm install angularx-social-login --force

After installing angularx-social-login module add the SocialLoginModule, SocialAuthServiceConfi, FacebookLoginProvider, AmazonLoginProvider, and ReactiveFormsModule in the app.module.ts file for configuring the single sign-on.

Step5: Create the SSO buttons for Amazon

After that, you can add the template in the component.html file and the login in the component.ts file.

component.html file

component.ts file

Run Your Application

Now your Single Sign On is integrated with your angular application and now you are able to start the localhost server and check the functionality.

Conclusion

Single Sign On(SSO) with Amazon and Facebook in Angular is completed now. This blog helped you to understand how to create the SSO using Amazon and Facebook using the client-id.
Thanks for reading, and I hope this blog helped you learn about Single Sign On. Feel free to reach out to me at my Linkedln or Frontend Studio of Knoldus on LinkedIn if you want to connect or have any questions!