Using Azure IoT Hub in Expo React Native

Question

I am currently working on developing a backend/service-side Expo RN application to connect to my IoT Hub to access device data for visualization, control/configure my device from my application using direct methods and device twins, send messages from cloud to device, etc. The device has been set up and connected to the IoT Hub already.

Has anyone done something like this or similar to this before? If so, what resources did you use to interact with your IoT Hub?

1. I have researched into the azure-iothub service SDK that seems to fit for my application. However, I was recommended to check out the @azure/arm-iothub package as well. Which should I use and what are the different use cases? I think that azure-iothub is a better fit right?
2. Looking at the sample code for azure-iothub , it seems that it should run as a server or backend on my RN app rather than being implemented directly into my frontend code correct? So not like this is what I mean.

import { View, Text, Button } from 'react-native';
import React from 'react';
import { Client } from 'azure-iothub';

const connectionString = '...';    
const client = Client.fromConnectionString(connectionString);        
client.open(function (err) {            
	if (err) {             	 
		console.error('Could not connect: ' + err.message);            
	} else {              
		console.log('Client connected');            
	}        
});    

const Home = () => {
    return (
        
    );
}

Any clarifications, suggestions, or sample applications would be extremely helpful! I am new to this and am pretty confused by what to do.

Answer 1

Hello @Alex Fang,

You want to interact with the IoT Hub using the service SDK.

So you will provide that client the Azure IoT connection string, probably taken from the iothubowner shared access policy.

This connection string gives full access to the service so you must protect it from falling into the wrong hands.

If you connect with the IoT Hub using browser code, everybody can see the connection string by checking the javascript code downloaded by the browser page.

Please follow the architecture seen in the samples and save yourself from being hacked (like paying for thousands of devices being created, millions of c2d messages being sent or uncontrollable manipulation of IoT Hub routes).

The same goes for eg. databases, storage accounts, and communication platforms. In general, accessing Azure services using a backend service, from a non-user standpoint, is always a wise decision.

---

If the response helped, do "Accept Answer". If it doesn't work, please let us know the progress. All community members with similar issues will benefit by doing so. Your contribution is highly appreciated.

Answer 2

Hi @Alex Fang I am cross posting the reference link of the thread Expo React Native with IoT Hub where a code sample is shared to achieve this. Let us know if this response helped you with answering this question.

Please do not hesitate to reach out to us with any further questions or if need any additional assistance with implementation.

---

If the response helped, please do click Accept Answer and Yes for the answer provided. Doing so would help other community members with similar issue identify the solution. I highly appreciate your contribution to the community.