We talk a lot about sending SMS messages from web applications, but what about sending SMS messages from a React application? There's a bit more to it than just the server-side version, but it won't take us long.

Why shouldn't I use the REST API from the client-side?

Technically you could send an SMS using the Twilio REST API directly from a JavaScript client-side application. But (and it's a very big "but") if you were to do that, you would expose your Twilio credentials to anyone using your site. A malicious user could then take those credentials and abuse them, running up a huge bill with your account.

Live view of a hacker with your account credentials

To avoid this we will create a back end application that implements the Twilio REST API, wraps up your credentials and sends SMS messages for you. Then you can call your back end from your React application and send SMS messages without distributing your credentials to the internet.

Our tools

For our application to send text messages using the Twilio REST API we will need the following:

A Twilio account and phone number that can send SMS messages (you can sign up for a Twilio account for free here)

Node.js to build our React app and to run our server (you can build the server-side component of this in any language, but in this post we're going to do so in Node so we can keep it all JavaScript)

React Dev Tools for your browser (optional, but really useful for seeing what goes on in the application

To get started, download or clone the react-express-starter application that I built in my last blog post.