How to send an SMS using Twilio through frontend with react?

I've read the Twilio documentation and I can't find a way to send a simple SMS from the frontend using JavaScript/React.

The Twilio documentation just shows how to do that using Node.js(server side).

Actually, I found the documentation a bit awkward because they don't explain the how to do that using the most common programme language on the web.

I'm using postman and it works fine, but on my react code doesn't. The code below was exported from Postman:

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://api.twilio.com/2010-04-01/Accounts/AC62761f2bae5c5659cc5eb65d42e5d57e/Messages.json",
    "method": "POST",
    "headers": {
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": "Basic hashedAuthToken",
            "Cache-Control": "no-cache",
            "Postman-Token": "0s41f5ac-2630-40c4-8041-1e5ee513f20d"
    },
    "data": {
            "To": "+353838173123",
            "From": "+18634000432",
            "MessagingServiceSid": "MG3d622e63a343e11a2032b1414560f227",
            "Body": "Test, hi"
    }
}

$.ajax(settings).done(function (response) {
    console.log(response);
});

PS: The tokens above was modified. It won't work if you are not using your own credential.

You can use the method below to do that easily.

sendSMSTwilio(message) {
    const url = Config.sms.url;

    const accountSid = Config.sms.accoundId;
    const authToken = Config.sms.authToken;
    const auth = 'Basic ' + new Buffer(Config.sms.accountSid + ':' + Config.sms.authToken).toString('base64');

    const details = {
        To: message.to,
        From: message.from,
        MessagingServiceSid: Config.sms.serviceSid,
        Body: message.text
    };

    const formBody = [];
    for (var property in details) {
        const encodedKey = encodeURIComponent(property);
        const encodedValue = encodeURIComponent(details[property]);
        formBody.push(encodedKey + '=' + encodedValue);
    }
    const body = formBody.join('&');

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            Authorization: auth
        },
        body
    };

    return new Promise((resolve, reject) => {
        return fetch(url, options)
            .then((response) => {
              return resolve(response);
            })
            .then((responseJson) => {
              return resolve(responseJson);
            })
            .catch((error) => {
              return reject(error);
            });
        });
  }

You can call and receive the promise response like that:

this.sendSMSTwilio()
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log('Error SMS sender', err);
  });