create socket authentication middleware

Author: burakyzn

client/src/components/CreateRoomDrawer.jsx

@@ -58,7 +58,6 @@ export default function CreateRoomDrawer(props) {
     let newRoom = {
       name: roomName,
       nicknames: checkedUsers,
-      token: localStorage.getItem("token"),
     };
     socket.emit("create-room", newRoom);
     setOpenCreateRoom(false);

client/src/components/MenuButton.jsx

@@ -12,14 +12,15 @@ import "../styles/MenuButton.css";
 
 export default function MenuButton() {
   const { setOpenSetting, setOpenCreateRoom } = useContext(MenuContext);
-  const { socket } = useContext(SocketContext);
+  const { socket, setToken } = useContext(SocketContext);
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const handleLogout = () => {
     localStorage.removeItem("token");
     dispatch(resetChatState());
     dispatch(resetSidebarState());
+    setToken("");
     socket.close();
     navigate("/login");
   };

client/src/components/MoreButton.jsx

@@ -22,7 +22,6 @@ export default function MoreButton() {
   const handleLeaveRoom = () => {
     let roomContent = {
       room: selectedChat,
-      token: localStorage.getItem("token"),
     };
     socket.emit("leave-room", roomContent);
     dispatch(changeSelectedChat("Public"));

client/src/contexts/messageContext.jsx

@@ -28,7 +28,6 @@ function MessageProvider(props) {
     socket.emit("chat-message", {
       to: chat,
       message: message,
-      token: localStorage.getItem("token"),
     });
 
     setMessage("");

client/src/contexts/socketContext.jsx

@@ -1,20 +1,32 @@
 import { io } from "socket.io-client";
-import { createContext } from "react";
+import { useState, createContext, useEffect } from "react";
 
 export const SocketContext = createContext();
 
-const socket =
-  process.env.NODE_ENV === "production"
-    ? io({
-        autoConnect: false,
-      })
-    : io(process.env.REACT_APP_API_BASE, {
-        autoConnect: false,
-      });
-
 function SocketProvider(props) {
+  const [token, setToken] = useState("");
+
+  const socketOptions = {
+    autoConnect: false,
+    auth: {
+      token: token,
+    },
+  };
+
+  const handleNewSocket = () =>
+    process.env.NODE_ENV === "production"
+      ? io(socketOptions)
+      : io(process.env.REACT_APP_API_BASE, socketOptions);
+
+  const [socket, setSocket] = useState(handleNewSocket);
+
+  useEffect(() => {
+    socketOptions.auth.token = token;
+    setSocket(handleNewSocket);
+  }, [token]);
+
   return (
-    <SocketContext.Provider value={{ socket }}>
+    <SocketContext.Provider value={{ socket, setToken }}>
       {props.children}
     </SocketContext.Provider>
   );

client/src/pages/Home.jsx

@@ -21,7 +21,7 @@ import "../styles/Home.css";
 function Home() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { socket } = useContext(SocketContext);
+  const { socket, setToken } = useContext(SocketContext);
   const [loader, setLoader] = useState(false);
   const [settingDrawerWidth, setSettingDrawerWidth] = useState("0");
   const sidebarRef = useRef();
@@ -56,8 +56,9 @@ function Home() {
           dispatch(changeNickname(result.nickname));
           dispatch(changeAvatar(result.avatar));
           dispatch(changeAboutMe(result.aboutMe));
+          setToken(token);
           socket.connect();
-          socket.emit("new-user", token);
+          socket.emit("new-user");
           setLoader(false);
         })
         .catch((error) => {

controllers/userController.js

@@ -27,7 +27,7 @@ const updateAvatar = async (req,res) => {
   let nickname = req.userClaims.nickname;
 
   let url = await userService.updateAvatar(image, nickname);
-  await userService.updateUserAvatarUrl(url, nickname);
+  await userService.updateUserAvatar(url, nickname);
 
   res.json({success: true, message: "You updated your profile photo successfully!", url: url});
 }

helpers/color.js

@@ -1,7 +1,7 @@
 
 const userService = require('../services/userService');
 
-module.exports = async (req, res, next) => {
+const apiAuth = async (req, res, next) => {
   let token = req.headers.authorization;
   if(!token)
     return res.status(401).send({ success: false, code: "token-required", message: "Token is required!" });
@@ -13,9 +13,36 @@ module.exports = async (req, res, next) => {
   var userDetails = await userService.getUserByNickname(verifiedNickname);
   req.userClaims = {
     nickname: verifiedNickname,
-    avatar: userDetails.avatarURL,
+    avatar: userDetails.avatar,
     aboutMe: userDetails.aboutMe
   }
 
   next();
+}
+
+const socketAuth = async (socket, next) => {
+  let token = socket.handshake.auth.token;
+  if(!token){
+    socket.emit("new-user-error", "unauthorized-token");
+    return;
+  }
+
+  let verifiedNickname = await userService.getNicknameByToken(token);
+  if(!verifiedNickname) {
+    socket.emit("new-user-error", "unauthorized-token");
+    return;
+  }
+
+  var userInformation = await userService.getUserByNickname(verifiedNickname);
+
+  socket.userClaims = {
+    nickname: verifiedNickname,
+    avatar: userInformation.avatar
+  };
+  next();
+}
+
+module.exports = {
+  apiAuth,
+  socketAuth
 }

middleware/authMiddleware.js

@@ -2,12 +2,12 @@ const express = require('express');
 const authRoutes = require('./authRoutes');
 const userRoutes = require('./userRoutes');
 const chatRoutes = require('./chatRoutes');
-const authMiddleware = require('../middleware/authMiddleware')
+const authMiddleware = require('../middleware/authMiddleware');
 
 const router = express.Router();
 
 router.use('/auth', authRoutes);
-router.use('/user', authMiddleware, userRoutes);
-router.use('/chat', authMiddleware, chatRoutes);
+router.use('/user', authMiddleware.apiAuth, userRoutes);
+router.use('/chat', authMiddleware.apiAuth, chatRoutes);
 
 module.exports = router;