AWS IoT and React Native, I love you, but you can do better

I recently started working with React Native and AWS IoT for a new project. Being a hardcore iOS developer, this change was a little hard to take on. Luckily I had a team of solid React Native developers to guide me.

My part of the project was not building the UI/UX or API integration, but baking real time communication using MQTT! for the app.

The concept of MQTT may seem familiar to you if you’ve already worked with Firebase Cloud Messaging.

If not, no worries … this post isn’t going to help you much either … just kidding :)

How MQTT Works? ⚙️

Publisher: There are one or more publisher.Subscriber: There are one or more subscribers.

A publisher can create and publish to multiple Channels (also called Topics).

A Subscriber can listen to multiple channels and fetch the real time published message. The message that is published is not stored anywhere unless you design your own MQTT broker.

Consider the MQTT broker as a box. Publisher pushes message into the box. Subscriber can connect to the box with the corresponding Channel name(Topic) and receive the message.

The most common convention to name a channel is using the pattern : “Topic/Subtopic”.

GETTING STARTED ON AWS IoT 👍

Step 1: You need an AWS account.

Step 2: Create a Cognito pool. This is for authentication purpose. If you don’t know how to create a Cognito pool check here.

Step 3: When you are in your AWS home page search for “IoT Core” and visit the AWS IOT dashboard. If I were you I’d bookmark this page :)

Step 4: To setup MQTT you will need the following:

1. The AWS Cognito pool Id2. A Policy3. Your AWS IoT Specific IoT endpoint url.

You already have a Cognito pool id from where you created the Cognito pool. If not create one. This one is Generic and can be used for all kinds of AWS Authentication (I believe … but hey, I’m no AWS wizard).

The detailed instructions for creating a policy can be found here. AWS IoT policies are JSON documents. They follow the same conventions as IAM policies. AWS IoT supports named policies so many identities can reference the same policy document. Named policies are versioned so they can be easily rolled back. To know more click check here. After creating the policy, click on it, inside your policy’s overview tap on the “Edit policy document” button. and replace the JSON with:

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

Find your custom endpoint in the AWS IoT console. (From the dashboard, in the left navigation pane, choose Manage, and then choose Things. Select the box representing your button to show its details page. On the details page, in the left navigation pane, choose Interact and look for the HTTPS section, near the top.) Your endpoint will look something like the following:

ABCDEFG1234567.iot.us-east-2.amazonaws.com

where ABCDEFG1234567 is the subdomain and us-east-2 is the region.

Now the setup part is over! Let the coding beginzzz ! 😅😎

React Native has no native components available for our purpose through their regular packages. So I had to look for third party packages out there on the wild wild internet.

One such package that I came across was react-native-mqtt. In this repo they recommend us to use paho.mqtt.javascript due to reasons that are not solved for a very long time! Nevertheless both packages where useless to me (as I am new to React Native and desperate to make MQTT work quickly), these packages didn’t run well with our AWS IoT usage.

Then came the good times when I found some packages which uses AWS. The packages I came across are:

1. react-native-aws-iot-device-shadows a github repo by jamesjara.
2. aws-iot-device-sdk-js by aws.
3. aws-mqtt another github repo by kmamykin.

I also found some interesting reading here.

I was testing all these packages on my iPhone 6+ … and all of them failed! But they did give me good knowledge of how AWS IoT and MQTT works.