Secure APIs and Access AWS Resources with Angular and Cognito

In this post, I will explain how to securely connect your Angular application to the API and AWS resources. API is secured using AWS Cognito and we are going to access AWS Resources with the help of Cognito.

The Design

In this post, we are going to do two things,

1. Access Your Server-side Resources with a User Pool (Access your secure API build with Java and Spring Boot)
2. Access AWS Services with a User Pool and an Identity Pool (Access your records in AWS DynamoDB )

Angular, Cognito and Java API integration

Setting up the Angular Application

Create an Angular Application using Angular CLI(ng new my-first-project) then add AWS Amplify to it (npm install aws-amplify @aws-amplify/ui-angular).

Next, configure the project by creating a file with the name aws-exports.js in the angular_app_root/src/app folder. The location of this file can be changed, this is the location I used for my project.

aws-exports.js contains all the details needed to connect with AWS Cognito.

const awsmobile = {

    "aws_project_region": "ap-southeast-1",

    "Auth": {

        "identityPoolId": "ap-southeast-1:xxxxxxxxxxxxxxxx",

        "region": "ap-southeast-1",

        "userPoolId": "ap-southeast-xxxxxxxxxxx",

        "userPoolWebClientId": "xxxxxxxxxxxxxxxxxxxxxx"

    }

};

export default awsmobile;

Finally, update app.module.ts and app.component.html to finalize the Cognito integration. I also linked Bootstrap to make things look nicer.

Add AWS SDK

The next step is to link the AWS Javascript SDK to the Angular Application.

To do that, you have to run these commands.

npm install --save-dev @types/node

npm install --save aws-sdk

For more information about adding the SDK, please check this link.

Once the integration is done, you will be able to communicate with AWS Resources using the Angular Application.

For this integration to be successful, the AWS identity pool authenticated role needs to have the relevant permissions attached to it. I'll explain this in the next section.

Configuring AWS Cognito

Create a user pool in AWS  Cognito and configure it properly by adding app clients to it. You also need to create an Identity pool and configure it by adding authenticated and unauthenticated roles to it.

Once logged in, The Angular application will be able to receive an access token from the AWS Cognito and that token can be used to access the secured API. (To learn how to create a resource server with Spring boot) (See below image)

Access Your Server-side Resources with a User Pool

The above-mentioned token can be used to retrieve credentials from AWS Cognito that will grant temporary access to AWS resources. The Angular application will only be able to access the AWS resources if the authenticated role of the identity pool has the relevant policies attached to it. (See below image)

Access AWS services with a 
User Pool and an Identity Pool

Getting credentials from Cognito example code:

As I have mentioned earlier, if the Angular application needs to read data from the DynamoDB, the authenticated role needs to have the relevant policies attached to it. (See below image)

Policy to access DynamoDB

Follow this tutorial to learn more about creating a User pool.

Securing the API

In order to implement a secure API, you have to implement a resource server. Spring boot enables you to easily implement this feature with the help of a few annotations and configurations.

In one of my earlier posts, I have described this in much more details. Please check it.

Source codes

I have uploaded the Angular and Spring Boot projects to Github.

DEMO

Secure APIs and Access AWS Resources with Angular and Cognito

References

1. https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/
2. https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-user-pool.html
3. https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-scenarios.html#scenario-aws-and-user-pool
4. https://cli.angular.io/
5. https://angular.io/docs
6. https://docs.amplify.aws/start/q/integration/angular