{"id":358,"date":"2021-11-03T07:06:12","date_gmt":"2021-11-03T07:06:12","guid":{"rendered":"http:\/\/18.141.20.153\/?p=358"},"modified":"2025-08-22T07:22:01","modified_gmt":"2025-08-22T07:22:01","slug":"how-to-build-an-angular-authentication-application-using-aws-amplify","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/","title":{"rendered":"How to build an Angular Authentication Application using AWS Amplify?"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">13<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p><img src=\"https:\/\/lh4.googleusercontent.com\/jtcbDegYnsaXBnu-B3ELZxLowQX7mA53lhRSwMtqGGfJTJ09CP7WDDMMgzeT8Ru1ybdvYERUJQGC_umuQOUCf8kjwNz2djk9ChaOIevR_MDNQnebLlpcD5XDwZjmUakq5ga8uqyo3HDgBoQlpQPSElXEtoZgpUptRp9RP9rkSJZWyjexQjJO17Mu\" style=\"width: 1600px;\"><\/p>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we will discuss how to build an <a href=\"https:\/\/www.workfall.com\/learning\/blog\/how-to-plot-bar-charts-in-angular-using-npm-package-highcharts\/\">Angular<\/a> Application using AWS Amplify and will demonstrate how to build an Authentication Application using AWS Amplify and Angular web framework without configuring the backend manually.<\/p>\n\n\n\n<p>In this blog, we will cover:<\/p>\n\n\n\n<ul><li>Need for Serverless Frameworks<\/li><li>Benefits of Serverless Frameworks<\/li><li>Popular Serverless Frameworks<\/li><li>Why is Amplify considered to be the best option?<\/li><li>What is AWS Amplify?<\/li><li>Scenarios where AWS Amplify is the best option<\/li><li>Benefits of AWS Amplify<\/li><li>Build an application using AWS Amplify and Angular web framework to handle authentication of users (Signup and Login functionalities)<\/li><\/ul>\n\n\n\n<h2>Need for Serverless Frameworks<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">\u2018Serverless\u2019 in its own term has two different aspects each of which describes its own application architecture. First is the Back-End as a Service &#8211; BaaS which is usually monitored and maintained by some third party. Second is the Function as a Service &#8211; FaaS which initiates the execution of a function through certain events triggered on demand.&nbsp; Serverless Frameworks offer an enormous number of advantages over traditional cloud-based or server-centric infrastructure. Serverless Frameworks make it easy for developers to build and spin up applications faster with the ability to scale on-demand, accommodate infrastructure changes when required, and reduce costs. With the use of Serverless Frameworks, developers need not worry about managing and provisioning backend servers beforehand.<\/p>\n\n\n\n<h2>Benefits of Serverless Frameworks<\/h2>\n\n\n\n<p>Let\u2019s dive into some of the major benefits of using a serverless framework for a project:<\/p>\n\n\n\n<ul><li><strong>Easy Deployment: <\/strong>A serverless framework for an application consisting of multiple API calls, authentication, etc. could be perfect if you want to spend less time in the development of the backend and spin up the application fast. Deploying an application on-demand within a few hours makes a serverless approach the best solution. You need not worry about the infrastructure since the application, once deployed easily, can scale easily.<\/li><\/ul>\n\n\n\n<ul><li><strong>Spend more time <\/strong>designing the UX: For a customer-based application, customers do not care about your infrastructure. They do not get to see how you are handling your backend with chunks of code. The only thing they notice is the UX of the application i.e. the front end since the look and feel is more important to them. Using a serverless framework, you can spend more time developing the front end and worry less about the back end.<\/li><\/ul>\n\n\n\n<ul><li><strong>Reduction in Cost: <\/strong>Whether it be a startup or a well-established business, one of the major considerations is finding out a way to cut down costs with ease. For any business running a customer-based application, going serverless is considered to be the best way of dropping down huge costs. Since a serverless framework takes less computing power and requires no human intervention, there is a huge amount of drop in the costs. The amount differs depending on your use case.<\/li><\/ul>\n\n\n\n<ul><li><strong>Scalability: <\/strong>When it comes to business planning, if your business grows at a huge pace then you need to consider if your physical server can handle a huge amount of traffic. Moving to a serverless approach, lets you accommodate your requirements on-demand and adjust your infrastructure accordingly. This in turn reduces the burden of provisioning extra servers and increasing costs without knowing whether it is needed for sure.<\/li><\/ul>\n\n\n\n<p class=\"has-text-align-justify\">Apart from the above-mentioned major benefits of the Serverless Frameworks, some of the additional benefits involve:<\/p>\n\n\n\n<ul><li>Improvisation in Latency<\/li><li>Flexibility<\/li><li>On-demand usage<\/li><li>Increased efficiency<\/li><li>Need not worry about the underlying infrastructure<\/li><li>Optimization<\/li><li>Easier to manage via console<\/li><\/ul>\n\n\n\n<h2>Popular Serverless Frameworks<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/T-CJfTnR53ILFU9LPBeI-93EdCGrQMwBlEExhLQtdlOjANlE0_F3Lr22v7sV92DsTcnm3YBI4GtEIhqR82TsKJz5ros77Sylf3UKVJNC-rX_3PV6TAw4UM9Dcex7SXz1HpE0f4ta-caBoy-dAeqqHWwSYtPrGXQW9DVtYOUk7yM773XntOZ3BPhg\" alt=\"Popular Serverless Frameworks\"\/><\/figure>\n\n\n\n<ul><li><strong>Claudia.js:<\/strong> Claudia.js provisions developers a means of building and deploying scalable event-driven Node.js projects to AWS Lambda and API Gateway.<\/li><\/ul>\n\n\n\n<ul><li><strong>Middy: <\/strong>Middy serves as a simple middleware engine that lets developers focus on business logic and simplify the AWS Lambda code using Node.js rather than focusing on additional aspects like authentication, authorization, validation, etc.<\/li><\/ul>\n\n\n\n<ul><li><strong>Architect: The architect<\/strong> makes a developer&#8217;s life easier when it comes to building highly scalable, serverless applications with minimal amounts of code. The Architect is an Infrastructure as Code (IaC) framework that allows developers to create, deploy and maintain AWS cloud function-based applications.<\/li><\/ul>\n\n\n\n<ul><li><strong>Jets: <\/strong>Jets is a Ruby Serverless Framework that aids Ruby developers in building serverless applications by mapping Lambda functions and API Gateway resources.<\/li><\/ul>\n\n\n\n<ul><li><strong>Up: <\/strong>Up lets developers deploy infinitely scalable serverless applications, APIs, and static websites within no time. It focuses on deploying vanilla HTTP servers, thus, there comes no need to invest time in learning some new protocol.<\/li><\/ul>\n\n\n\n<ul><li><strong>Serverless: <\/strong>The name of the framework talks for itself. The framework grants developers the ability to build web, mobile, and IoT applications that comprise microservices that execute in response to an event.<\/li><\/ul>\n\n\n\n<ul><li><strong>Sigma: <\/strong>Sigma is the first completely browser-based IDE built with the purpose of easing the development of serverless applications. Sigma furnishes drag-and-drop code generation which gives developers the flexibility to integrate vital serverless services, such as API Gateway, S3, etc.<\/li><\/ul>\n\n\n\n<ul><li><strong>Pulumi: <\/strong>Pulmuni stands as an open-source SDK that developers can leverage to create, deploy and manage cloud infrastructure. It functions with VMs, networks, and databases. In addition to containers, Kubernetes clusters, and serverless functions.<\/li><\/ul>\n\n\n\n<ul><li><strong>Auth0: <\/strong>Auth0\u2019s Webtask is an addition to the serverless framework. It gives developers the freedom to create applications without worrying about the underlying infrastructure\u2019s compatibility. Developers can emphasize writing server-side logic and deploy their work seamlessly using Webtask\u2019s CLI. It basically removes the need to configure a backend for simple mobile or single-page apps.&nbsp;<\/li><\/ul>\n\n\n\n<ul><li><strong>Riff: <\/strong>The riff serves as an open-source platform for building and executing functions, applications, and containers on Kubernetes. The integrated CLI equips Kubernetes lovers with the ability to manage their function workflow with Knative.&nbsp;<\/li><\/ul>\n\n\n\n<ul><li><strong>Squeezer: <\/strong>Squeezer framework is the world\u2019s first platform to merge the robustness of microservices with the immutability of blockchain technology. Its management-less maintenance allows developers to deploy the code and forget about handling scaling requirements.<\/li><\/ul>\n\n\n\n<ul><li><strong>PureSec: <\/strong>PureSec enhances the security of one&#8217;s serverless application by providing a Serverless Security Platform by protecting the application end-to-end. It achieves this by coupling the SSP process with the CICD pipeline.<\/li><\/ul>\n\n\n\n<ul><li><strong>Snipcart: <\/strong>Snipcart is a dual-nature serverless framework. On one side it acts as an eCommerce solution helping people with smaller needs on the other side it allows users to perform back-end actions using its very dashboard which is based on API calls and webhooks.<\/li><\/ul>\n\n\n\n<h2>Why is Amplify considered to be the best option?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In the era of cutting down costs while deploying applications in an easier and faster way, there is a major competition in the market amongst the different types of serverless frameworks<strong>. <\/strong>If you are planning to build an application (mobile\/web) from scratch or thinking to develop an already existing application, <strong>Amplify<\/strong> is considered to be a great framework. Amplify lets developers take advantage of already built functionalities, in turn, to help them create efficient full-stack applications. In addition to that, Amplify can also be used for React Native app development.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Nowadays, it is said that the cloud will be amplified in the near future. There are major cloud competitors in the market but the growth of Amazon Web Services &#8211; AWS has recently doubled drastically competing the giants such as Google Cloud and Microsoft Azure. AWS recently started focusing on coming up with services for building a very robust, secure, and scalable solution to facilitate web and mobile application development. To make life easier for developers, AWS comes with the <strong>Amplify <\/strong>library<strong> <\/strong>plugin &#8211; <strong>AWS Amplify <\/strong>to simplify the flow of building complex web and mobile-based applications.<\/p>\n\n\n\n<h2><strong>What is AWS Amplify?<\/strong><\/h2>\n\n\n\n<p class=\"has-text-align-justify\">AWS Amplify is designed to provide an interactive and attractive interface for developers who wish to perform tasks in a scalable and secure manner. It allows developers to build JavaScript applications following the best practices leading to the fastening of the development cycles. In simplest terms, it is a Serverless Framework platform with a set of libraries, command-line interface, and UI components that let developers build secure, scalable web and mobile applications backend and integrate it with mobile platforms such as built-in iOS, Android, React Native, Ionic, and Flutter or web frameworks such as React, Angular, Vue, and Next.js. AWS Amplify even provides the ability of easy application authentication integration with the service, Amazon Cognito. It in turn makes it easy to authenticate users, store data securely, monitor usage metrics, and implementation of server-side coding.&nbsp;<\/p>\n\n\n\n<p><strong>Scenarios where AWS Amplify is the best option:<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Let\u2019s have a look at some of the much-needed business requirements where AWS Amplify is considered the best option:<\/p>\n\n\n\n<ul><li>Building a cloud-connected application on the web and mobile platforms<\/li><li>Building a custom backend using ready-to-use components<\/li><li>Make use of JavaScript in mobile app development<\/li><li>Do not bother about the underlying infrastructure (i.e. maintaining servers and backend)<\/li><li>When you prefer faster and scalable applications<\/li><li>Enhancement of any existing application using cloud features<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/AwTvJBgoDeO7L75lUEtkQ7VwPMUktCAq2qt4aw8waBPt8MG4NPHngDM4koaBaRj3t-Ri5wVi0zxTsQH9-tQcjj6klxsn3afAxKNl3P92qYdNKHJHQKpc7sRGterdPDGulYPWHoaF9eegH7pZURw42U8CAUuo8D1WsG9degyRXla5_JADaf3t-yQC\" alt=\"AWS Amplify\"\/><\/figure>\n\n\n\n<h2>Benefits of AWS Amplify<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">AWS Amplify framework encapsulates various integral services under the hood which simplifies the process of creation and maintenance of robust, secure, scalable, and high-performance web and mobile applications. Let\u2019s have a little peek under the hood to understand the benefits of using AWS Amplify:<\/p>\n\n\n\n<ul><li><strong>Easy Backend Configuration:<\/strong> AWS Amplify streamlines the process of development through AWS Amplify\u2019s Admin UI and CLI which makes the process easier and faster to configure the backends of the mobile and web applications. The Admin UI presents ways of integrating authentication, authorization, modeling data, and managing users, all in a single place.<\/li><\/ul>\n\n\n\n<ul><li><strong>Flawlessly Connect Frontends<\/strong>: AWS Amplify automatically understands the front-end framework used for static websites by merely connecting Amplify with the source code repository. Amplify would then build the application and deploy it globally on the content delivery network (CDN). Every time the developer commits the frontend code into the repository the build process starts by deploying the backend followed by the frontend.<\/li><\/ul>\n\n\n\n<ul><li><strong>Utterly Simple Deployment:<\/strong> Deployments using Amazon Amplify are extremely simple and take just a few clicks. In order to deploy an app, the developer has to connect a code repository, confirm build settings for the front end and the backend, add environment variables (if any), and then choose to Save and Deploy to deploy the application to the global content delivery network (CDN).<\/li><\/ul>\n\n\n\n<ul><li><strong>Smooth Content Management:<\/strong> With the help of Admin UI, the developers can delegate access to content editors, and testers to keep the application\u2019s data up-to-date and assure the application remains bug-free. Admin UI also gives developers the flexibility to manage app users, their authentication, creation\/editing of users\u2019 groups, etc.<\/li><\/ul>\n\n\n\n<p>Apart from the above-mentioned benefits, AWS Amplify also provides the following:<\/p>\n\n\n\n<ul><li>Experiences like Native at lower costs<\/li><li>Integration with multiple mobile platforms and web frameworks<\/li><li>UI-driven modern approaches to building scalable applications<\/li><li>Faster experience<\/li><li>Flexibility<\/li><li>On-demand infrastructure scaling<\/li><li>Automated testing for mobile applications to release updates at a faster pace<\/li><\/ul>\n\n\n\n<h2><strong>Companies which are using Amplify Framework<\/strong><\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Amplify can be used by developers at start-ups and enterprises to accelerate their development speed. Following are some of the big companies which are using Amplify tools and services to enable mobile and front-end web development.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/H10rUejcY9BuP27Zb9P1txqvd7WxXTMBw8NJnFA324QmoxQVWClB5hOYsIYPK7RySagT-Jv39OoLLc51v3ffizLp0GWoYB5mKS-heh0jgWwIMel6JRdSGEll8VqtfCNS_mIEMJUKXKvCXeJ9ByC8jg2CehonbtcUQMvvEQWouvJNvD5LhC1uVVJt\" alt=\"Companies which are using Amplify Framework\"\/><\/figure>\n\n\n\n<h2><strong>Let\u2019s do hands-on<\/strong><\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Considering a scenario where we want to build an Authentication application with Signup and Login functionalities using the web framework Angular and AWS Amplify. The signed-up user details will be displayed in Amazon Cognito:<\/p>\n\n\n\n<p><strong>To implement this, we will do the following:<\/strong><\/p>\n\n\n\n<ol><li>Ensure that the prerequisites are configured.<\/li><li>Install the Amplify CLI<\/li><li>Configure AWS Amplify<\/li><li>Create an IAM user with Administrator privileges<\/li><li>Create an Angular application<\/li><li>Initialize the Amplify project<\/li><li>Set up the Authentication service using Amplify CLI<\/li><li>Build and host the application<\/li><li>Check Amazon Cognito for the user authentication confirmation<\/li><\/ol>\n\n\n\n<p><strong>Pre-requisites:<\/strong><\/p>\n\n\n\n<ul><li><strong>NodeJs v10.x or later: <\/strong><a href=\"https:\/\/nodejs.org\/en\/download\/\"><strong>Download Now<\/strong><\/a><\/li><li><strong>AWS Account: <\/strong><a href=\"https:\/\/aws.amazon.com\/\"><strong>Create one<\/strong><\/a><\/li><\/ul>\n\n\n\n<p><strong>Install the Amplify CLI using the command:<\/strong><\/p>\n\n\n\n<p><code>npm install -g @aws-amplify\/cli<\/code><\/p>\n\n\n\n<p><strong>On successful installation, the console will print the below-mentioned message:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/v8pra6szIEs1hcx7L8rBm2r5R_-tth0Z_Laa9cPGWsj6OzX104UiOSGAz5PCvPdOq5vKXdKDGLk3tGT57MJ9ZUAzAhz1a_t3lVyL25uqcCkeDFG8m6xVCNsmacpFbVg4gql2ALXZ561RmR-WtOgGi-rMFotUfVIqQcSzM_26iG30bFEUlbMMRdD8\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Next, Configure AWS Amplify and sign in to your account using the command:<\/strong><\/p>\n\n\n\n<p><code>amplify configure<\/code><\/p>\n\n\n\n<p><strong>Sign in to your AWS administrator account and press enter:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/l0_d29VCR1zWsrEdifmgl38c9gGGl6cYqJaoeF98WNxVLKXgF5WzozO4J0We1Ow5d-1O67QVOYi3F__Wm0tkMdb1cL0OOaX6xv5XFr92YYS3AJtpbJPxaM3FJtiqeffiTjyQYoAzGUl2crMFOQ-xrkoStYW5366wQ24rc72ADB_MRuqLw2ZgkxYD\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>Now, select the AWS region, and user name and you will be directed to the AWS IAM console for user creation:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/AXr7hOidqir55JMHQPLqtLL0A9JjYMbU1oPrOMwzpRlZb_qvf4BQYzDq2UNYiYIu_aW4nMJbkkjO6JD5vuS1QiC4FOzJ6uf0uFD5_vGtigMIrhsC0iC3AicdL57JHbPvYYmMRyT2I-JXpKv_Z9Jix-FUsaBL323nnfhkyl7yl4YYxKAUFMi2jBNy\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Enter the desired Username and select the \u2018Access Type\u2019 as \u2018Programmatic Access\u2019 for the user and click on the \u2018Next: Permissions\u2019 button<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/tAib8moF6XAE6YKYFNIDAsKxrwMMSZf_NuUrXLAX9-wLBRZHfcV4rH1asSC1ZcsBapfolX21-AYRW0ywSGdtK_o5kSNq-9uE3J4NPp-9yp0SfNe8kA9jHiuha6KaSR5v5lieHH-HaLxerjJG9D67vqytLzigGiqSC4bFVm1iFSQJ5g-r5W50xJ5E\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>Select \u2018Attach existing policies directly\u2019 and select \u2018AdministratorAccess\u2019 and click on \u2018Next: Tags\u2019 button.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/RCfwrgA5yODf0-MDurhtHoy-vXgkfRxQp406-EtnfHknZ3bDYDzozftiAecjkgrTff9Mui00yf-moW6K0tOre9KzAsdJdS96etU0vE6aAQprPl3FsYnptIsHYIdhkNf_-RXpQfsDyTwnViNC6EnLRq28u2_Gep1y5XnHOEl1G8-i2Fq5WaAQhF76\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Add Tags (if any). In this blog, we\u2019ll be skipping the tags. Once done, click on the \u2018Next: Review\u2019 button, to review the new user and policies applicable for the same.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/752_Xmj8gJL08pNpo5rRw4dYn0FRG6xEODgmIpewZ-w5TJfRAa9d_lltgKOFjzfA-QjJp6_glewjBcdtZ9yC-7o0b1snOf5FwUv--hUEaAhbN6UzoAd6t_fC_Enr9cv7SpVNnwBY24AmnptczP47CXivYjAnnOWbtfh00AbvDoJ-HFP6K5d6sXYD\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>&nbsp;Click on the \u2018Create User\u2019 button to finalize the user creation process.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/QqOjykdKtZSHWM7P3cJOHd6PSPbesLc_6LngB7yKChUOsqoCpF0J1JgFEUimauIRfOP5bzirgfS_Ljhcofe3kOadZsupXhGICLmzxYAv4K9pJfwUZWaOmhtoSomy0E37OOCNOZiElnsNrQJ-KX2S2uOiA6gMNZn9xP4ndl8e00EwcIGyMkqnJXZa\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>Once done, download the .csv file and note down the \u2018Access key ID\u2019 and \u2018Secret access key\u2019.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/zT5xZVJ6ggehus9m8HhSxUH_dbCzl66NoJX9fA40Il3t-2TJy3_IEP7T7PSTl8PDEVYqXMESuDPfWGjK1HWLYaGzfs-MVwMr7gNfoTtZEryIGCUqy3hssHST3-cjcfm3qdlmLRWxoevAzg50gIw2hAQXW1vujxXsKbnb1ZEsK-UpKEEtscxlTs8J\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Now, switch to your terminal and hit \u2018Enter\u2019. You\u2019ll be prompted to enter the \u2018Access Key ID\u2019 and \u2018Secret Access Key\u2019, enter those from the downloaded .csv file. Enter the \u2018Profile Name\u2019 of your choice and press \u2018Enter\u2019. This will successfully create a new user.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/X-VaD6v1LmwIIurul3T72pwQyyua9Tk0r7mAwkbfmHtZpCW-iBguXySNvv3tP4vgKazY6PQulTj_6vnEJ_q7-bFnTiF2OfZXT2M995sOVtQJxsvPuTOxdS5CAypf3wRuhuGRFS4TSoZFe_fn_ZieqZbAbSVJyC1hsZa2Y4US5mylMGqGgbP3X27N\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Now, to create a new Angular application. Enter the following command:<\/strong><\/p>\n\n\n\n<p><code>npx -p @angular\/cli ng new [your_app_name]<\/code><\/p>\n\n\n\n<p>Select your preferences for the Angular routing and stylesheet format.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/eDA8hgGp7nj-CGJlukxTmgE7WjVW8LV0B-OWYkEiDYOTTCsY_KAO8avaXc9gg40UIB_TmDF1TRVAifSUCNBpS-3gM6XfX32CPVtEBe8U3RV35wwZCuukx1cZb7DdJXdCUToL1VVwcf_GiyR2CR-7wntufHLn7gXPfvnrVvDhm5OTyN-lfiCCgeSO\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>After the installation, enter the directory of the application:<\/strong><\/p>\n\n\n\n<p>cd [your_app_name]<\/p>\n\n\n\n<p>&nbsp;<strong>Now, add the following to your src\/polyfills.ts file:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n(window as any).global = window;\n(window as any).process = {\n  env: { DEBUG: undefined },\n};\n<\/pre><\/div>\n\n\n<p><strong>Now, use the following command to initiate a new amplify project:<\/strong><\/p>\n\n\n\n<p><code>amplify init<\/code><\/p>\n\n\n\n<p><strong>Enter the following details according to your preferences:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/nOZ9epMv1nCie8sUFMQBSws1jrmtagwt8_WYf4gnt5K1tR89MWJLMKnr2w1S18IlU7mi6i9I8ZO0ypZK1KcAFA7RA6IKvmh12Xep8oT63Uc0G00b4__UiyA9t1TAENZ-tgxhqf_IVu4RuBotQAeTaPgFNHqHyN6a55D4ok6pDf4OJXo64xVElBDj\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>On successful completion of the setup, your environment will be created and your project will be connected to the AWS Cloud.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/Ikesh-frV4wD7zkQqowkIFOrtanFNHcKjez_7F8Z98rMQEsUWfWUK9CHsawnPACGCSd6HapDvXY7LS-t_JHW_-EDkbQwRERhHUv_5JywxJ955EqGc_NtqlQPfTjhW-FgRp0KUTt5g-G-iaCwY2B2nHmqEN5rPsrM7dt0KAD2aCEeSttD5XZeBN5U\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Now install the Amplify Angular libraries and run the application using the following commands:<\/strong><\/p>\n\n\n\n<p><code>npm install --save aws-amplify @aws-amplify\/ui-angular<\/code><\/p>\n\n\n\n<p><code>npm start<\/code><\/p>\n\n\n\n<p><strong>On successful compilation and build, you\u2019ll see the following on your terminal:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/QXSvUS8yvD1pBtBTYJEkYf58LwFjgt6LvZiuMcm1Rc2_gNuyOebZzu4iWzL0u1Ombh11l7867R4LaXAsSBYGzTmZxWNIbZYraVlL8oaBDoh8F86QGTYIII5EFxPs9YooBkEZLg367hMsqcqD-e9LQMuo8msfm2X9T9H5RNt-AeukYvUDewLFYWbI\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>Now, create an authentication service in Angular using the following command in your project\u2019s root directory:<\/strong><\/p>\n\n\n\n<p><code>amplify add auth<\/code><\/p>\n\n\n\n<p><strong>To initialize the authentication service using Amazon Cognito, select the following options:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/g7Le4oaNktjkrYDJkdo_37prS0Liwbj7icMPEU2hYMm0T_y83OlKxW8JiSgrP-s56jNoStc0loYv31ijy2PDBHduxfVC9KEPEe3L67_uhgLoJ8KSMprVdK96Jhcid_KXrcwWJM0mP1KuA7-hyDzTjfRHg-8fgrpQbczXH9TuAx37amHddCljsvU6\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>To deploy the application, run the following command:<\/strong><\/p>\n\n\n\n<p><code>amplify push<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/837SsaNeooN83OJe-M1n9RBs0WOZC_JVobDYa8E-JMZhP4G9k7e7bDoRVV4Nbfy0MDIxfcrgM5TxS6Fp-jtCNC0fRaicREoSmWRzr26pFjZEYeZElbGkD6h-ZNbXVbtNq_3wJN2fhZujLG1aK3FHSBrW-n7XALTnSYyZQ9_vXlqmPVyU_T_33U7N\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>To view the deployed application in your project at any time, you can go to Amplify Console using AWS Console:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/S90dGgaGR0qz7RHWIJQe3ruIbufbr-Fmh_SnaModfrrb9QDRqUGij-FmOuXG4ZfmF4vQNgwA0hQptZtFwwGMr14PSW_SJ2fT4nX-pEIMftrD3JMQRnOQkZsPu7vOMBIjICrDbbbOze84J2_ElUu6fOILPODjZkQEqIiL_qXG_ShJDUr8pa9qlfj6\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>For Backend environments, you\u2019ll find the \u2018Authentication\u2019 service added under the \u2018Categories added\u2019 section<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/xQPWg9l1hE27mXwnL2LdBXAHnB3Pyp9DzZ_w6BvOAitLVYXioZ-vOZkRaJo7WU0xwsjJJA6mwyvidYBtsMDd-qPAu3Q_yJ-xhtubLZgmQTARmPyVqvXFENcOJUh-8vgCbJu-3rn0RNIP3imLr1d2zqKPTICHKXHeV4-RKuv2DQzk0fqFYrwCCg0q\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>Add the following imports in \u2018src\/main.ts\u2019:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ Import these to load the 'Amplify' configuration file and connect 'Amplify' to the app\n \nimport 'zone.js';\nimport Amplify, { Auth } from 'aws-amplify';\nimport awsconfig from '.\/aws-exports';\n \nAmplify.configure(awsconfig);\nAuth.configure(awsconfig);\n \n\/\/ Import ends here\n<\/pre><\/div>\n\n\n<p class=\"has-text-align-justify\"><strong>If you come across an error for the \u2018import awsconfig\u2019 stating \u201ccould not find a declaration file for module &#8216;.\/aws-exports&#8217;\u201d, then add the following (\u201callowJs\u201d: true) to in the \u2018tsconfig.json\u2019 file to fix it:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&quot;compilerOptions&quot;: {\n    &quot;allowJs&quot;: true,\n}\n<\/pre><\/div>\n\n\n<p><strong>Import AWS Amplify UI module in \u2018src\/app\/app.module.ts\u2019 file:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/* import AmplifyUIAngularModule  *\/\nimport { AmplifyUIAngularModule } from '@aws-amplify\/ui-angular';\n<\/pre><\/div>\n\n\n<p><strong>Now, add the above imported module under the \u2018imports\u2019 section in the same file ( \u2018src\/app\/app.module.ts\u2019):&nbsp;<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimports: &#91;\n    \/* configure app with AmplifyUIAngularModule *\/\n    AmplifyUIAngularModule,\n]\n<\/pre><\/div>\n\n\n<p><strong>Add the following code in \u2018src\/app\/app.component.ts\u2019 file:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { Component, ChangeDetectorRef } from '@angular\/core';\nimport { onAuthUIStateChange, CognitoUserInterface, AuthState } from '@aws-amplify\/ui-components';\n \n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css']\n})\nexport class AppComponent {\n  title = 'workfall-amplify-app';\n  user: CognitoUserInterface | undefined;\n  authState!: AuthState;\n \n  constructor(private ref: ChangeDetectorRef) {}\n \n  ngOnInit() {\n    onAuthUIStateChange((authState, authData) =&gt; {\n      this.authState = authState;\n      this.user = authData as CognitoUserInterface;\n      this.ref.detectChanges();\n    })\n  }\n \n  ngOnDestroy() {\n    return onAuthUIStateChange;\n  }\n}\n<\/pre><\/div>\n\n\n<p><strong>Add the following code in \u2018src\/app\/app.component.html\u2019 file:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&lt;amplify-authenticator *ngIf=&quot;authState !== 'signedin'&quot;&gt;&lt;\/amplify-authenticator&gt;\n \n&lt;div *ngIf=&quot;authState === 'signedin' &amp;&amp; user&quot; class=&quot;App&quot;&gt;\n    &lt;amplify-sign-out&gt;&lt;\/amplify-sign-out&gt;\n    &lt;div&gt;Hi, {{user.username}}&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p><strong>Now, you can open your browser and run the application on \u2018<\/strong><a href=\"http:\/\/localhost:4200\"><strong>http:\/\/localhost:4200<\/strong><\/a><strong>\u2019:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/3CozuqzXg_JhGz0AuN_T8t5FLFTubynN6NQk71zXZgEgiTnqnu1RaTdQZel0km5OvtE2NVMnw7i6wZboO9fyaLdXWInqrTWm_k49QLv5tZx8JoCrlBmOBWj5ZVQTgTc7wHBSyOiNZNXbXMEoILOwKmVtzzfNf74zZ1uy4tkaAGa0qDJ666a43kNx\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p><strong>Now, let\u2019s try to \u2018Sign in\u2019 and check if authentication is working properly. Since we have not created an account yet, it should give us an error stating \u201cUser does not exist\u201d.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/P2eheYMkiI_E8fPZZxoHBa_Q0GbMdf_g-JBmsI2o1decwKTuLBlduv0Nd9zCG-fLcOXYB-N07liORYcoDcHMVaqHOERnGfxi9OXOaPsGZfai5IP1p7lHQzRl-JyOJt6vmxEAT6Ij-889CjISNWL84xGKGgqfJ3xP8s3QLfwTk4EUm6yAOJrTZO51\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Now, let\u2019s create an account.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/DP502urEqWV1h06Bzr2ADfQtIcsSnQcPrZPwM5MhRdzmt9e4zG7CDSLGNT8DJppgpabDHUgpt_ttv8gTOJmY-DMiRc3tIxqXbn5kz10DSCcYNtlUXVHZ8QSsxGG0EaCUK_3Sod52ingfs1iHR2Qdbvso0m4fGQ1K8uLd7MQYGs8sEvv9KOPUifyV\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Once you hit on \u2018Create Account\u2019, you will receive a \u2018Confirmation Code\u2019 on the email address used for creating the account:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/eQhN54ZJ_Grd9Il3dbfEwI58NzczHIr8mYQ-bRKui8NbyCDjcZ9nKHyhd170PEfgpPNCShfNYKaweml4j9JXR2jR4xZ25shDq2458lgCoC6HP6vP7kaU9vdC2TVdzffa4aMr6l6RoD5miAQrTpVjLcikrFn855eCdoNmXgt_yy6YwvLaCWULW-qt\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/8zLYHBjbG7fXVojVgU_1Zczxh5CIXW3HZ2xqWqZ-_BQ2w3rWff2NNeIt2EjqEtAbYhYhssuoeLGUAziHUqEKnEZytmC5cqUb5361o9Ia43-QJcLj2_5hI0rxlReA916cpUb6AFWCBc12xfyKQiikYl-r-5QmTNYJfO4d-FnWYojKNOn8mzjsdmCQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Now, you can go to the Amazon Cognito console to view if the user is registered:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/8gCJlT4KTxfU95A0xV_c1CXsVYjlbvFVKPOi2INJx1Jz8NlT8qmj73xFRQleZNEJ12AMhpDqO7T9XkeF2gnJZQRrtKkLjpyua26Fizv8ApoOHkIEvTa_7TuEo8DLlKfnMDZspXbejvWCKSEvaZZml3fgSdpqho19M19Ga1Pdz2avNxBK1Win-JjW\" alt=\"How to build an Angular Authentication Application using AWS Amplify?\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Click on \u2018Manage User Pools\u2019 and you will find a \u2018user pool\u2019 already created while configuring the application using AWS Amplify. Click on the created user pool<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/4mAI8arEYyexP1UB_yZSaWcetLon-ps_6zxY2voR9fJxHqQXFxkkuKn97B4Di_oMHvu7jqj4RP877OPF1yXJzYr80O888gBrAM-7H8oXPWHon8FVvF_J6CXKAl2BwVC2VwyCDmsjuZZx1NugasdJerWtnAiS0fg5junFLdsq0qsacKH7bZEf5bi4\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>You will find the user you recently created with the \u2018Account status\u2019 as \u2018UNCONFIRMED\u2019 since we have not added the \u2018Confirmation code\u2019 on UI.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/aIFsy9AdyRW8rOSsEfbB48kcYod3KrdcCg4JHVgSy4VtQ5B_w262ykADg7hB8an4yV065n9atNha2VeKQpQG_1m4m0-siEWFNRhaWDVbrbE7uaDd99yoEpGXf2R7vqqUXs_ByBr2PZtoEHdcqbhvL_toXyf92MrGmnPINa71iuxZq6RWUW2NUuX3\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Now, go back to the UI, enter the confirmation code, and click on \u2018Confirm\u2019:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/oE6-Zt_ixnLTGKQT6HziQWS4WMFvGzF4EXGQoBtN6eOO1R_Arx6D11i_ZCCCINS6MeYKGTD0LKr3QdHLz77ShxBrHp5A0SoVeOVMk1HIDEmtmC1cVgWw2g8QTStUBAjSMMgzk_6IZD2tH9Ba-s7gxwfiYq8Ht9q2E2niykWPbCzgvHx7k9LLHKhY\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>On hitting \u2018Confirm\u2019, you will be logged in and navigated to the home page.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/k0ekWrgSfFy7PlgYRzFhE_D5Y-PdqrbB1gzZ6HPry-1wCR0PT4mWGA52StAyO_x54Fyw-mNRJ-AcJn6isP4kVlAIXLy0EoXyTwI0IJMAt7rKui1IUw_kdqaqzoQzG3xpSZ9w3OBeZyqB2JmgozbFrLmu94RGmeexvq_UYIY0S4u3c7790bYvt8Of\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\"><strong>Get back to the Amazon Cognito console and hit \u2018Refresh\u2019. You\u2019ll find the \u2018Account Status\u2019 of the user changed to \u2018Confirmed\u2019.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/vLZxVYFfun6gZp76IvOdpZSo1nja2oqtsA0nXxMsOqe11uVINisSYeISAzSAibeX5s1HqsiC9GHbvZHWudgpl3YXr0DasxV-v3rR8xTDGGJG2EYXE163Ix4a5F8nUtwbXp5Xd61PQEOUTsR_OkBkubQNKJHZG-rjOQhcNmpLERi-OD13pTLLu6u9\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Now, you can click on \u2018Sign out\u2019 and try signing into the application using your credentials used for registration.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/XqAXmxcg9Nufywq4P4mjPB49Pco_5FuTtkG6APC3POQIQvD8pH2EO7664VKPuzOLUogwtiA4iYzSEZb0-RsSD0kEhPmfm6zFDTuioUkyeCTuKEu7nIHg66sduO5uJGjzE5kkUkRMF7lNYZjNZSfLPciFLI0i8LTMsLCKoEpV_dBzdqgPKErIJLXT\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>You will be signed-in and navigated to the application\u2019s dashboard.<\/strong><\/p>\n\n\n\n<h2><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, you have seen how we can build an Authentication application with signup and login functionalities using a web framework Angular and AWS Amplify to serve the backend. We have used AWS Amplify\u2019s integration with Amazon Cognito for maintaining and storing the registered users\u2019 data. We will discuss more about AWS Amplify and its integration with other services in our upcoming blog. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies.&nbsp;<\/p>\n\n\n\n<p>For any further queries, feel free to post your comments, we are happy to help!<\/p>\n\n\n\n<p>Meanwhile \u2026<\/p>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you\u2019re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at<a href=\"https:\/\/www.workfall.com\/partner\/\"> workfall.com\/partner<\/a> today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">13<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> In this blog, we will discuss how to build an Angular Application using AWS Amplify and will demonstrate how to build an Authentication Application using AWS Amplify and Angular web framework without configuring the backend manually. In this blog, we will cover: Need for Serverless Frameworks Benefits of Serverless Frameworks Popular Serverless Frameworks Why is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":359,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[2],"tags":[99,100,3,42,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to build an Angular Authentication Application using AWS Amplify? - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"Learn how to build an Angular app with AWS Amplify! Our blog covers building an auth app without manual backend configuration.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build an Angular Authentication Application using AWS Amplify? - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to build an Angular app with AWS Amplify! Our blog covers building an auth app without manual backend configuration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-03T07:06:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-22T07:22:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ec2-18-141-20-153.ap-southeast-1.compute.amazonaws.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png\",\"width\":1200,\"height\":628,\"caption\":\"Build an Angular Authentication Application using AWS Amplify\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#webpage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/\",\"name\":\"How to build an Angular Authentication Application using AWS Amplify? - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#primaryimage\"},\"datePublished\":\"2021-11-03T07:06:12+00:00\",\"dateModified\":\"2025-08-22T07:22:01+00:00\",\"description\":\"Learn how to build an Angular app with AWS Amplify! Our blog covers building an auth app without manual backend configuration.\",\"breadcrumb\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learning.workfall.com\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build an Angular Authentication Application using AWS Amplify?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#webpage\"},\"author\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"How to build an Angular Authentication Application using AWS Amplify?\",\"datePublished\":\"2021-11-03T07:06:12+00:00\",\"dateModified\":\"2025-08-22T07:22:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#webpage\"},\"wordCount\":2798,\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png\",\"keywords\":[\"amplify\",\"angular\",\"AWS\",\"serverless\",\"workfall\"],\"articleSection\":[\"AWS Cloud Computing\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to build an Angular Authentication Application using AWS Amplify? - The Workfall Blog","description":"Learn how to build an Angular app with AWS Amplify! Our blog covers building an auth app without manual backend configuration.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/","og_locale":"en_US","og_type":"article","og_title":"How to build an Angular Authentication Application using AWS Amplify? - The Workfall Blog","og_description":"Learn how to build an Angular app with AWS Amplify! Our blog covers building an auth app without manual backend configuration.","og_url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2021-11-03T07:06:12+00:00","article_modified_time":"2025-08-22T07:22:01+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/ec2-18-141-20-153.ap-southeast-1.compute.amazonaws.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/learning.workfall.com\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website","url":"https:\/\/learning.workfall.com\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png","width":1200,"height":628,"caption":"Build an Angular Authentication Application using AWS Amplify"},{"@type":"WebPage","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#webpage","url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/","name":"How to build an Angular Authentication Application using AWS Amplify? - The Workfall Blog","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#primaryimage"},"datePublished":"2021-11-03T07:06:12+00:00","dateModified":"2025-08-22T07:22:01+00:00","description":"Learn how to build an Angular app with AWS Amplify! Our blog covers building an auth app without manual backend configuration.","breadcrumb":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learning.workfall.com\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"How to build an Angular Authentication Application using AWS Amplify?"}]},{"@type":"Article","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#article","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#webpage"},"author":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"How to build an Angular Authentication Application using AWS Amplify?","datePublished":"2021-11-03T07:06:12+00:00","dateModified":"2025-08-22T07:22:01+00:00","mainEntityOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#webpage"},"wordCount":2798,"publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-an-angular-authentication-application-using-aws-amplify\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png","keywords":["amplify","angular","AWS","serverless","workfall"],"articleSection":["AWS Cloud Computing"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/amplify.png","jetpack-related-posts":[{"id":483,"url":"https:\/\/learning.workfall.com\/learning\/blog\/why-developers-and-businesses-should-go-with-the-serverless-architecture\/","url_meta":{"origin":358,"position":0},"title":"Why Developers and Businesses Should go With Serverless Architecture?","date":"November 10, 2021","format":false,"excerpt":"In today\u2019s competitive market, faster time to market and scalability are the two major measures of a good application. In this blog, we will discuss how SERVERLESS architecture can be a good choice for quick and scalable application development.\u00a0 In this blog, you will get answers to the following questions\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"Serverless Services on AWS","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/serverless.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":236,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-a-serverless-event-driven-workflow-with-aws-glue-and-amazon-eventbridge\/","url_meta":{"origin":358,"position":1},"title":"How to build a serverless event-driven workflow with AWS Glue and Amazon EventBridge?","date":"October 28, 2021","format":false,"excerpt":"AWS Glue is basically a data processing pipeline that is composed of a crawler, jobs, and triggers. This workflow converts uploaded data files into Apache Parquet format. In this blog, we will see how we can make use of the AWS Glue event-driven workflows to demonstrate the execution of the\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"Build a Serverless Workflow with AWS Glue and Amazon EventBridge","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/10\/Serverless-EventDriven-Workflow-1200-x-628-px.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":313,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-a-serverless-workflow-with-aws-step-functions-part-2\/","url_meta":{"origin":358,"position":2},"title":"How to build a Serverless Workflow with AWS Step Functions?","date":"November 1, 2021","format":false,"excerpt":"In our previous blog How to build a Serverless Workflow with AWS Step Functions? (Part 1), we have discussed AWS Step functions, its features, benefits, use cases, etc. In this blog, we will discuss a business scenario to configure and create a serverless workflow to handle the issue resolution statuses\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"Build a Serverless Workflow with AWS Step functions","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/Step-Functions.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":520,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-build-a-serverless-workflow-with-aws-step-functions-part-1\/","url_meta":{"origin":358,"position":3},"title":"How to build a Serverless Workflow with AWS Step Functions (Part 1)?","date":"November 10, 2021","format":false,"excerpt":"AWS Step Functions is a serverless orchestration solution that enables you to effortlessly coordinate several Lambda functions into customizable workflows that are simple to debug and modify. To see the full implementation of How to Build a Serverless Workflow with AWS Step Functions, refer to part 2 of the blog\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"AWS Step Functions - Workfall","src":"https:\/\/i2.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/11\/StepFunction01.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1193,"url":"https:\/\/learning.workfall.com\/learning\/blog\/amazon-devops-guru-for-serverless\/","url_meta":{"origin":358,"position":4},"title":"Amazon DevOps Guru for Serverless","date":"September 6, 2022","format":false,"excerpt":"With digitalization and the cloud assuming responsibility for the development and deployment of new features in software applications, error handling is a critical activity that aids in faster deployment. Any error in the chain, from writing code to deploying to monitoring performance, can degrade customer experience, increase costs, or immediately\u2026","rel":"","context":"In &quot;DevOps&quot;","img":{"alt_text":"Amazon DevOps Guru","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/09\/Cover-Images_Part2-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":834,"url":"https:\/\/learning.workfall.com\/learning\/blog\/create-and-run-web-app-on-ecs-using-aws-fargate\/","url_meta":{"origin":358,"position":5},"title":"Create and run web app on ECS using AWS Fargate","date":"December 28, 2021","format":false,"excerpt":"AWS Fargate is an Amazon ECS solution that allows you to run containers without managing servers or clusters. You no longer need to provision, configure, or scale clusters of virtual machines to run containers with AWS Fargate. This eliminates the need to select server kinds, schedule cluster scaling, or optimize\u2026","rel":"","context":"In &quot;AWS Cloud Computing&quot;","img":{"alt_text":"Create and run Web app on ECS using AWS Fargate","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2021\/12\/CoverImages_1200x628px-6.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/358"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":7,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"predecessor-version":[{"id":2215,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions\/2215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/359"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}