Implementing SSO with Angular and AWS Cognito | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Implementing SSO with Angular and AWS Cognito

Implementing SSO with Angular and AWS Cognito

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 article, we will focus on implementing single sign-on for Angular applications using AWS Cognito and 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

Syncfusion Angular component suite is the only suite you will ever need to develop an Angular application faster.

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 terminalAfter 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 wizardFinally, 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

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 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 commandIf 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 },
};

Find the right property to fit your requirement by exploring the complete documentation for Syncfusion’s Angular components.

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 poolOnce 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 CognitoYou 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 listCognito 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 domainThen, 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.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 identityBut 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.

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 mappingAfter that, go back to App Client Settings and enable Google as an identity provider.

Choosing Google as the identify providerNow, you can launch the hosted UI. You will see a new option to log in with your Google account.

Option to login with Google accountOnce 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.

Be amazed exploring what kind of application you can develop using Syncfusion Angular components.

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 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 page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features. Also, check out our demos on GitHub.

You can contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Comments (2)

Hi. Can you please share the angular source of Git.

Need one more help for the below scenario.

Created Cognito pool, then included identity provider under “Sign in experience” tab.
Using Amplify authenticator, how can enable/view the identity provider for sign in from angular and amplify authenticator.

Can u pls share the git angular source.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top