---
title: "Implementing SSO with Angular and AWS Cognito"
published_at: "2022-02-21T11:30:40+00:00"
modified_at: "2024-11-20T12:24:10+00:00"
url: "https://www.syncfusion.com/blogs/post/implementing-sso-with-angular-and-aws-cognito"
excerpt: "Single sign-on (SSO) is one of the widely used user authentications in modern web applications. Google, Facebook, LinkedIn are some of the most popular SSO services available, and they allow users to register and login in no time. In this..."
taxonomy_category:
  - "Angular"
  - "Development"
  - "Tips and Tricks"
  - "Web"
taxonomy_post_tag:
  - "Angular"
  - "Authentication"
  - "AWS"
  - "productivity"
  - "Web Development"
---

# Implementing SSO with Angular and AWS Cognito

[Chameera Dulanga](https://www.syncfusion.com/blogs/author/chameera-dulanga)

![Implementing SSO with Angular and AWS Cognito](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Implementing-SSO-with-Angular-and-AWS-Cognito.png)


[Single sign-on](https://en.wikipedia.org/wiki/Single_sign-on)
 (SSO) is one of the widely used user authentications in modern web applications. [Google](https://en.wikipedia.org/wiki/Google)
, [Facebook](https://en.wikipedia.org/wiki/Facebook)
, [LinkedIn](https://en.wikipedia.org/wiki/LinkedIn)
 are some of the most popular SSO services available, and they allow users to register and login in no time.

In this article, we will focus on implementing single sign-on for Angular applications using [AWS Cognito](https://aws.amazon.com/cognito/)
 and [Amplify.](https://aws.amazon.com/amplify/)

## Step 1: Creating a new Angular application.

First, we need an Angular application. If you have already installed Angular CLI, you can simply create a new application with the following command.

| ng new |
| --- |

If not, you need to install Angular CLI using the following command.

| npm install -g @angular/cli |
| --- |

After creating the application, navigate to the application folder and run the following command to ensure that the application is working.

| ng serve |
| --- |


## Step 2: Installing Amplify.

Next, you need to install the Amplify CLI and configure it with your AWS account. You can use NPM to install the Amplify CLI as shown in the following snippet.

| npm install -g @aws-amplify/cli |
| --- |

After installation, enter the command **amplify configure** to start AWS account configuration. Then, you will be redirected to the AWS login window in the browser, and you need to log into your AWS account.

Then, go back to the terminal and press Enter to continue the wizard. There, you will be prompted to select a region and a username for a new IAM user.

![Providing region and username in the terminal](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Providing-region-and-username-in-the-terminal.png)After entering the requested details, you will be redirected to the AWS IAM user creation wizard to complete the user creation process. There, you need to enter the relevant details and make sure to assign programmatic access and administrator access.

![Assigning programmatic and administration access in the AWS IAM creation wizard](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Assigning-programmatic-and-administration-access-in-the-AWS-IAM-creation-wizard.png)Finally, you will receive a .csv file with an **accessKeyId** and**secretAccessKey.** Make sure to save these secrets, since you need to enter them in the terminal to complete the configuration.

![Providing the accessKeyId and secretAccessKey in the terminal](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Providing-the-accessKeyId-and-secretAccessKey-in-the-terminal.png)

## Step 3: Integrating Amplify with Angular.

Now, start to integrate your Angular app with Amplify. For that, you need to install the [aws-amplify-angular](https://www.npmjs.com/package/aws-amplify-angular)
 library.

| npm install aws-amplify-angular |
| --- |

After installation, configure the Angular application with Amplify by executing the amplify init command. It will ask you for several settings, and you can use the previously created IAM user profile as the AWS profile.

![Providing the settings after executing the amplify init command](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Providing-the-settings-after-executing-the-amplify-init-command.png)If you are using Angular version 6+, add the following code to the **src/polyfill.ts** file.

```
(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};
```


## Step 4: Configuring AWS Cognito user pool.

AWS amplify provides a variety of services. In this example, we are using Amplify Auth to implement user authentication. You can install Amplify Auth in your application by running the amplify auth add command.

You will see all the available user pools there, and you need to select the newly created user pool from that list.

![Selecting the newly created user pool](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Selecting-the-newly-created-user-pool.png)Once you are done with the configurations, it will create an AWS Cognito user pool in your AWS account. So, go to your AWS dashboard, select Cognito service, change the region to your IAM users’ region, and select **Manage User Pools**.

![Selecting Manage User Pools in Amazon Cognito](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Selecting-Manage-User-Pools-in-Amazon-Cognito.png)You will see all the available user pools. You need to select the newly created user pool from that list.

![Selecting the newly created user pool from the list](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Selecting-the-newly-created-user-pool-from-the-list.png)Cognito user pool settings allow you to change multiple authentication options like password strength, signup options, social media, and SAML login integrations. But before that, you need to register a domain for the hosted UI for user login.

For that, navigate to **Domain name** under** App integration**and enter a suitable name for your domain.

![Providing suitable name for the domain](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Providing-suitable-name-for-the-domain.png)Then, navigate to **App client settings** and enter the callback URLs and other necessary details in the ** clientWeb**section.

![Provide callback URL and other settings in App client settings.](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Provide-callback-URL-and-other-settings-in-App-client-settings..png)Now, click **Launch Hosted UI** and open the current login window if you want. However, there won’t be any single sign-on option since we haven’t configured it yet in our Angular app. So, let’s see how to enable Google login.

## Step 5: Enabling Google login.

First, you need to enable federated identity providers. For that, navigate to the **Identity providers** tab under ** Federations**. There, select Google and enter the relevant details.

![Choosing Google as external federated identity](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Choosing-Google-as-external-federated-identity.png)But you need to have a Google App for your application to get these details. You can easily create a Google App using a Google Developer account by following Google [documentation](https://developers.google.com/identity/sign-in/web/sign-in)
.

## Step 6: Attribute mapping.

Now, you need to map identity provider attributes to user pool attributes. For that, navigate to **Attribute mapping** and select the email option under the Google tab.

![Attribute mapping](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Attribute-mapping.png)After that, go back to App Client Settings and enable Google as an identity provider.

![Choosing Google as the identify provider](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Choosing-Google-as-the-identify-provider.png)Now, you can launch the hosted UI. You will see a new option to log in with your Google account.

![Option to login with Google account](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Option-to-login-with-Google-account.png)Once you log in, you will be redirected to the application URL you provided. In this case, http://localhost:4200/.

That’s it. You have successfully enabled single sign-on with Google in your Angular application.


## Conclusion

Single sign-on provides an easy and secure method to handle user authentication for applications.

In this article, I walked you through the steps of enabling single sign-on for Google login in an Angular application using AWS Cognito and Amplify. You can easily enable SSO with other federated identity providers like Facebook, LinkedIn, or Amazon.

I hope you have found this useful. Thank you for reading.

Syncfusion’s [Angular UI component](https://www.syncfusion.com/angular-ui-components)
 library is the only suite that you will ever need to build an application, containing over 65 high-performance, lightweight, modular, and responsive UI components in a single package.

For existing customers, the newest Essential Studio® version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads)
 page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out the available features. Also, check out our demos on [GitHub](https://github.com/syncfusion)
.

You can contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/angular)
. We are always happy to assist you!

## Related blogs

- [Angular Dependency Injection: A Complete Guide](https://www.syncfusion.com/blogs/post/angular-dependency-injection-a-complete-guide.aspx)
- [Customize the Enter and Shift+Enter Keys in Angular Rich Text Editor for Better Productivity](https://www.syncfusion.com/blogs/post/customize-the-enter-and-shiftenter-keys-in-angular-rich-text-editor-for-better-productivity.aspx)
- [Top 10 Features in Angular 13 Every Developer Should Know](https://www.syncfusion.com/blogs/post/top-10-features-in-angular-13-every-developer-should-know.aspx)
- [Top 5 Best Practices for Angular App Security](https://www.syncfusion.com/blogs/post/top-5-best-practices-angular-app-security.aspx)