Express jwt is undefiend - node.js

Question

So, i am making this request from my frontend to get all conversations of a user.
When the request made to the node server, it checks for "express-jwt" and says access denied.
When i console.log the jwt, it shows that the jwt is undefiend
(i think the bearer is ok, since it shows in the req.headers.authorization)
My react code:
import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import apiCalls from "../../backend/apiCalls";
import Conversion from "../../Components/Shared/Conversion";
import Message from "../../Components/Shared/Message";
import ToastSuccess from "../../Components/Shared/ToastSuccess";
import Toast from "../../Components/Shared/ToastSuccess";
import { io } from "socket.io-client";
function ChiefNotification({ id }) {
const [list, setList] = useState([]);
const socket = useRef();
useEffect(() => {
socket.current = io("ws://localhost:8900");
socket.current.on("getMessage", (data) => {
setRecievedMessages({
sender: data.senderId,
text: data.text,
createdAt: Date.now(),
});
});
}, []);
const [showConversations, setShowConversations] = useState([]);
const [conversations, setConversations] = useState([]);
const [currentChat, setCurrentChat] = useState(null);
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState("");
const [recievedMessages, setRecievedMessages] = useState("");
const scrollRef = useRef();
useEffect(() => {
recievedMessages &&
currentChat?.members.includes(recievedMessages.sender) &&
setMessages((prev) => [...prev, recievedMessages]);
}, [recievedMessages, currentChat]);
const getConversation = async () => {
await apiCalls
.getConversation(id)
.then((data) => {
setConversations(data?.data);
setShowConversations(data?.data);
})
.catch((err) => {
Toast.ToastFailure(err.response.data);
});
};
const handleSubmit = async (e) => {
e.preventDefault();
const message = {
sender: id,
text: newMessage,
conversationId: currentChat._id,
};
const recieverId = currentChat.members[1];
socket.current.emit("sendMessaage", {
senderId: id,
recieverId: recieverId,
text: newMessage,
});
await apiCalls
.sendMessage(message)
.then((data) => {
setMessages([...messages, data?.data]);
setNewMessage("");
})
.catch((err) => {
Toast.ToastFailure(err.response.data);
});
};
//handling sockets
const getSocketInfo = () => {
socket.current.emit("addUser", id);
socket.current.on("getUsers", (users) => {
console.log(users);
});
};
const getAllUsers = async () => {
await apiCalls
.getAllConvo()
.then((res) => {
setList(res?.data);
})
.catch((err) => {
ToastSuccess.ToastFailure(err?.response.data);
});
};
const NewConversation = (keyword) => {
if (keyword.length > 2) {
setShowConversations(
list.filter(
(listItem) =>
listItem.firstName.toLowerCase().includes(keyword.toLowerCase()) ||
listItem.lastName.toLowerCase().includes(keyword.toLowerCase())
)
);
} else {
setShowConversations(conversations);
}
};
useEffect(() => {
Promise.all([getConversation(), getSocketInfo(), getAllUsers()]);
}, []);
useEffect(() => {
const getMessages = async () => {
await apiCalls
.getMessages(currentChat?._id)
.then((data) => {
setMessages(data?.data);
})
.catch((err) => {
ToastSuccess.ToastFailure(err.response.data);
});
};
if (currentChat) getMessages();
}, [currentChat]);
useEffect(() => {
scrollRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages]);
return (
<>
<Breadcrum>Dashboard / Notifications</Breadcrum>
<Messenger>
<CheckMenu>
<CheckMenuWrapper>
<ChatMenuInp
placeholder="Search for Friends"
onChange={(e) => NewConversation(e.target.value)}
/>
{showConversations.map((c, index) => (
<div onClick={() => setCurrentChat(c)} key={index}>
<Conversion conversation={c} />
</div>
))}
</CheckMenuWrapper>
</CheckMenu>
<ChatBox>
<CheckBoxWrapper>
{currentChat ? (
<>
<CheckBoxTop>
{messages.map((m, index) => {
return (
<div ref={scrollRef} key={index}>
<Message message={m} own={m.sender === id} />
</div>
);
})}
</CheckBoxTop>
<CheckBoxBottom>
<ChatMessageArea
placeholder="write something...."
onChange={(e) => setNewMessage(e.target.value)}
value={newMessage}
/>
<ChatSendButton onClick={handleSubmit}>Send</ChatSendButton>
</CheckBoxBottom>
</>
) : (
<NoConversation>Open a Conversation to Start Chat</NoConversation>
)}
</CheckBoxWrapper>
</ChatBox>
</Messenger>
</>
);
}
export default ChiefNotification;
const Messenger = styled.div`
display: flex;
margin: 0% 5% 1% 5%;
border: 1px solid #e0e0e0;
border-radius: 5px;
max-height: 80vh;
min-height: 70vh;
`;
const CheckMenu = styled.div`
flex: 3;
`;
const CheckMenuWrapper = styled.div`
padding: 10px;
border-right: 1px solid #e0e0e0;
height: 100%;
`;
const ChatMenuInp = styled.input`
width: 90%;
padding: 10px;
border: none;
border-bottom: 1px solid #e0e0e0;
`;
const ChatMessageArea = styled.textarea`
width: 80%;
height: 90px;
padding: 10px;
`;
const CheckBoxBottom = styled.div`
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f5f5f5;
padding: 2%;
`;
const ChatBox = styled.div`
flex: 7;
padding: 5px 15px;
`;
const CheckBoxWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
height: 100%;
position: relative;
`;
const CheckBoxTop = styled.div`
height: 100%;
overflow-y: scroll;
padding-right: 10px;
`;
const ChatSendButton = styled.button`
width: 100px;
height: 40px;
border: none;
color: white;
border-radius: 1px;
background-color: #5f9ab4;
cursor: pointer;
`;
const Breadcrum = styled.h6`
color: #003951;
padding: 1% 5%;
display: flex;
`;
const NoConversation = styled.div`
position: absolute;
top: 10%;
font-size: 50px;
color: lightgray;
cursor: default;
width: 100%;
text-align: center;
`;
The Axios Setup Code:
import axios from "axios";
import { getCookie } from "../Auth/auth";
const authToken = getCookie("token");
axios.defaults.baseURL = "http://localhost:5000";
axios.defaults.headers.common["Authorization"] = `Bearer ${authToken}`;
axios.interceptors.response.use(null, (error) => {
const expectedError =
error.response &&
error.response.status >= 400 &&
error.response.status < 500;
if (!expectedError) {
console.log("Logging error", error);
alert("An unexpected Error occurred");
}
return Promise.reject(error);
});
// eslint-disable-next-line import/no-anonymous-default-export
export default {
get: axios.get,
post: axios.post,
put: axios.put,
delete: axios.delete,
};
The code for the API call and the jwt file
//get list of people that you can have conversation with
router.get("/allConversations", [chief], async (req, res) => {
const getUsers = await User.find({ accountStatus: true }).select(
"id firstName lastName"
);
if (getUsers) {
return res.status(200).json(getUsers);
} else return res.status(400).json("Error Occured while getting users");
});
The code for JWT
const expressJwt = require("express-jwt");
function authJwt() {
const secret = process.env.SECRET;
return expressJwt({
secret,
algorithms: ["HS256"],
isRevoked: isRevoked,
}).unless({
path: [
{ url: /\/issues(.*)/, methods: ["GET", "OPTIONS"] },
{ url: /\journal\/download(.*)/, methods: ["GET", "OPTIONS"] },
{ url: /\user\/activate(.*)/, methods: ["GET", "POST", "OPTIONS"] },
{
url: /\user\/auth\/password\/reset(.*)/,
methods: ["GET", "POST", "OPTIONS"],
},
{ url: /\/public\/uploads(.*)/, methods: ["GET", "OPTIONS"] },
{ url: /\/journal\/search(.*)/, methods: ["GET", "OPTIONS"] },
{ url: /\/journal\/currentIssues(.*)/, methods: ["GET", "OPTIONS"] },
{ url: /\journal/, methods: ["POST", "OPTIONS"] },
{ url: /\user\/chief(.*)/, methods: ["GET", "DELETE", "OPTIONS"] },
{ url: /\messages(.*)/, methods: ["GET", "OPTIONS"] },
"/user/login",
"/user/signup",
"/journal/latest",
"/user/forget",
"/user/reset",
"/user/chief/all",
],
});
}
async function isRevoked(req, payload, done) {
if (!payload.userType) {
done(null, true);
}
done();
}
module.exports = authJwt;