th3g4mbl3r / aws-amplify-react-iot-pub-sub-using-lambda

aws-amplify-react-iot-pub-sub-using-lambda

Overview

This is a very basic AWS Amplify + NodeJS API + Lambda function + AWS IoT Javascript SDK + React project that combines basic authentication via Amazon Cognito with AWS IoT Core pubsub via the aws-iot-device-sdk

(1) allows user to signup, signin and signout (2) when user signs up, it creates Cognito user pool and Identity pool. (3) when a user signs-in, authenticate via Cognito, it creates IoT policy and attaches with the cognito identity and allows the user perform pub/sub using that identity (4) subscribe to one or more topics and (5) publish messages to a user-specified topic.

The functionality is similar to (though simpler, less pretty) version of the "Test" tab in the AWS IoT console:

Prerequisites

Refer: https://docs.amplify.aws/start/getting-started/installation/q/integration/js

1. Before we begin, make sure you have the following installed: Node.js v12.x or later

      node -v

   npm v5.x or later

      npm -v

   git v2.14.1 or later

      git --version

2. Install amplify cli

   npm install -g @aws-amplify/cli

3. Create IAM user in your AWS account

   a. Login to IAM console b. Go to "Users" and click "Add User", select both access types (copy the access key, secret key and the console password)

4. Configure Amplify to use your AWS account

   amplify configure

   Example:

   Sign in to your AWS administrator account: https://console.aws.amazon.com/ Press Enter to continue

   Ignore the browser and hit enter in the shell

   Specify the AWS Region: us-east-1 Specify the username of the new IAM user: ? user name: Complete the user creation using the AWS console https://console.aws.amazon.com/iam/home?region=us-east-1#/users$new?step=final&accessKey&userNames=iotsampleappuser&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess Press Enter to continue

   Enter the access key of the newly created user:

   ? accessKeyId: ? secretAccessKey:

   This would update/create the AWS Profile in your local machine ? Profile Name: #copy the profile name you will need it later

Screenshots

Local Deployment (website on localhost)

1. Clone the repo

git clone https://github.com/aws-samples/aws-amplify-react-iot-pub-sub-using-lambda

2. move to project root

cd aws-amplify-react-iot-pub-sub-using-lambda

3. Install dependencies

npm install

2. Initialize Amplify

amplify init

Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? Yes
? Choose the environment you would like to use: (Use arrow keys)
❯ lambdatest
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use <select the profile you created above>

3. Push / create your backend

amplify push

? Are you sure you want to continue? Yes

4. Navigate to the AWS IoT web console and:

5. Click Settings in the lower left, and copy your Endpoint to a text file; you'll need this later. It would look similar to below:

a6l17n41bqjml-ats.iot.us-east-1.amazonaws.com

5. Navigate to the Cognito Co thensole and:

6. Click Manage Identity Pools (not user pools)

7. Click the pool name for your app, it should look similar to cognito81d9f49f_identitypool_81d9f49f_lambdatest

8. Copy the Sample Code link on left, and in the code example, copy your Identity Pool ID to a text file; you'll need this later. It will look like us-west-2:970761d2-56b8-4057-9eb6-f7e01cd9ade6

9. Open src/aws-iot-configuration.js and:

10. set the endpoint to the value from above. Be sure to prefix the endpoint value with wss:// (for websockets) and add a suffix of /mqtt, as in the example below.

11. Set the host to the endpoint value as-is.

12. Specify your AWS region

13. Set the pool ID to the Cognito Pool ID you gathered from above.

// src/aws-iot-configuration.js
var awsIotConfiguration = {
  endpoint: 'wss://a6l1346n41bqjml-ats.iot.us-east-1.amazonaws.com/mqtt', 
  region: 'us-east-1',
  poolId: 'us-east-1:aed927b24-956f-44d6-a0bc-8ddf0a9fd813',
  host: 'a6l1346n41bqjml-ats.iot.us-east-1.amazonaws.com'
};

3. Open src/aws-iotcore-configuration.js and:
   1. set the endpoint Iot control plane endpoint for the region
   2. specify your AWS region
   3. specify policy to attach to the authenticated cognito identity

  // src/aws-iotcore-configuration.js
  var awsIotConfiguration = {
    endpoint: 'https://iot.us-east-1.amazonaws.com',
    region: 'us-east-1',
    apiVersion: '2015-05-28',
    policy: '{"Version": "2012-10-17", "Statement": [{"Effect": "Allow", "Action": [ "iot:Subscribe" ], "Resource": ["arn:aws:iot:us-east-1:123456789012:topicfilter/*"]},{"Effect": "Allow","Action": [ "iot:Connect" ],"Resource": ["arn:aws:iot:us-east-1:123456789012:client/*"] },{"Effect": "Allow","Action": [ "iot:Publish","iot:Receive" ],"Resource": ["arn:aws:iot:us-east-1:123456789012:topic/*"]}]}'
  };

7. Navigate to the AWS IAM Console and search for the IAM role for your authorized Cognito Identity pool users. It will have a name similar to arn:aws:iam::123456790:role/amplify-awsamplifyreacttempl-lambdatest-115859-authRole and have a creation time that matches the date your deploying this project. Be sure to select the authRole, not the unauthRole

8. Click Add Inline Policies

9. Add the following policy

{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Effect": "Allow",
          "Action": [
              "iot:Connect",
              "iot:Publish",
              "iot:Subscribe",
              "iot:Receive"
          ],
          "Resource": [
              "*"
          ]
      }
  ]
}

8. Now add permissions to the lambda function to call Iot Core to create and attach policy Select role with name awsamplifyreacttemplLambdaRole06f6bdec-lambdatest

   1. Click Add Inline Policies
   2. Add the following policy

   {
      "Version": "2012-10-17",
      "Statement": [
          {
              "Effect": "Allow",
              "Action": [
                  "iot:CreatePolicy",
                  "iot:GetPolicy",
                  "iot:AttachPolicy"
              ],
              "Resource": [
                  "*"
              ]
          }
      ]
   }
   

9. Run the website locally

npm run start

5. Navigate to localhost:3000, sign up, and test!