Send a text message (SMS) with Twilio using React Native?

Question

How do I send a text message with twilio in react native?

I have not found anything related to react native in the documentation.

The code below is not working to send a text message.

  fetch('https://api.twilio.com/2019-01-01/Accounts/ACxxxxxxxxxxx/Messages',
    {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                    },


                body: JSON.stringify({
                      user:'ACxxxxxxxxxxxxxxxxxxxxxxx',
                      password:'xxxxxxxxxxxxxxxxxxxxxxxxx',
                      to: '+xxxxxxxxxx',
                      body: 'test',
                      from: '+xxxxxxxxxxx',

                       }),
                    }) .then((response) => {
                      console.log(JSON.stringify(response))
                      alert(JSON.stringify(response))
                    })
                    .catch((error) => {
                      alert('error' + error);
                    });

ERROR:

I/ReactNativeJS: {"type":"default","status":401,"ok":false,"headers":{"map":{"connection":"keep-alive","content-length":"327","x-powered-by":"AT-5000","x-shenanigans":"none","www-authenticate":"Basic realm=\"Twilio API\"","access-control-allow-headers":"Accept, Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since","date":"Tue, 08 Jan 2019 09:22:05 GMT","access-control-allow-methods":"GET, POST, DELETE, OPTIONS","twilio-request-id":"RQ4e86455b1a2446afb35feab5ea5f0789","access-control-allow-credentials":"true","access-control-allow-origin":"*","access-control-expose-headers":"ETag","content-type":"application/xml","twilio-request-duration":"0.003","strict-transport-security":"max-age=31536000"}},"url":"https://api.twilio.com/2010-04-01/Accounts/AC8xxxxxxxxxxxxxxxxX/Messages","_bodyInit":"\n20003Your AccountSid or AuthToken was incorrect.Authentication Error - No credentials providedhttps://www.twilio.com/docs/errors/20003401","_bodyText":"\n20003Your AccountSid or AuthToken was incorrect.Authentication Error - No credentials providedhttps://www.twilio.com/docs/errors/20003401"}

What is the response you get? What error message is shown? You have to write/tell more details about "not working". — cramopy
It says no credentials and gives 401. Checkout the solutions here — Pritish Vaidya
@devedv No, your credentials are not correct. You must either use the Header (not body!!) with HTTP Basic Authentication or you have to generate a revocable API Keys to authenticate which again has to be sent as a header, not as a body value. Please check the documentation for the error message as it clearly states what's wrong/missing. — cramopy

philnash philnash · Accepted Answer · 2019-01-09T01:35:38

Twilio developer evangelist here.

First things first, please do not make API requests directly from within native applications. If you do so, you need to included your API credentials within the app somehow. This means an attacker could decompile your application, recover your account credentials and abuse your account and your credit without your permission.

Instead, you should set up a server of your own that you can securely store your credentials on and make API requests from. I wrote up a blog post on how to send SMS messages with React (not Native, sorry) which might help and show you how things should work within a React app.

Send a text message (SMS) with Twilio using React Native?

1 Answers