Verify user's auth status

backend/communication-service/.env.sample

@@ -3,3 +3,6 @@ SERVER_PORT=3005
 
 # Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
+
+# Other service APIs
+USER_SERVICE_URL=http://user-service:3001/api

backend/communication-service/README.md

@@ -36,14 +36,18 @@
 
    ![image2.png](./docs/images/postman-setup2.png)
 
-   - To send a message, go to the `Message` tab and ensure that your message is being parsed as `JSON`.
+   - Add a valid JWT token in the `Authorization` header.
 
    ![image3.png](./docs/images/postman-setup3.png)
 
    - In the `Event name` input, input the correct event name. Click on `Send` to send a message.
 
    ![image4.png](./docs/images/postman-setup4.png)
 
+   - To send a message, go to the `Message` tab and ensure that your message is being parsed as `JSON`.
+
+   ![image5.png](./docs/images/postman-setup5.png)
+
 ## Events Available
 
 | Event Name            | Description                       | Parameters                                                                                                                                                                                           | Response Event                                                                        |

backend/communication-service/package.json

@@ -14,6 +14,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "axios": "^1.7.7",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.1",

backend/communication-service/src/handlers/websocketHandler.ts

@@ -9,6 +9,7 @@ export const handleWebsocketCommunicationEvents = (socket: Socket) => {
     CommunicationEvents.JOIN,
     async ({ roomId, username }: { roomId: string; username: string }) => {
       connectUser(username);
+      console.log(username, roomId);
       const room = io.sockets.adapter.rooms.get(roomId);
       if (room?.has(socket.id)) {
         socket.emit(CommunicationEvents.ALREADY_JOINED);

backend/communication-service/src/server.ts

@@ -2,16 +2,31 @@ import app, { allowedOrigins } from "./app";
 import { createServer } from "http";
 import { Server } from "socket.io";
 import { handleWebsocketCommunicationEvents } from "./handlers/websocketHandler";
+import { verifyToken } from "./utils/userServiceApi";
 
 const PORT = process.env.SERVICE_PORT || 3005;
 
 const server = createServer(app);
 
 export const io = new Server(server, {
-  cors: { origin: allowedOrigins, methods: ["GET", "POST"] },
+  cors: { origin: allowedOrigins, methods: ["GET", "POST"], credentials: true },
   connectionStateRecovery: {},
 });
 
+io.use((socket, next) => {
+  const token =
+    socket.handshake.headers.authorization || socket.handshake.auth.token;
+  verifyToken(token)
+    .then(() => {
+      console.log("Valid credentials");
+      next();
+    })
+    .catch((err) => {
+      console.error(err);
+      next(new Error("Unauthorized"));
+    });
+});
+
 io.on("connection", handleWebsocketCommunicationEvents);
 
 server.listen(PORT, () => {

backend/communication-service/src/utils/userServiceApi.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+const USER_SERVICE_URL =
+  process.env.USER_SERVICE_URL || "http://localhost:3001/api";
+
+const userClient = axios.create({
+  baseURL: USER_SERVICE_URL,
+  withCredentials: true,
+});
+
+export const verifyToken = (token: string | undefined) => {
+  return userClient.get("/auth/verify-token", {
+    headers: { authorization: token },
+  });
+};

docker-compose.yml

@@ -95,6 +95,8 @@ services:
     env_file: ./backend/communication-service/.env
     ports:
       - 3005:3005
+    depends_on:
+      - user-service
     networks:
       - peerprep-network
     volumes:

frontend/src/components/Chat/index.tsx

@@ -10,6 +10,7 @@ import {
   USE_MATCH_ERROR_MESSAGE,
 } from "../../utils/constants";
 import { useAuth } from "../../contexts/AuthContext";
+import { toast } from "react-toastify";
 
 type Message = {
   from: string;
@@ -36,6 +37,7 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
   const match = useMatch();
   const auth = useAuth();
   const messagesRef = useRef<HTMLDivElement>(null);
+  const errorHandledRef = useRef(false);
 
   if (!match) {
     throw new Error(USE_MATCH_ERROR_MESSAGE);
@@ -68,10 +70,17 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
     const listener = (message: Message) => {
       setMessages((prevMessages) => [...prevMessages, message]);
     };
+    const errorListener = () => {
+      if (!errorHandledRef.current) {
+        toast.error("Connection error. Please try again.");
+        errorHandledRef.current = true;
+      }
+    };
 
     communicationSocket.on(CommunicationEvents.USER_JOINED, listener);
     communicationSocket.on(CommunicationEvents.TEXT_MESSAGE_RECEIVED, listener);
     communicationSocket.on(CommunicationEvents.DISCONNECTED, listener);
+    communicationSocket.on(CommunicationEvents.CONNECT_ERROR, errorListener);
 
     return () => {
       communicationSocket.off(CommunicationEvents.USER_JOINED, listener);
@@ -80,6 +89,7 @@ const Chat: React.FC<ChatProps> = ({ isActive }) => {
         listener
       );
       communicationSocket.off(CommunicationEvents.DISCONNECTED, listener);
+      communicationSocket.off(CommunicationEvents.CONNECT_ERROR, errorListener);
     };
   }, []);
 

frontend/src/utils/communicationSocket.ts

@@ -11,6 +11,7 @@ export enum CommunicationEvents {
   USER_JOINED = "user_joined",
   ALREADY_JOINED = "already_joined",
   TEXT_MESSAGE_RECEIVED = "text_message_received",
+  CONNECT_ERROR = "connect_error",
   DISCONNECTED = "disconnected",
 }
 
@@ -19,4 +20,8 @@ const COMMUNICATION_SOCKET_URL = "http://localhost:3005";
 export const communicationSocket = io(COMMUNICATION_SOCKET_URL, {
   reconnectionAttempts: 3,
   autoConnect: false,
+  withCredentials: true,
+  auth: {
+    token: `Bearer ${localStorage.getItem("token")}`,
+  },
 });