ERROR 500 Fetch & JSON Web Token Error: Jwt Must Be Provided - node.js

Question

So Im currently building a blog site using Mongodb, Express, React, and Node. Everything was working until I started implementing ChakraUI and since then, I have been running into a lot of errors when changing the code for fetching and posting my profile and posts from the data base. I've been spending DAYS trying to figure out the problem I really need someone's help on this. Thanks in advance. Im very new to this
For the Jwt token error, Im not too sure where the issue is originating from but I think from reviewing the logs its pointing to this line of code from my index.js file:
const newLocal = '/profile';
app.get(newLocal, (req,res) => {
const {token} = req.cookies;
jwt.verify(token, secret, {}, (err,info) => {
if (err) throw err;
res.json(info);
});
});
const express = require('express');
const cors = require('cors');
const mongoose = require("mongoose");
const User = require('./models/User');
const Post = require('./models/Post');
const bcrypt = require('bcrypt');
const app = express();
const jwt = require('jsonwebtoken');
const cookieParser = require('cookie-parser');
const multer = require('multer');
const uploadMiddleware = multer({ dest: 'Uploads/' });
const fs = require('fs');
const salt = bcrypt.genSaltSync(10);
const secret = 'asdfe45we45w345wegw345werjktjwertkj';
app.use(cors({credentials:true,origin:'http://localhost:3000'}));
app.use(express.json());
app.use(cookieParser());
app.use('/Uploads', express.static(__dirname + '/Uploads'));
mongoose.connect('mongodb+srv://admin:Deathsword11#testblog.jmhhq2b.mongodb.net/?retryWrites=true&w=majority');
app.post('/register', async (req,res) => {
const {username,password} = req.body;
try{
const userDoc = await User.create({
username,
password:bcrypt.hashSync(password,salt),
});
res.json(userDoc);
} catch(e) {
console.log(e);
res.status(400).json(e);
}
});
app.post('/login', async (req,res) => {
const {username,password} = req.body;
const userDoc = await User.findOne({username});
const passOk = bcrypt.compareSync(password, userDoc.password);
if (passOk) {
// logged in
jwt.sign({username,id:userDoc._id}, secret, {}, (err,token) => {
if (err) throw err;
res.cookie('token', token).json({ id:userDoc._id, username,
});
});
} else {
res.status(400).json('wrong credentials');
}
});
const newLocal = '/profile';
app.get(newLocal, (req,res) => {
const {token} = req.cookies;
jwt.verify(token, secret, {}, (err,info) => {
if (err) throw err;
res.json(info);
});
});
app.post('/logout', (req,res) => {
res.cookie('token', '').json('ok');
});
app.post('/post', uploadMiddleware.single('file'), async (req,res) => {
const {originalname,path} = req.file;
const parts = originalname.split('.');
const ext = parts[parts.length - 1];
const newPath = path+'.'+ext;
fs.renameSync(path, newPath);
const {token} = req.cookies;
const x = jwt.verify(token, secret, {}, (err,info) => {
if (err) throw err;
const {title,summary,content} = req.body;
const postDoc = Post.create({
title,
summary,
content,
cover:newPath,
author:info.id,
});
res.json(postDoc);
});
});
app.put('/post',uploadMiddleware.single('file'), async (req,res) => {
let newPath = null;
if (req.file) {
const {originalname,path} = req.file;
const parts = originalname.split('.');
const ext = parts[parts.length - 1];
newPath = path+'.'+ext;
fs.renameSync(path, newPath);
}
const {token} = req.cookies;
jwt.verify(token, secret, {}, async (err,info) => {
if (err) throw err;
const {id,title,summary,content} = req.body;
const postDoc = await Post.findById(id);
const isAuthor = JSON.stringify(postDoc.author) === JSON.stringify(info.id);
if (!isAuthor) {
return res.status(400).json('you are not the author');
}
await postDoc.update({
title,
summary,
content,
cover: newPath ? newPath : postDoc.cover,
});
res.json(postDoc);
});
});
app.get('/post', async (req,res) => {
res.json(
await Post.find()
.populate('author', ['username'])
.sort({createdAt: -1})
.limit(20)
);
});
app.get('/post/:id', async (req, res) => {
const {id} = req.params;
const postDoc = await Post.findById(id).populate('author', ['username']);
res.json(postDoc);
})
app.listen(4000);
//
The 500 Internal Server Error is pointing to line below from my Header.js file
fetch('http://localhost:4000/profile'
/Header.js
import { useContext, useEffect } from "react";
import { Link } from "react-router-dom";
import { useState} from "react";
import { UserContext } from "./UserContext";
import { Box, Button, Flex, useColorModeValue, IconButton, useDisclosure, HStack, MenuButton, MenuList, MenuItem, MenuDivider, Menu, Avatar, Stack } from "#chakra-ui/react";
import { right } from "#popperjs/core";
import { HamburgerIcon, CloseIcon, AddIcon} from "#chakra-ui/icons";
export default function Header() {
const { isOpen, onOpen, onClose } = useDisclosure();
const {userInfo, setUserInfo} = useContext(UserContext);
useEffect(() => {
fetch('http://localhost:4000/profile', {
credentials: 'include',
}).then(response => {
response.json().then(userInfo => {
setUserInfo(userInfo);
});
});
}, []);
function logout() {
fetch('http://localhost:4000/logout', {
credentials: 'include',
method: 'POST',
});
setUserInfo(null);
}
const username = userInfo?.username;
const LinkF = ['BlakFinance'];
const LinkR = ['BlakRelationships'];
const LinkT = ['BlakTech'];
const LinkL = ['Login'];
const LinkS = ['Subscribe'];
const LinkCr = ['Create'];
return (
<>
<Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
<Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
<IconButton
size={'md'}
icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
aria-label={'Open Menu'}
display={{ md: 'none' }}
onClick={isOpen ? onClose : onOpen}
/>
<HStack spacing={10} alignItems={'center'}>
<Box as={Link} to='/'>BlakConscience</Box>
<HStack
as={'nav'}
spacing={4}
display={{ base: 'none', md: 'flex' }}>
{LinkF.map((link) => (
<Link as={Link} to='/BlakFinance' key={link}>{link}</Link>
))}
{LinkT.map((link) => (
<Link as={Link} to='/BlakTech' key={link}>{link}</Link>
))}
{LinkR.map((link) => (
<Link as={Link} to='/BlakRelationships' key={link}>{link}</Link>
))}
{LinkS.map((link) => (
<Link as={Link} to='/Subscribe' key={link}>{link}</Link>
))}
{username && (
LinkCr.map((link) => (
<><Link as={Link} to='/CreatePost' key={link}>{link}</Link><a onClick={logout}> logout {username} </a></>
))
)}
{LinkL.map((link) => (
<Link as={Link} to='/login' key={link}>{link}</Link>
))}
</HStack>
</HStack>
</Flex>
{isOpen ? (
<Box pb={4} display={{ md: 'none' }}>
<Stack as={'nav'} spacing={4}>
{LinkF.map((link) => (
<Link as={Link} to='/BlakFinance' key={link}>{link}</Link>
))}
</Stack>
<Stack as={'nav'} spacing={4}>
{LinkT.map((link) => (
<Link as={Link} to='/BlakTech' key={link}>{link}</Link>
))}
</Stack>
<Stack as={'nav'} spacing={4}>
{LinkR.map((link) => (
<Link as={Link} to='/BlakRelationships' key={link}>{link}</Link>
))}
</Stack>
<Stack as={'nav'} spacing={4}>
{LinkS.map((link) => (
<Link as={Link} to='/Subscribe' key={link}>{link}</Link>
))}
</Stack>
<Stack as={'nav'} spacing={4}>
{LinkL.map((link) => (
<Link as={Link} to='/login' key={link}>{link}</Link>
))}
</Stack>
</Box>
) : null}
</Box>
<Box p={4}></Box>
</>
);
}
The code originally looked like this:
import {formatISO9075} from "date-fns";
import {Link} from "react-router-dom";
export default function Post({_id,title,summary,cover,content,createdAt,author}) {
return (
<div className="post">
<div className="image">
<Link to={`/post/${_id}`}>
<img src={'http://localhost:4000/'+cover} alt=""/>
</Link>
</div>
<div className="texts">
<Link to={`/post/${_id}`}>
<h2>{title}</h2>
</Link>
<p className="info">
<a className="author">{author.username}</a>
<time>{formatISO9075(new Date(createdAt))}</time>
</p>
<p className="summary">{summary}</p>
</div>
</div>
);
}
My goal was to change the website UI to look like ChakraUI, I started getting the errors once I changed this file: post.js
import {formatISO9075} from 'date-fns';
import {
Link,
Box,
Heading,
Image,
Text,
useColorModeValue,
Container,
Stack
} from '#chakra-ui/react';
export default function Post({\_id,title,summary,cover,content,createdAt,author}) {
return (
\<Container maxW={'7xl'} p='12'\>
\<Box
marginTop={{ base: '1', sm: '5' }}
display='flex'
flexDirection={{ base: 'column', sm: 'row' }}
justify-content='space-between'\>
\</Box\>
\<Box
display="flex"
flex="1"
marginRight="3"
position="relative"
alignItems="center"\>
\<Box
width={{ base: '100%', sm: '85%' }}
zIndex="2"
marginLeft={{ base: '0', sm: '5%' }}
marginTop="5%"\>
\<Link to={"/post/"+ \_id} textDecoration="none" \_hover={{ textDecoration: 'none' }}\>
\<Image
borderRadius="lg"
src={
'http://localhost:4000/' + cover
}
alt="some good alt text"
objectFit="contain"
/\>
\</Link\>
\</Box\>
\<Box zIndex="1" width="100%" position="absolute" height="100%"\>
\<Box
bgGradient={useColorModeValue(
'radial(orange.600 1px, transparent 1px)',
'radial(orange.300 1px, transparent 1px)'
)}
backgroundSize="20px 20px"
opacity="0.4"
height="100%"
/\>
\</Box\>
\</Box\>
<Box
display="flex"
flex="1"
flexDirection="column"
justifyContent="center"
marginTop={{ base: '3', sm: '0' }}>
<Heading marginTop="1">
<Link as={Link} to={"/post/" + _id} textDecoration="none" _hover={{ textDecoration: 'none' }}>
{title}
</Link>
</Heading>
<Text
as="p"
marginTop="2"
color={useColorModeValue('gray.700', 'gray.200')}
fontSize="lg">
{summary}
</Text>
<Stack>name={author} date={new Date(createdAt)} </Stack>
</Box>
</Container>
);
}