Implementing Authentication using AWS Cognito & Amplify in Angular App

This blog is about implementing authentication in the Angular app using AWS Amplify SDK libraries at the client-side and AWS Cognito user pool at the back-end. Cognito Identity pool is used to get the access token to upload documents into S3.

It also contains Angular route guards to redirect a user to the login page if the user directly accesses the home page without sign-in.

Step 1: Create an AWS Cognito User pool using the Terraform script. Download the script from here. and download Terraform exe from here. Extract the Teffaform exe in the folder as follows.

• main.tf: It contains a script to create AWS Cognito user pool.
• provider.tf : Terraform relies on plugins called “providers” to interact with cloud providers.

Execute the following command from the Command Prompt to create AWS Cognito user pool. [Current directory should be above folder path while executing the commands].

terraform init
terraform apply

Step 2: In step 1, We have created a Cognito user pool. We also have got the user pool id and client id from the terraform script output. Let us update the details in the angular App’s main.ts file as follows.

Execute the following command in the VS Code Terminal to run the application.

npm start

Once the application is loaded in the browser, You will be redirected to the login page due to the angular route guard in the app.module.ts. The following code snippet in the app.module.ts has Angular route with “AuthorizeGuard” guard.

AuthorizeGuard: It has “canActivate” method which checks whether the JWT token is expired or not. If JWT is expired or null, the method loads the login component else returns true and Angular loads the home page.

The JWT token is created in the AuthService.ts

AuthService.ts : It has the following methods for Sign up, Sign-in, Sign-out & Confirm Sign up. The methods are implemented using AWS Amplify libraries to reduce no. of lines of code & code complexity.

Sing up: It allows a user to register his email, password & mobile number. A Code snippet for the signup method is shown below. The below “Auth.signUp” call will get the AWS User Pool details from the “Amplify.configure” specified in the main.ts

Confirm Sign up: After sign in, Conginto automatically sends verification code to the user’s email address. User has to validate email address by using the verification code. Amplify library has following method to confirm that signup process. below code is available in AuthService.ts

Sign in: Validates the user’s email & password at the service side by calling the below method. If the user’s credentials are correct then AWS Cognito will return the JWT token in the response as shown below.

Save the token in the browser's session store so that it can be used to access back-end resources or get access to AWS services like S3 or DynamoDB.

Sign-Out: Calling signOut without any options will just delete the local cache and keychain of the user. If you would like to sign out of all devices, invoke the signOut with “{ global: true }”.

Global Sign-Out:

You can download the complete source code from Github repo.

Create Cognito Identity Pool: With an identity pool, you can obtain temporary, limited-privilege AWS credentials to access other AWS services. In this blog, we will access S3 service to upload the images/documents, etc. You can create identify pool from AWS Management Console as follows.

• Create IAM role that will be assumed by the logged-in users.
• Also, add S3 access to the above role so that logged-in users can upload files.

You need to update the Identity Pool Id in the main.ts as follows.

• you can get the Identity pool id from AWS Management Console, as shown below.

• Update above Identity pool Id & S3 bucket details in the main.ts

• Use Amplify SDK to upload the file to S3 bucket as follows.
• Amplify SDK internally interact with AWS Cognito Identify pool and fetches temporary access token to upload file to S3 bucket.

If everything goes well, you should be able to upload a file.

Happy Coding :)