feat: Add JWT for Authentication and Authorization

public/src/components/ChatContainer.jsx

@@ -5,45 +5,43 @@ import Logout from "./Logout";
 import { v4 as uuidv4 } from "uuid";
 import axios from "axios";
 import { sendMessageRoute, recieveMessageRoute } from "../utils/APIRoutes";
+import userById from "../utils/backendCall";
 
 export default function ChatContainer({ currentChat, socket }) {
   const [messages, setMessages] = useState([]);
   const scrollRef = useRef();
   const [arrivalMessage, setArrivalMessage] = useState(null);
 
-  useEffect(async () => {
-    const data = await JSON.parse(
-      localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-    );
-    const response = await axios.post(recieveMessageRoute, {
-      from: data._id,
-      to: currentChat._id,
-    });
-    setMessages(response.data);
+  useEffect(() => {
+    async function fetchData() {
+      const user = await userById();
+      const response = await axios.post(recieveMessageRoute, {
+        from: user._id,
+        to: currentChat._id,
+      });
+      setMessages(response.data);
+    }
+    fetchData();
   }, [currentChat]);
 
   useEffect(() => {
     const getCurrentChat = async () => {
       if (currentChat) {
-        await JSON.parse(
-          localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-        )._id;
+        await userById()._id;
       }
     };
     getCurrentChat();
   }, [currentChat]);
 
   const handleSendMsg = async (msg) => {
-    const data = await JSON.parse(
-      localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-    );
+    const user = await userById();
     socket.current.emit("send-msg", {
       to: currentChat._id,
-      from: data._id,
+      from: user._id,
       msg,
     });
     await axios.post(sendMessageRoute, {
-      from: data._id,
+      from: user._id,
       to: currentChat._id,
       message: msg,
     });

public/src/components/Contacts.jsx

@@ -1,18 +1,22 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Logo from "../assets/logo.svg";
+import userById from "../utils/backendCall";
 
 export default function Contacts({ contacts, changeChat }) {
   const [currentUserName, setCurrentUserName] = useState(undefined);
   const [currentUserImage, setCurrentUserImage] = useState(undefined);
   const [currentSelected, setCurrentSelected] = useState(undefined);
-  useEffect(async () => {
-    const data = await JSON.parse(
-      localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-    );
-    setCurrentUserName(data.username);
-    setCurrentUserImage(data.avatarImage);
+
+  useEffect(() => {
+    async function fetchData() {
+      const user = await userById();
+      setCurrentUserName(user.username);
+      setCurrentUserImage(user.avatarImage);
+    }
+    fetchData();
   }, []);
+
   const changeCurrentChat = (index, contact) => {
     setCurrentSelected(index);
     changeChat(contact);

public/src/components/Logout.jsx

@@ -4,13 +4,18 @@ import { BiPowerOff } from "react-icons/bi";
 import styled from "styled-components";
 import axios from "axios";
 import { logoutRoute } from "../utils/APIRoutes";
+import userById from "../utils/backendCall";
 export default function Logout() {
   const navigate = useNavigate();
   const handleClick = async () => {
-    const id = await JSON.parse(
-      localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-    )._id;
-    const data = await axios.get(`${logoutRoute}/${id}`);
+    const user = await userById();
+    const data = await axios.get(`${logoutRoute}/${user._id}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem(
+          process.env.REACT_APP_LOCALHOST_KEY
+        )}`,
+      },
+    });
     if (data.status === 200) {
       localStorage.clear();
       navigate("/login");

public/src/components/SetAvatar.jsx

@@ -7,6 +7,7 @@ import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useNavigate } from "react-router-dom";
 import { setAvatarRoute } from "../utils/APIRoutes";
+import userById from "../utils/backendCall";
 export default function SetAvatar() {
   const api = `https://api.multiavatar.com/4645646`;
   const navigate = useNavigate();
@@ -21,29 +22,40 @@ export default function SetAvatar() {
     theme: "dark",
   };
 
-  useEffect(async () => {
-    if (!localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY))
+  useEffect(() => {
+    if (!localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)) {
       navigate("/login");
+    }
   }, []);
 
   const setProfilePicture = async () => {
     if (selectedAvatar === undefined) {
       toast.error("Please select an avatar", toastOptions);
     } else {
-      const user = await JSON.parse(
-        localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
+      const user = await userById();
+      const { data } = await axios.post(
+        `${setAvatarRoute}/${user._id}`,
+        {
+          image: avatars[selectedAvatar],
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem(
+              process.env.REACT_APP_LOCALHOST_KEY
+            )}`,
+          },
+        }
       );
 
-      const { data } = await axios.post(`${setAvatarRoute}/${user._id}`, {
-        image: avatars[selectedAvatar],
-      });
-
       if (data.isSet) {
         user.isAvatarImageSet = true;
         user.avatarImage = data.image;
         localStorage.setItem(
-          process.env.REACT_APP_LOCALHOST_KEY,
-          JSON.stringify(user)
+          "ImageInfo",
+          JSON.stringify({
+            isAvatarSet: user.isAvatarImageSet,
+            avatarImage: user.avatarImage,
+          })
         );
         navigate("/");
       } else {
@@ -52,17 +64,20 @@ export default function SetAvatar() {
     }
   };
 
-  useEffect(async () => {
-    const data = [];
-    for (let i = 0; i < 4; i++) {
-      const image = await axios.get(
-        `${api}/${Math.round(Math.random() * 1000)}`
-      );
-      const buffer = new Buffer(image.data);
-      data.push(buffer.toString("base64"));
+  useEffect(() => {
+    async function fetchData() {
+      const data = [];
+      for (let i = 0; i < 4; i++) {
+        const image = await axios.get(
+          `${api}/${Math.round(Math.random() * 1000)}`
+        );
+        const buffer = new Buffer(image.data);
+        data.push(buffer.toString("base64"));
+      }
+      setAvatars(data);
+      setIsLoading(false);
     }
-    setAvatars(data);
-    setIsLoading(false);
+    fetchData();
   }, []);
   return (
     <>

public/src/components/Welcome.jsx

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Robot from "../assets/robot.gif";
+import userById from "../utils/backendCall";
 export default function Welcome() {
   const [userName, setUserName] = useState("");
-  useEffect(async () => {
-    setUserName(
-      await JSON.parse(
-        localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-      ).username
-    );
+  useEffect(() => {
+    async function fetchData() {
+      const user = await userById();
+      setUserName(user.username);
+    }
+    fetchData();
   }, []);
   return (
     <Container>

public/src/pages/Chat.jsx

@@ -7,41 +7,55 @@ import { allUsersRoute, host } from "../utils/APIRoutes";
 import ChatContainer from "../components/ChatContainer";
 import Contacts from "../components/Contacts";
 import Welcome from "../components/Welcome";
+import userById from "../utils/backendCall";
 
 export default function Chat() {
   const navigate = useNavigate();
   const socket = useRef();
   const [contacts, setContacts] = useState([]);
   const [currentChat, setCurrentChat] = useState(undefined);
   const [currentUser, setCurrentUser] = useState(undefined);
-  useEffect(async () => {
-    if (!localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)) {
-      navigate("/login");
-    } else {
-      setCurrentUser(
-        await JSON.parse(
-          localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
-        )
-      );
+  useEffect(() => {
+    async function fetchData() {
+      if (!localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)) {
+        navigate("/login");
+      } else {
+        const user = await userById();
+        setCurrentUser(user);
+      }
     }
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   useEffect(() => {
     if (currentUser) {
       socket.current = io(host);
       socket.current.emit("add-user", currentUser._id);
     }
   }, [currentUser]);
 
-  useEffect(async () => {
-    if (currentUser) {
-      if (currentUser.isAvatarImageSet) {
-        const data = await axios.get(`${allUsersRoute}/${currentUser._id}`);
-        setContacts(data.data);
-      } else {
-        navigate("/setAvatar");
+  useEffect(() => {
+    async function fetchData() {
+      if (currentUser) {
+        if (currentUser.isAvatarImageSet) {
+          const data = await axios.get(`${allUsersRoute}/${currentUser._id}`, {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem(
+                process.env.REACT_APP_LOCALHOST_KEY
+              )}`,
+            },
+          });
+          setContacts(data.data);
+        } else {
+          navigate("/setAvatar");
+        }
       }
     }
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentUser]);
+
   const handleChatChange = (chat) => {
     setCurrentChat(chat);
   };

public/src/pages/Login.jsx

@@ -51,11 +51,7 @@ export default function Login() {
         toast.error(data.msg, toastOptions);
       }
       if (data.status === true) {
-        localStorage.setItem(
-          process.env.REACT_APP_LOCALHOST_KEY,
-          JSON.stringify(data.user)
-        );
-
+        localStorage.setItem(process.env.REACT_APP_LOCALHOST_KEY, data.token);
         navigate("/");
       }
     }

public/src/pages/Register.jsx

@@ -75,10 +75,7 @@ export default function Register() {
         toast.error(data.msg, toastOptions);
       }
       if (data.status === true) {
-        localStorage.setItem(
-          process.env.REACT_APP_LOCALHOST_KEY,
-          JSON.stringify(data.user)
-        );
+        localStorage.setItem(process.env.REACT_APP_LOCALHOST_KEY, data.token);
         navigate("/");
       }
     }

public/src/utils/APIRoutes.js

@@ -6,3 +6,4 @@ export const allUsersRoute = `${host}/api/auth/allusers`;
 export const sendMessageRoute = `${host}/api/messages/addmsg`;
 export const recieveMessageRoute = `${host}/api/messages/getmsg`;
 export const setAvatarRoute = `${host}/api/auth/setavatar`;
+export const userByIdURL = `${host}/api/auth/userById`;

public/src/utils/backendCall.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { userByIdURL } from "./APIRoutes";
+
+const userById = async () => {
+  try {
+    const response = await axios.get(`${userByIdURL}`, {
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem(
+          process.env.REACT_APP_LOCALHOST_KEY
+        )}`,
+      },
+    });
+    return response.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export default userById;

server/.env

@@ -1,2 +1,3 @@
 PORT=5000
-MONGO_URL="mongodb://localhost:27017/chat"
+MONGO_URL="mongodb://localhost:27017/chat"
+JWT_SECRET="your-secret-key"

server/.env.example

@@ -1,2 +1,3 @@
 PORT=5000
-MONGO_URL="mongodb://localhost:27017/chat"
+MONGO_URL="mongodb://localhost:27017/chat"
+JWT_SECRET="your-secret-key"