Texting with Twilio SMS API

A quick guide to setting up a texting feature in your React app

In the final chapter of my Flatiron saga I have created an app called InstAlert. Essentially, InstAlert is a silent alarm masquerading as a social media app. When a user opens their profile on InstAlert, the presenting home page will appear to be Instagram, complete with a feed of pictures and a navigation bar with the profile pictures of their friends. However, when the user “likes” one of these posts, the subject of the photo will be sent a text message that contains the user’s current location along with a distress message.

The idea behind this (which will be further developed when rebuilt using React Native for mobile accessibility) is that a user will be able to signal their friends, family or emergency services without alerting their “attacker” that they have done so, thereby avoiding the possibility of dangerously escalating their current situation.

For this app to meet its core goal, though, it requires the use of a text messaging feature. And the feature I have found most reliable is the Twilio SMS API available on Rapid Api.

In order to use this API, you will first need to create an account on rapid api.

Once you have this up and running, head over to the Twilio SMS dashboard, linked above, and subscribe to the price point that best meets the needs of your application. As this version of my app is only going to be used for project presentation, I elected to use the cheapest version which costs $10/month for a subscription. You can cancel your subscription anytime without consequence.

From here, you will need to purchase a Twilio approved phone number. Scroll to the “POST Buy a Phone Number” feature in the side bar —

You’ll notice that Rapid API has already loaded your private API key into the search functionality on the site. Below, type in the phone number type that you want (mobile, local or toll free — I always chose local), and the country code for the number (US for United States, for example). In the section labelled AccountSid, type “a”. This will autogenerate your account id. All you need to do from here is click the “Test Endpoint” button at the top of the page. This will generate a phone number which will be displayed in green text on the right side of the page.

A few lines below you’ll see you AccountSID — you can go ahead and write that down somewhere as you’ll make use of it in your eventual function later.

Be sure to SAVE THIS NUMBER. But if you do forget it and fail to write it down, you can use the “Get Fetch Multiple Phone Numbers” route to display all the phone numbers you have purchased through Twilio.

For the record, these numbers will typically run you between $.50 and $2 depending on the type of number.

Now that you have your Twilio phone number, scroll back up to “Message Resources” in the left hand menu of the page. In order to create a POST request that sends a text from your application, select the “POST Send SMS (Create Message Resource)” option.

Take some time to fill in the required params for the message, the “from” phone number (your Twilio number), the “body” (text content), the “to” phone number, and the account id (you can still just type in “a” for the purposes of testing in the rapidAPI page, though you will need this number when you eventually put the generated code into your application).

In the right hand window, there will be a dropdown form that is preset to (Node.js) Unirest. If this is your preferred method, have at it. For this project I selected the Javascript-fetch option, and rapid api returns code that looks like this:

fetch("https://twilio-sms.p.rapidapi.com/2010-04-01/Accounts/%7BAccountSid%7D/Messages.json?from=%3CREQUIRED%3E&body=%3CREQUIRED%3E&to=%3CREQUIRED%3E", {
	"method": "POST",
	"headers": {
		"x-rapidapi-key": "MY-API-KEY",
		"x-rapidapi-host": "twilio-sms.p.rapidapi.com"
	}
})
.then(response => {
	console.log(response);
})
.catch(err => {
	console.error(err);
});

From here, a simple copy and paste into your code is all that is left. Set this fetch into a function that gets triggered at some instance, and make sure to interpolate your desired from/body/to sections into the code.

Et voila! You have an app that texts people. Be sure to input your best friends phone number and text them a dark secret they think no one knows — it’s hilarious. They get a text from a random number with compromising info and they’re all like

Or, you know, build an app that helps people. You can always do both!