Real-Time Chat App with End-to-End Encryption in JavaScript

In this tutorial, we will build a secure real-time chat application using JavaScript, Node.js, and Socket.IO with end-to-end encryption. We will cover the basics of setting up the chat application, implementing the end-to-end encryption, and ensuring that our chat messages are secure.

Prerequisites

Basic knowledge of JavaScript and Node.js
Node.js and NPM installed on your local machine
A code editor, such as Visual Studio Code

Step 1: Setting up the Project

First, let's create a new folder for our project and navigate into it:

mkdir encrypted-chat-app
cd encrypted-chat-app

Initialize the project with NPM:

npm init -y

Now, we will install the necessary dependencies for our project:

npm install express socket.io

Step 2: Creating the Server

Create a new file named server.js in the project folder and add the following code:

const express = require("express");
const http = require("http");
const socketIO = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

app.use(express.static("public"));

io.on("connection", (socket) => {
  console.log("User connected");

  socket.on("disconnect", () => {
    console.log("User disconnected");
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

In this code, we're setting up a basic Express server and using Socket.IO for real-time communication.

Step 3: Creating the Frontend

Create a new folder named public in the project folder, and inside it, create two new files: index.html and main.js.

index.html

Add the following code to the index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Encrypted Chat App</title>
  </head>
  <body>
    <h1>Encrypted Chat App</h1>
    <div id="messages"></div>
    <form id="message-form">
      <input type="text" id="message-input" />
      <button type="submit">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

Add the following code to the main.js file:

const socket = io();
const form = document.getElementById("message-form");
const input = document.getElementById("message-input");
const messages = document.getElementById("messages");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (input.value) {
    socket.emit("chat message", input.value);
    input.value = "";
  }
});

socket.on("chat message", (msg) => {
  const item = document.createElement("li");
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

In this code, we're setting up the basic structure for sending and receiving chat messages.

Step 4: Implementing End-to-End Encryption

We will use the crypto-js library to implement end-to-end encryption. Install the library by running:

npm install crypto-js

server.js

Modify the server.js file to include encryption and decryption:

const CryptoJS = require("crypto-js");

// ...

io.on("connection", (socket) => {
  // ...

  socket.on("chat message", (msg) => {
    const encryptedMessage = CryptoJS.AES.encrypt(
      msg,
      "secret passphrase"
    ).toString();
    socket.broadcast.emit("chat message", encryptedMessage);
  });
});

// ...

main.js

Update the main.js file to handle encrypted messages:

// ...

socket.on("chat message", (encryptedMsg) => {
  const decryptedBytes = CryptoJS.AES.decrypt(
    encryptedMsg,
    "secret passphrase"
  );
  const msg = decryptedBytes.toString(CryptoJS.enc.Utf8);
  const item = document.createElement("li");
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

// ...

Now, our chat application sends and receives encrypted messages, ensuring that the messages are secure.

Conclusion

We have successfully built a real-time chat application with end-to-end encryption using JavaScript, Node.js, and Socket.IO. This tutorial covered the basics of setting up the chat application, implementing the end-to-end encryption, and ensuring that our chat messages are secure.

Remember to always use strong passphrases for encryption and consider implementing additional security measures, such as HTTPS, to further enhance the security of your chat application.