{"id":27657138,"url":"https://github.com/sendbird/sendbird-chat-sample-react","last_synced_at":"2025-06-20T03:42:59.379Z","repository":{"id":38094417,"uuid":"457648502","full_name":"sendbird/sendbird-chat-sample-react","owner":"sendbird","description":"SendBird Chat SDK sample for React.","archived":false,"fork":false,"pushed_at":"2024-10-08T06:06:48.000Z","size":8114,"stargazers_count":47,"open_issues_count":16,"forks_count":31,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-04-24T06:54:54.268Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/sendbird.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-02-10T05:51:37.000Z","updated_at":"2024-12-24T09:04:43.000Z","dependencies_parsed_at":"2023-02-10T04:01:07.326Z","dependency_job_id":"73c88dbe-b16c-4084-8c89-c74b48e0ebec","html_url":"https://github.com/sendbird/sendbird-chat-sample-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sendbird/sendbird-chat-sample-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fsendbird-chat-sample-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fsendbird-chat-sample-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fsendbird-chat-sample-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fsendbird-chat-sample-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sendbird","download_url":"https://codeload.github.com/sendbird/sendbird-chat-sample-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fsendbird-chat-sample-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260875192,"owners_count":23075906,"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-04-24T06:54:51.043Z","updated_at":"2025-06-20T03:42:54.364Z","avatar_url":"https://github.com/sendbird.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sendbird Chat SDK React Sample\n\u003e Note: This sample is a Chat SDK sample, not the UIKit React sample.\n\u003e [Visit here if you are looking for the **UIKit React sample**.](https://github.com/sendbird/sendbird-uikit-react/tree/main/samples)\n\n![React sample](/react-sample.gif?raw=true \"react sample\")\n\n## Overview\nA simple react app that demonstrates how to use the Sendbird [Chat SDK](https://sendbird.com/docs/chat).\n\n## Requirement\nA Sendbird [account](https://dashboard.sendbird.com/auth/signup).\nNode version \u003e16 is required. Download [here](https://nodejs.org/en/).\n\n## 🔒 Security tip\nWhen a new Sendbird application is created in the dashboard the default security settings are set permissive to simplify running samples and implementing your first code.\n\nBefore launching make sure to review the security tab under ⚙️ Settings -\u003e Security, and set Access token permission to Read Only or Disabled so that unauthenticated users can not login as someone else. And review the Access Control lists. Most apps will want to disable \"Allow retrieving user list\" as that could expose usage numbers and other information.\n\n\n## Setup\nReplace {YOUR_SENDBIRD_APP_ID} in constants.js with yout Sendbird app ID. \nTo get the ID  of your Sendbird application, sign in to your dashboard, select the application, go to the Settings \u003e Application \u003e General, and then check the Application ID.\n\n## Install\nrun `npm install`\n\n## Running the app\n\nrun `npm start`\n\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n## Considerations in real world app\n - In this sample repo users are connecting to sendbird using a user ID (Sendbird Dashboard --\u003e Security --\u003e Read \u0026 Write). Read \u0026 Write is not secure and will create a new user automatically from the SDK if none exists. In production be sure to change the Sendbird Dashboard security settings to Deny login, and [authenticate users](https://sendbird.com/docs/chat/v3/javascript/guides/authentication#2-connect-to-sendbird-server-with-a-user-id-and-a-token) with a Sendbird generated Session Token.\n - Typescript types are available from the Sendbird Chat SDK if you are building with TS.\n - Chat is based around user generated input so consider mitigations against XSS attacks.\n - Pagination of channel and message lists will be a must have in any real world application.\n\n\n\n# Gotchas\n - Hot reload can cause issues with the Sendbird Websocket connection while developing. Work around here https://github.com/facebook/create-react-app/issues/2519#issuecomment-318867289\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsendbird%2Fsendbird-chat-sample-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsendbird%2Fsendbird-chat-sample-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsendbird%2Fsendbird-chat-sample-react/lists"}