You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Twilio Programmable Chat makes it easy for you to add chat features into your web and mobile apps without building or scaling a real-time chat backend. Chat has all the necessary APIs and features to integrate with your business logic to ensure you are in control.
12
16
17
+
I wanted to build a quick, full-featured chat feature for my React Native app. I managed to do it with [Twilio Programmable Chat](https://www.twilio.com/docs/chat).
18
+
19
+
I searched the internet a lot to find the best way to use Twilio Programmable Chat with React Native. Unfortunately, I couldn’t find much. So I decided to write an article about it, hopefully saving others some time.
20
+
13
21
## Setting up the Project
14
22
15
23
Install the repository:
@@ -23,6 +31,98 @@ cd react-native-twilio-chat
23
31
npm run ios
24
32
```
25
33
34
+
## Creating Our Server
35
+
36
+
Before we get started, We need to generate an access token to authorize the React Native app to communicate with the Programmable Twilio Chat.
37
+
To set up our backend for Chat, we’ll need four values from our Twilio account. We’ll store these in our .env file:
38
+
- Service instance SID—a service instance where all the data for our application is stored and scoped
39
+
- Account SID — your primary Twilio account identifier
40
+
- API key — used to authenticate
41
+
- API secret — used to authenticate
42
+
43
+
Now, if your account is ready, you can find your account SID on the [Twilio Console](https://www.twilio.com/console). You should copy and paste it as the value TWILIO_ACCOUNT_SID to the .env file.
Let’s copy and paste the service SID as the value TWILIO_CHAT_SERVICE_SID.
68
+
69
+
Finally, our .env file should look like this:
70
+
```js
71
+
TWILIO_ACCOUNT_SID=your_account_sid
72
+
TWILIO_API_KEY=your_api_key
73
+
TWILIO_API_SECRET=your_api_secret
74
+
TWILIO_CHAT_SERVICE_SID=your_chat_service_sid
75
+
```
76
+
77
+
When our .env is ready, we can create a simple server with a single GET route, /token/:identity. This route will request and return a token from TWILIO. Let’s install dependencies for our server:
78
+
79
+
```sh
80
+
yarn add express dotenv twilio
81
+
```
82
+
83
+
Create our server.js:
84
+
```js
85
+
require('dotenv').config();
86
+
87
+
constTwilio=require('twilio');
88
+
constexpress=require('express');
89
+
90
+
constapp=express();
91
+
92
+
constAccessToken=Twilio.jwt.AccessToken;
93
+
constChatGrant=AccessToken.ChatGrant;
94
+
95
+
app.get('/token/:identity', (req, res) => {
96
+
constidentity=req.params.identity;
97
+
consttoken=newAccessToken(
98
+
process.env.TWILIO_ACCOUNT_SID,
99
+
process.env.TWILIO_API_KEY,
100
+
process.env.TWILIO_API_SECRET,
101
+
);
102
+
103
+
token.identity= identity;
104
+
token.addGrant(
105
+
newChatGrant({
106
+
serviceSid:process.env.TWILIO_CHAT_SERVICE_SID,
107
+
}),
108
+
);
109
+
110
+
res.send({
111
+
identity:token.identity,
112
+
jwt:token.toJwt(),
113
+
});
114
+
});
115
+
116
+
app.listen(3001, function () {
117
+
console.log('Programmable Chat server running on port 3001!');
118
+
});
119
+
```
120
+
121
+
That’s it for our server. Now, We can run our server with the following command line:
0 commit comments