CometChat End-to-end Encryption Sample App (React)

CometChat End-to-end Encryption Sample App (built using CometChat UI Kit) is a fully functional real-time messaging app capable of Encrypted private (one-on-one) & group text messaging using the Virgil's E3Kit.

Features

• Login
• Encrypted Private(1-1) & Group text messages

---

Prerequisites

React setup

• React

  npm install react@17.0.2

• React DOM

  npm install react-dom@17.0.2

• React App Rewired

  npm install --save-dev react-app-rewired

• Replace react-scripts with react-app-rewired

  /* package.json */
  
  "scripts": {
  -   "start": "react-scripts start",
  +   "start": "react-app-rewired start",
  -   "build": "react-scripts build",
  +   "build": "react-app-rewired build",
  -   "test": "react-scripts test",
  +   "test": "react-app-rewired test",
      "eject": "react-scripts eject"
  }

Node sass

• Add node-sass dependency in your project.

  npm install --save-dev node-sass@version

  Note: Cross check for the compatible version of this dependency with your system's node version in the link given below
  https://www.npmjs.com/package/node-sass

Client-side Virgil setup

• Virgil E3Kit

  npm install @virgilsecurity/e3kit-browser

• File loader

  npm install --save-dev file-loader

• Create a file named config-overrides.js along-side package.json & paste the below content:

  module.exports = (config, env) => {
    config.module.rules[1].oneOf.unshift({
      test: /\.wasm$/,
      type: 'javascript/auto',
      loader: 'file-loader',
    });
    return config;
  };

Virgil Dashboard & Extension settings:

• Sign up or Log in with Virgil.
• Create a new application.
• Go to E3Kit section & create the .env file. Copy the following details:
  • APP_ID
  • APP_KEY_ID
  • APP_KEY
• Login to CometChat Dashboard & select your app.
• Go to the Extensions section & enable the End-to-end encryption extension.
• Open the Settings for this extension & save the following:
  • APP_ID
  • APP_KEY_ID
  • APP_KEY
• Save your settings.

---

Installing the Sample App

1. Clone this repository

   git clone https://github.com/cometchat-pro/javascript-react-chat-end-to-end-encryption-app.git

2. Navigate to the root directory & replace APP_ID, REGION & AUTH_KEY with your CometChat app's App ID, Region & Auth Key in src/consts.js file.

   

3. Install dependencies:

   npm install

---

Running the sample app

  npm start

---

Troubleshooting

• To learn more about the End-to-end encryption extension visit our Documentation.

• Facing any issues while integration? Please connect with us via real-time support present in the CometChat Dashboard.

---

Contributors

Thanks to the following people who have contributed to this project:

@priyadarshininadar
@ajaygajra
@prathamesh-majgaonkar
@shubhamsingh-CometChat
@mayur-bhandari

---

Contact

Contact us via real time support present in the CometChat Dashboard.

---

License

This project uses the following license.