{"id":27874700,"url":"https://github.com/camerodev/twilio-conversations-demo-react","last_synced_at":"2025-05-05T01:37:31.295Z","repository":{"id":231525133,"uuid":"772770763","full_name":"camerodev/twilio-conversations-demo-react","owner":"camerodev","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-15T21:36:12.000Z","size":1153,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T16:43:28.906Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/camerodev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-15T21:36:05.000Z","updated_at":"2024-03-29T17:35:38.000Z","dependencies_parsed_at":"2024-04-04T13:18:41.457Z","dependency_job_id":"c4d5de56-c0d7-4c9c-9d74-0feafb7e4ce5","html_url":"https://github.com/camerodev/twilio-conversations-demo-react","commit_stats":null,"previous_names":["slickcharmer/twilio-conversations-demo-react","camerodev/twilio-conversations-demo-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Ftwilio-conversations-demo-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Ftwilio-conversations-demo-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Ftwilio-conversations-demo-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camerodev%2Ftwilio-conversations-demo-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camerodev","download_url":"https://codeload.github.com/camerodev/twilio-conversations-demo-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252424925,"owners_count":21745835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-05T01:37:30.655Z","updated_at":"2025-05-05T01:37:31.288Z","avatar_url":"https://github.com/camerodev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Conversations Demo Web Application Overview\n\nSDK version of this demo app: ![](https://img.shields.io/badge/SDK%20version-2.0.0-blue.svg)\n\nThe latest available SDK version of this demo app: ![](https://img.shields.io/badge/SDK%20version-2.0.0-green.svg)\n\n## Getting Started\n\nWelcome 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.\n\nYou can try out one of our 1-click deploys to test the app out prior to jumping to [Next Steps](#next-steps):\n\n## Deploy\n\n### Test out on Github Codespaces\n\n[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/twilio/twilio-conversations-demo-react)\n\nNote: This deployment requires a [token service url](#generating-access-tokens).\n\n### Deploy to Vercel\n\nAutomatically clone this repo and deploy it through Vercel. \n\nNote: This deployment requires a [token service url](#generating-access-tokens). Vercel will ask for the `REACT_APP_ACCESS_TOKEN_SERVICE_URL` env variable. \n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ftwilio%2Ftwilio-conversations-demo-react%2F\u0026env=REACT_APP_ACCESS_TOKEN_SERVICE_URL\u0026envDescription=A%20link%20to%20your%20access%20token%20server.%20Use%20the%20Twilio%20Functions%20example%20from%20the%20readme%20for%20quick%20testing.\u0026envLink=https%3A%2F%2Fgithub.com%2Ftwilio%2Ftwilio-conversations-demo-react%2F%23generating-access-tokens\u0026project-name=twilio-conversations\u0026repository-name=twilio-conversations)\n\n## Next Steps\n\nWhat you'll need to get started:\n\n- A [fork](https://github.com/twilio/twilio-conversations-demo-react/fork) of this repo to work with.\n- A way to [generate Conversations access tokens](#generating-access-tokens).\n- Optional: A Firebase project to [set up push notifications](#setting-up-push-notifications).\n\n## Generating Access Tokens\n\nClient apps need [access tokens](https://www.twilio.com/docs/conversations/create-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](#set-the-token-service-url). \n\nFor testing purposes, you can quickly set up a Twilio Serverless Functions to generate access tokens. Note that this is not a production ready implementation.\n\n### Generating Access Tokens with Twilio Functions\n\n1. Create a [Twilio Functions Service from the console](https://www.twilio.com/console/functions/overview) and add a new function using the **Add+** button.\n2. Set the function path name to `/token-service`\n3. Set the function visibility to `Public`. \n4. Insert the following code:\n\n```javascript\n// If you do not want to pay for other people using your Twilio service for their benefit,\n// generate user and password pairs different from what is presented here\nlet users = {\n    user00: \"\", !!! SET NON-EMPTY PASSWORD AND REMOVE THIS NOTE, THIS GENERATOR WILL NOT WORK WITH EMPTY PASSWORD !!!\n    user01: \"\"  !!! SET NON-EMPTY PASSWORD AND REMOVE THIS NOTE, THIS GENERATOR WILL NOT WORK WITH EMPTY PASSWORD !!!\n};\n\nlet response = new Twilio.Response();\nlet headers = {\n    'Access-Control-Allow-Origin': '*',\n  };\n\nexports.handler = function(context, event, callback) {\n    response.setHeaders(headers);\n    if (!event.identity || !event.password) {\n        response.setStatusCode(401);\n        response.setBody(\"No credentials\");\n        callback(null, response);\n        return;\n    }\n\n    if (users[event.identity] != event.password) {\n        response.setStatusCode(401);\n        response.setBody(\"Wrong credentials\");\n        callback(null, response);\n        return;\n    }\n    \n    let AccessToken = Twilio.jwt.AccessToken;\n    let token = new AccessToken(\n      context.ACCOUNT_SID,\n      context.TWILIO_API_KEY_SID,\n      context.TWILIO_API_KEY_SECRET, {\n        identity: event.identity,\n        ttl: 3600\n      });\n\n    let grant = new AccessToken.ChatGrant({ serviceSid: context.SERVICE_SID });\n    if(context.PUSH_CREDENTIAL_SID) {\n      // Optional: without it, no push notifications will be sent\n      grant.pushCredentialSid = context.PUSH_CREDENTIAL_SID; \n    }\n    token.addGrant(grant);\n    response.setStatusCode(200);\n    response.setBody(token.toJwt());\n\n    callback(null, response);\n};\n```\n\n5. Save the function.\n6. Open the **Environment Variables** tab from the **Settings** section and: \n    - Check the **\"Add my Twilio Credentials (ACCOUNT_SID) and (AUTH_TOKEN) to ENV\"** box, so that you get `ACCOUNT_SID` automatically.\n    - Add SERVICE_SID\n        - Open [Conversations Services](https://www.twilio.com/console/conversations/services)\n        - Copy the `SID` for `Default Conversations Service`, or the service you want to set up.\n    - Add `TWILIO_API_KEY_SID` and `TWILIO_API_KEY_SECRET`. Create API Keys [in the console](https://www.twilio.com/console/project/api-keys).\n    - Optionally add `PUSH_CREDENTIAL_SID`, for more info see [Setting up Push Notifications](#setting-up-push-notifications)\n7. **Copy URL** from the \"kebab\" three dot menu next to it and and use it as `REACT_APP_ACCESS_TOKEN_SERVICE_URL` .env variable below.\n8. Click **Deploy All**.\n\n### Set the Token Service URL\n\nIf 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.  \n\n```\nREACT_APP_ACCESS_TOKEN_SERVICE_URL=http://example.com/token-service/\n```\n\nNOTE: No need for quotes around the URL, they will be added automatically.\n\nThis demo app expects your access token server to provide a valid token for valid credentials by URL:\n\n ```\n$REACT_APP_ACCESS_TOKEN_SERVICE_URL?identity=\u003cUSER_PROVIDED_USERNAME\u003e\u0026password=\u003cUSER_PROVIDED_PASSWORD\u003e\n ```\nAnd return HTTP 401 in case of invalid credentials.\n\n## Setting up Push Notifications\n\nThis demo app uses Firebase for processing notifications. This setup is optional. Note: Support may be limited for some browswers. \n\n### Set up Firebase\n\n1. Create a [Firebase project](https://firebase.google.com)\n2. Go to the [Project Settings](https://console.firebase.google.com/project/_/settings/general/)\n3. Got to the **Cloud Messaging** and enable **Cloud Messaging API (Legacy)** through the \"kebab\" menu besides it.\n4. Note or copy the Server Key token for creating push credentials. \n\n### Create Push Credential\n\nCreate a push credential to add a push grant to our access token. \n1. Go to the [Credentials](twilio.com/console/project/credentials/push-credentials) section of the console.\n2. Create a new FCM Push Credential and set the Firebase Cloud Message Server Key Token as the `FCM Secret`.\n3. Note or copy the `CREDENTIAL SID` to set as `PUSH_CREDENTIAL_SID` env variable in your token creation Function. \n\n### Create Firebase App set config\n\nFrom the Firebase [Project Settings](https://console.firebase.google.com/project/_/settings/general/) **General** tab, add a web app to get the `firebaseConfig`, it should look like this:\n\n```javascript\nvar firebaseConfig = {\n  apiKey: \"sample__key12345678901234567890\",\n  authDomain: \"convo-demo-app-internal.firebaseapp.com\",\n  projectId: \"convo-demo-app-internal\",\n  storageBucket: \"convo-demo-app-internal.appspot.com\",\n  messagingSenderId: \"1234567890\",\n  appId: \"1:1234567890:web:1234abcd\",\n  measurementId: \"EXAMPLE_ID\"\n};\n```\n\nNote: Firebase API Keys aren't like Twilio API keys and don't need to be kept secret. \n\nReplace this project's `firebase-config.example` in the `public` folder with a `firebase-config.js` containing your specific config.  \n\n### Enable Push Notification in Conversations Service\n\nSelect your [conversations service](https://www.twilio.com/console/conversations/services), navigate to the **Push Notifications** section, and check the **Push notifications enabled** boxes for the push notifications you want. \n\n## Build \u0026 Run\n\n### Deploy on Github Codespaces\n\n- Click [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/twilio/twilio-conversations-demo-react)\n- Wait for the pop-up message to let you know that the port forwarding is done. Then, click \"Open in Browser\".\n- If the pop-up message isn't displayed, you can always open \"PORTS\" tab and click on \"Open in Browser\" button manually.\n\n### Run Application Locally\n\n- Run `yarn` to fetch project dependencies.\n- Run `yarn build` to fetch Twilio SDK files and build the application.\n- Run `yarn start` to run the application locally.\n\n### Run Application Inside Docker\n\n- Run `docker compose up --build` to build and locally run the application inside a Docker container.\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamerodev%2Ftwilio-conversations-demo-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamerodev%2Ftwilio-conversations-demo-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamerodev%2Ftwilio-conversations-demo-react/lists"}