SDK version of this demo app:
The latest available SDK version of this demo app:
Welcome to the Conversations Demo Web application. This application demonstrates a basic Conversations client application with the ability to create and join conversations, add other participants into the conversations and exchange messages.
You can try out one of our 1-click deploys to test the app out prior to jumping to Next Steps:
Note: This deployment requires a token service url.
Automatically clone this repo and deploy it through Vercel.
Note: This deployment requires a token service url. Vercel will ask for the REACT_APP_ACCESS_TOKEN_SERVICE_URL
env variable.
What you'll need to get started:
Client apps need access tokens to authenticate and connect to the Conversations service as a user. These tokens should be generated by your backend server using your private Twilio API Keys. If you already have a service that does this, skip to setting the token service URL.
For testing purposes, you can quickly set up a Twilio Serverless Functions to generate access tokens. Note that this is not a production ready implementation.
/token-service
Public
. // If you do not want to pay for other people using your Twilio service for their benefit,
// generate a username and password pair different from what is presented below.
//The 1st value [user00] acts as your Username for the Demo app Login. The 2nd value within double qoutes will act as your Password for the login.
//This method is not advised to be used in production. This is ONLY for testing. In production, please utilize your own server side application to handle your users.
let users = {
user00: "", !!! SET NON-EMPTY PASSWORD AND REMOVE THIS NOTE, THIS GENERATOR WILL NOT WORK WITH EMPTY PASSWORD !!!
user01: "" !!! SET NON-EMPTY PASSWORD AND REMOVE THIS NOTE, THIS GENERATOR WILL NOT WORK WITH EMPTY PASSWORD !!!
};
let response = new Twilio.Response();
let headers = {
'Access-Control-Allow-Origin': '*',
};
exports.handler = function(context, event, callback) {
response.setHeaders(headers);
if (!event.identity || !event.password) {
response.setStatusCode(401);
response.setBody("No credentials");
callback(null, response);
return;
}
if (users[event.identity] != event.password) {
response.setStatusCode(401);
response.setBody("Wrong credentials");
callback(null, response);
return;
}
let AccessToken = Twilio.jwt.AccessToken;
let token = new AccessToken(
context.ACCOUNT_SID,
context.TWILIO_API_KEY_SID,
context.TWILIO_API_KEY_SECRET, {
identity: event.identity,
ttl: 3600
});
let grant = new AccessToken.ChatGrant({ serviceSid: context.SERVICE_SID });
if(context.PUSH_CREDENTIAL_SID) {
// Optional: without it, no push notifications will be sent
grant.pushCredentialSid = context.PUSH_CREDENTIAL_SID;
}
token.addGrant(grant);
response.setStatusCode(200);
response.setBody(token.toJwt());
callback(null, response);
};
ACCOUNT_SID
automatically.SID
for Default Conversations Service
, or the service you want to set up.TWILIO_API_KEY_SID
and TWILIO_API_KEY_SECRET
. Create API Keys in the console.PUSH_CREDENTIAL_SID
, for more info see Setting up Push NotificationsREACT_APP_ACCESS_TOKEN_SERVICE_URL
.env variable below.If you don't have your own .env
, rename this repo's .env.example
file to .env
. Set the value of REACT_APP_ACCESS_TOKEN_SERVICE_URL
to point to a valid Access Token server. If you used Twilio Functions for generating tokens, get the value from Copy URL in step 7 above.
REACT_APP_ACCESS_TOKEN_SERVICE_URL=http://example.com/token-service/
NOTE: No need for quotes around the URL, they will be added automatically.
This demo app expects your access token server to provide a valid token for valid credentials by URL:
$REACT_APP_ACCESS_TOKEN_SERVICE_URL?identity=<USER_PROVIDED_USERNAME>&password=<USER_PROVIDED_PASSWORD>
And return HTTP 401 in case of invalid credentials.
This demo app uses Firebase for processing notifications. This setup is optional. Note: Support may be limited for some browsers.
Create a push credential to add a push grant to our access token.
FCM Secret
.CREDENTIAL SID
to set as PUSH_CREDENTIAL_SID
env variable in your token creation Function. From the Firebase Project Settings General tab, add a web app to get the firebaseConfig
, it should look like this:
var firebaseConfig = {
apiKey: "sample__key12345678901234567890",
authDomain: "convo-demo-app-internal.firebaseapp.com",
projectId: "convo-demo-app-internal",
storageBucket: "convo-demo-app-internal.appspot.com",
messagingSenderId: "1234567890",
appId: "1:1234567890:web:1234abcd",
measurementId: "EXAMPLE_ID"
};
Note: Firebase API Keys aren't like Twilio API keys and don't need to be kept secret.
Replace this project's firebase-config.example
in the public
folder with a firebase-config.js
containing your specific config.
Select your conversations service, navigate to the Push Notifications section, and check the Push notifications enabled boxes for the push notifications you want.
yarn
to fetch project dependencies.yarn build
to fetch Twilio SDK files and build the application.yarn start
to run the application locally.docker compose up --build
to build and locally run the application inside a Docker container.MIT