How to send an SMS from React with Twilio

Phil Nash - Oct 25 '18 - - Dev Community

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.

An animation showing a fake hacker, with a balaclava and extra hands.

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.

git clone https://github.com/philnash/react-express-starter.git
Enter fullscreen mode Exit fullscreen mode

Change into the directory and install the dependencies.

cd react-express-starternpm install
Enter fullscreen mode Exit fullscreen mode

In the project directory, create a file called .env:

touch .env
Enter fullscreen mode Exit fullscreen mode

You can now test the project is working by running npm run dev. The application will load in your browser at localhost:3000.

This starter application is set up to have both a React application and an Express application in the same project that you can run concurrently. If you want to find out how this works, check out this blog post.

Building the server-side

As discussed, we need to make the Twilio API calls from the server. We'll add an endpoint to the Express server that can be called from our React application. Start by installing the Twilio Node.js module. Note: for the purposes of this application I'm saving the server dependencies as development dependencies to separate them from the client-side dependencies.

npm install twilio --save-dev
Enter fullscreen mode Exit fullscreen mode

Next, we need to configure the application with our Twilio credentials. Gather your Twilio Account Sid and Auth Token from the Twilio console along with a Twilio phone number that can send SMS messages. Enter all three into the .env file you created earlier like so:

TWILIO_ACCOUNT_SID=YOUR_ACCOUNT_SID
TWILIO_AUTH_TOKEN=YOUR_AUTH_TOKEN
TWILIO_PHONE_NUMBER=YOUR_TWILIO_PHONE_NUMBER
Enter fullscreen mode Exit fullscreen mode

This will set your credentials in the environment. Now, open server/index.js so that we can get started with the code necessary for sending the message. Under the other module requires at the top of the file, require and initialise the Twilio library with the credentials from the environment.

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();
const client = require('twilio')(
  process.env.TWILIO_ACCOUNT_SID,
  process.env.TWILIO_AUTH_TOKEN
);
Enter fullscreen mode Exit fullscreen mode

We'll be sending the data to the endpoint we're building as JSON, so we'll need to be able to parse the JSON body. Configure the Express app with body parser's JSON parser:

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());app.use(pino);
Enter fullscreen mode Exit fullscreen mode

Make a route for a POST request. Add the following below the route for /api/greeting:

app.post('/api/messages', (req, res) => {

});
Enter fullscreen mode Exit fullscreen mode

We're going to respond with JSON too, so set the Content-Type header to application/json.

app.post('/api/messages', (req, res) => {
  res.header('Content-Type', 'application/json');

});
Enter fullscreen mode Exit fullscreen mode

We'll then use the Twilio client we initialised earlier to create a message. We'll use our Twilio number as the from number and get the to number and body of the message from the incoming request body. This returns a Promise that will fulfill when the API request succeeds or reject if it fails. In either event we will return a JSON response to tell the client-side whether the request was a success or not.

app.post('/api/messages', (req, res) => {
  res.header('Content-Type', 'application/json');
  client.messages
    .create({
      from: process.env.TWILIO_PHONE_NUMBER,
      to: req.body.to,
      body: req.body.body
    })
    .then(() => {
      res.send(JSON.stringify({ success: true }));
    })
    .catch(err => {
      console.log(err);
      res.send(JSON.stringify({ success: false }));
    });
});
Enter fullscreen mode Exit fullscreen mode

That's all we need on the server, let's get started on the React portion.

Building the client-side

On the client-side, we can encapsulate the form to send our SMS via the server entirely in just one component. So, in the src directory create a new component called SMSForm.js and start with the boilerplate for a component:

import React, { Component } from 'react';

class SMSForm extends Component {

}

export default SMSForm;
Enter fullscreen mode Exit fullscreen mode

We're going to create a form that a user can fill in with a phone number and message. When the form is submitted it will send the details to our server endpoint and send the message as an SMS to the number.

Let's build the render method for this component first: it will include a form, an input for the phone number, a textarea for the message and a button to submit:

  render() {
    return (
      <form>
        <div>
          <label htmlFor="to">To:</label>
          <input
             type="tel"
             name="to"
             id="to"
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea name="body" id="body"/>
        </div>
        <button type="submit">
          Send message
        </button>
      </form>
    );
  }
Enter fullscreen mode Exit fullscreen mode

We can add some CSS to style this form a bit. Create the file src/SMSForm.css and add the following:

.sms-form {
  text-align: left;
  padding: 1em;
}
.sms-form label {
  display: block;
}
.sms-form input,
.sms-form textarea {
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
}
.sms-form div {
  margin-bottom: 0.5em;
}
.sms-form button {
  font-size: 1em;
  width: 100%;
}
.sms-form.error {
  outline: 2px solid #f00;
}
Enter fullscreen mode Exit fullscreen mode

Import the CSS at the top of the SMSForm component:

import React, { Component } from 'react';
import './SMSForm.css';
Enter fullscreen mode Exit fullscreen mode

Now, import the component into src/App.js and replace the render method with the following:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SMSForm from './SMSForm';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

          <SMSForm />
        </header>
      </div>
    );
  }
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Start your application with npm run dev and you'll see the form on the page.

The form doesn't do anything yet, so let's fix that.

Making an interactive form in React

To hook the HTML form up with the component we need to do a few things:

  • Keep the state of the input and textarea up to date in the state of the component
  • Handle submitting the form and sending the data to the server
  • Handle the response from the server and clear the form if the message was sent successfully, or show an error if it wasn't

We'll start by setting up some initial state in the constructor. We'll need to store the form inputs, whether the form is currently being submitted (so that we can disable the submit button) and whether there was an error. Create the constructor for the component as follows:

class SMSForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: {
        to: '',
        body: ''
      },
      submitting: false,
      error: false
    };
  }

  // rest of the component
}
Enter fullscreen mode Exit fullscreen mode

We'll need a method that can handle changes in the form fields and update the state. We could create two methods, one for the input and one for the textarea, but since the names of the form elements and items in the state match up we can build one method to cover both.

  onHandleChange(event) {
    const name = event.target.getAttribute('name');
    this.setState({
      message: { ...this.state.message, [name]: event.target.value }
    });
  }
Enter fullscreen mode Exit fullscreen mode

Note here that we use ES2015's computed property names to set the right property in the state and the spread operator to fill in the rest of the state.

We'll need to bind this method to the object to ensure that this is correct when we use it to receive an event. Add the following to the bottom of the constructor:

  constructor(props) {
    super(props);
    this.state = {
      message: {
        to: '',
        body: ''
      },
      submitting: false,
      error: false
    };
    this.onHandleChange = this.onHandleChange.bind(this);
  }
Enter fullscreen mode Exit fullscreen mode

We can now update our rendered JSX to set the value of the form fields using the current state and handle updates with our onHandleChange method:

  render() {
    return (
      <form>
        <div>
          <label htmlFor="to">To:</label>
          <input
            type="tel"
            name="to"
            id="to"
            value={this.state.message.to}
            onChange={this.onHandleChange}
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea
            name="body"
            id="body"
            value={this.state.message.body}
            onChange={this.onHandleChange}
          />
        </div>
        <button type="submit">Send message</button>
      </form>
    );
  }
Enter fullscreen mode Exit fullscreen mode

Reload the app and you'll be able to update the form fields. If you have the React dev tools for your browser, you'll be able to see the state updating too.

Now we need to handle the form submission. Build another function, onSubmit, that starts by updating the submitting state property to true. Then use the fetch API to make the request to the server. If the response is successful then clear the form and set submitting to false. If the response is not a success, set submitting to false but set error to true.

  onSubmit(event) {
    event.preventDefault();
    this.setState({ submitting: true });
    fetch('/api/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.state.message)
    })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          this.setState({
            error: false,
            submitting: false,
            message: {
              to: '',
              body: ''
            }
          });
        } else {
          this.setState({
            error: true,
            submitting: false
          });
        }
      });
  }
Enter fullscreen mode Exit fullscreen mode

Like with the onHandleChange method, we also bind this method in the constructor:

  constructor(props) {
    super(props);
    this.state = {
      message: {
        to: '',
        body: ''
      },
      submitting: false,
      error: false
    };
    this.onHandleChange = this.onHandleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
Enter fullscreen mode Exit fullscreen mode

Now, in the JSX we add the onSubmit method as the submit handler on the form. We also set the form's class to "error" if we receive an error from the request. And while the form is submitting we set the button's disabled property.

  render() {
    return (
      <form
        onSubmit={this.onSubmit}
        className={this.state.error ? 'error sms-form' : 'sms-form'}
      >
        <div>
          <label htmlFor="to">To:</label>
          <input
            type="tel"
            name="to"
            id="to"
            value={this.state.message.to}
            onChange={this.onHandleChange}
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea
            name="body"
            id="body"
            value={this.state.message.body}
            onChange={this.onHandleChange}
          />
        </div>
        <button type="submit" disabled={this.state.submitting}>
          Send message
        </button>
       </form>
    );
  }
Enter fullscreen mode Exit fullscreen mode

This is all we need, so refresh the app again and enter your mobile number and a message to send. Submit the form and if the details are correct then your message will be sent, if not, the form will show that the state is in error.

Now when entering incorrect values the form shows an error and when you enter the correct values the message is sent.

Sending messages and keeping your credentials safe

Sending SMS messages from a web app is cool. Sending SMS messages from your React app without exposing your credentials is even cooler 😎.

You can check out all the code from this example application in the GitHub repo.

Now that you have the basis of a React app that can send SMS messages you could make some improvements. First would likely be better validation and error messages. With a similar design you could add phone number lookups, generate phone calls or implement two factor authentication right from your React app too.

I’d love to hear about the app you’re building with React. Drop me a comment below, hit me up on Twitter at @philnash or send an email my way at philnash@twilio.com.

Image
Working with Databases in Python: SQLite and PostgreSQL 📊🐍
Image
Game Testing Automation Tools You Need To Know About
Image
10 Gas Heating Engineer Near Me That Are Unexpected
Image
10 Best Mobile Apps For Asbestos Lawsuit Settlement Amount
Image
trik putuskan permainan slots online yang popular
Image
Window With Cat Flap
Image
The People Closest To Spare Key Maker Near Me Share Some Big Secrets
Image
Do You Know How To Explain Fabric Corner Recliner Sofa To Your Mom
Image
What Freud Can Teach Us About Leather Fabric Corner Sofa
Image
20 Resources To Help You Become More Effective At What Causes Mesothelioma Other Than Asbestos
Image
website judi slots online dapat dipercaya mudah menang
Image
Five Corner Recliner Sofa Fabric Lessons From The Professionals
Image
My Hacktoberfest 2024 Journey: A Reflection on Contributor Experience

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
ketidakcocokan slots online dengan off line?
Image
Fire and Safety Course

webdev, beginners, tutorial, react
Image
Five Asbestos Attorney Lawyer Mesothelioma Lessons From Professionals
Image
Top 3 OpenSource Tools for AI Startups

webdev, javascript, beginners, programming
Image
What's The Reason Everyone Is Talking About Gas Service Engineer Near Me Right Now
Image
Why Is Private Mental Health Assessment So Popular?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .