We Keep Coding

500 Internal Server Error (ENAMETOLONG) when trying to POST?

So I am having trouble with this error. I am tapping into the OPENAI API to generate AI images and then creating an entry in my DB. I am able to generate and display the images, but whenever I click my button to create an entry in my database, I get this error. I am uploading an image to Cloudinary to get back a URL so I can POST to my backend(MongoDB), but I keep getting this 500 Internal Error, and not sure what is wrong. Is the URL too long? What is the fix?
const handleSubmit = async (e) => {
e.preventDefault();
console.log(form.prompt)
console.log(form.photo)
if(form.prompt && form.photo) {
setLoading(true);
try {
const response = await fetch('http://localhost:8080/api/v1/post'
, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(form)
})
await response.json();
console.log("RESPONSE: ", response)
navigate('/')
} catch (err) {
alert(err)
} finally {
setLoading(false)
}
} else {
alert("Please enter a prompt and generate an image.")
}
}
//CREATE POST
router.route('/').post(async(req, res) => {
try {
const { name, prompt, photo } = req.body;
const photoUrl = await cloudinary.uploader.upload(photo);
console.log("photoURL: ", photoUrl)
const newPost = await Post.create({
name,
prompt,
photo: photoUrl.url,
})
res.status(201).json({ success: true, data: newPost})
} catch (error) {
res.status(500).json({ success: false, message: error})
}
})
Index.js in Server folder
import postRoutes from './routes/postRoutes.js'
import dalleRoutes from './routes/dalleRoutes.js'
dotenv.config();
const app = express();
app.use(cors())
app.use(express.json( {limit: '50mb'}))
app.use('/api/v1/post', postRoutes)
app.use('/api/v1/dalle', dalleRoutes)
app.get('/', async (req, res) => {
res.send('Hello from DALL-E!')
})
const startServer = async () => {
try {
connectDB(process.env.MONGODB_URL);
app.listen(8080, () => console.log('Server has started on port http://localhost:8080'))
} catch (error) {
console.log(error)
}
}
startServer();
function CreatePost() {
const navigate = useNavigate();
const [form, setForm ] = useState({
name: '',
prompt: '',
photo: ''
});
.....

JsonWebTokenError: jwt must be a string, node.js

I'm getting the error JsonWebTokenError: jwt must be a string when getting the jwt from the front end (react.js) and using in middleware to verify the token. If I tried to use toString it gives me another error JsonWebTokenError: jwt malformed.
Update
As soon as i pass the accessToken from frontEnd it converted into object in the AuthMiddleware.js. I'm passing middleware on header in file Post.js(attached below)
AuthMiddleware.js
const { verify } = require("jsonwebtoken")
const validateToken = (res, req, next) => {
const accesToken = req.header("accesToken");
const stringAccesToken = accesToken.toString()
console.log(typeof (stringAccesToken), "accesToken type")
if (!stringAccesToken) {
return res.json({ error: "user not logged in" })
}
try {
const validToken = verify(stringAccesToken, "importantSecret");
console.log(validToken, 'validtoken')
if (validToken) {
return next();
}
} catch (err) {
console.log(err, "error")
}
}
module.exports = { validateToken }
User.js (backend for login)
const express = require("express");
const router = express.Router()
const { Users } = require("../models")
const bcrypt = require("bcrypt")
const { sign } = require("jsonwebtoken")
router.post("/login", async (req, res) => {
const { username, password } = req.body;
const user = await Users.findOne({ where: { username: username } });
if (!user) {
return res.json({ error: "User dosen't exist" })
}
bcrypt.compare(password, user.password)
.then((match) => {
if (!match) {
return res.json({ error: "Wrong Username and Password match" })
}
const accessToken = sign({ username: user.username, id: user.id }, "importantSecret")
res.json(accessToken)
})
})
module.exports = router;
Post.js
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom';
import axios from 'axios';
import './Post.css'
function Post() {
let { id } = useParams();
const [postObject, setPostObject] = useState({})
const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState("");
// console.log(comments)
const addComment = () => {
const accessToken = sessionStorage.getItem('accessToken')
console.log(typeof (accessToken), 'acces token in comment button')
axios.post(`http://localhost:4000/comments`,
{
commentBody: newComment,
PostId: id
},
{
headers: {
accessToken: sessionStorage.getItem("accessToken"),
}
}
)
.then((res) => {
// console.log(res)
const data = res.data;
console.log(data, 'comments')
setComments([...comments, data])
setNewComment("")
})
.catch((err) => {
alert(err, 'Error:comment')
})
}
useEffect(() => {
axios.get(`http://localhost:4000/posts/byId/${id}`)
.then((res) => {
// console.log(res)
const data = res.data;
// console.log(data)
setPostObject(data)
// setPost(data)
})
// comment api request
axios.get(`http://localhost:4000/comments/${id}`)
.then((res) => {
// console.log(res)
const data = res.data;
// console.log(data)
setComments(data)
})
}, [])
return (
<div className='Post'>
<div className='left__side'>
<div className='left__side__wrapper'>
<div className='title'>{postObject.title}</div>
<div className='text'>{postObject.postText}</div>
<div className='username'>{postObject.username}</div>
</div>
</div>
<div className='right__side'>
<div className='right__side__wrapper'>
<div className='add__comment__container'>
<input type="text"
value={newComment}
placeholder="Comment"
// autoComplete="off"
onChange={(e) => setNewComment(e.target.value)}
/>
<button onClick={addComment}> Submit Comment</button>
</div>
<div className='listOfCommnets'>
{comments.map((item, index) => {
{/* console.log(item, 'item') */ }
return <div className='comments' key={index}>Comments:<br />{item.commentBody}</div>
})}
</div>
</div>
</div>
</div>
)
}
export default Post

Because the jwt token is using an object as an input rather than using the word "verify," it won't work with the object in which you are receiving the error any longer. Instead, you must attempt as follows.
var jwt = require("jsonwebtoken");
const validateToken = (res, req, next) => {
const accesToken = req.header("accesToken");
const stringAccesToken = accesToken;
if (!stringAccesToken) {
return res.json({ error: "user not logged in" });
}
jwt.verify(stringAccesToken, "importantSecret", function (err, decoded) {
if (err)
return console.log(err)
// Next Code
next();
});
};
module.exports = { validateToken };

I found the solution:
As the error said JWT need to be string,
I first tried using accesToken.toString() that gives [object object],
On second try i used JSON.stringy and that was also unsuccessful.
Final scuccesful attemp was to use library name - flatted (to convert json to string and after using it i just used split till i did'nt get the token).
faltted (link) - https://github.com/WebReflection/flatted#flatted
Worked Solution -
AuthMiddleware.js
const { parse, stringify, toJSON, fromJSON } = require('flatted');
const validateToken = (res, req, next) => {
const authToken = req.header("accessToken");
const string = stringify(authToken)
const token = string && string.split(' ')[2];
const tokenPure = token.split('"')[4]
if (!tokenPure) {
return res.json({ error: "user not logged in" })
}
try {
const validToken = verify(tokenPure, "importantSecret");
// console.log(validToken, 'validtoken')
if (validToken) {
return next();
}
} catch (err) {
console.log(err, "error")
}
}
module.exports = { validateToken }

Prevent making further calls if first api fails custom useAxios hook

I have this a Dashboard component which makes three API calls to fetch widget data.
If any API call fails it refreshes token.
But, when Dashboard renders it makes API call individually and they don't wait to check if first api call failed or token is refreshed. Each api call ends up making another call to refresh the token.
It should stop at first API call fail and refresh the token.
But it does so for each request. How can I prevent this behaviour.
It seems I need to make request sequentially.
const Dashboard = () => {
const { response: studentResponse } = useAxios(ApiConfig.STUDENT.GET_STUDENTS);
const { response: courseResponse } = useAxios(ApiConfig.COURSE.GET_COURSES);
const { response: feesResponse } = useAxios(ApiConfig.FEES.GET_TOTAL);
return (
<Box padding={2} width="100%">
<Stack direction={'row'} justifyContent="space-between" gap={2} mb={10}>
<NewWidget type={'student'} counter={studentResponse?.data?.length} />
<NewWidget type={'course'} counter={courseResponse?.data?.length} />
<NewWidget type={'earning'} counter={feesResponse?.data} />
</Stack>
</Box>
);
};
export default Dashboard;
use-axios.js
import { useState, useEffect } from 'react';
import axios from 'axios';
import history from '../utils/history';
import refreshToken from './refresh-token';
const Client = axios.create();
Client.defaults.baseURL = 'http://localhost:3000/api/v1';
const getUser = () => {
const user = localStorage.getItem('user');
return user ? JSON.parse(user) : null;
};
const updateLocalStorageAccessToken = (accessToken) => {
const user = getUser();
user.accessToken = accessToken;
localStorage.setItem('user', JSON.stringify(user));
};
Client.interceptors.request.use(
(config) => {
const user = getUser();
config.headers.Authorization = user?.accessToken;
return config;
},
(error) =>
// Do something with request error
Promise.reject(error)
);
Client.interceptors.response.use(
(response) => response,
(error) => {
// Reject promise if usual error
if (error.response.status !== 401) {
return Promise.reject(error);
}
const user = getUser();
const status = error.response ? error.response.status : null;
const originalRequest = error.config;
console.log(originalRequest);
if (status === 401 && originalRequest.url !== '/auth/refresh-token') {
refreshToken(user.refreshToken)
.then((res) => {
const { accessToken } = res.data.data;
Client.defaults.headers.common.Authorization = accessToken;
// update local storage
updateLocalStorageAccessToken(accessToken);
return Client(originalRequest);
})
.catch((err) => {
console.log(err);
if (err.response.status === 401) {
localStorage.setItem('user', null);
history.push('/login');
}
return Promise.reject(err);
});
}
history.push('/login');
return Promise.reject(error);
}
);
export const useAxios = (axiosParams, isAuto = true) => {
const [response, setResponse] = useState(undefined);
const [error, setError] = useState('');
const [loading, setLoading] = useState(true);
const fetchData = async (params) => {
try {
const result = await Client.request({
...params,
method: params.method || 'GET',
headers: {
accept: 'application/json',
},
});
setResponse(result.data);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
useEffect(() => {
if (isAuto) fetchData(axiosParams);
}, [axiosParams, isAuto]); // execute once only
return { fetch: () => fetchData(axiosParams), response, error, loading };
};

In the interceptor for the response, you check if there's an error. I would keep a state which contains the previous success of a call, implement that how you wish - after that, create an interceptor for requests which checks if that error occurred, and if so, cancel the request:
axios.interceptors.request.use((req: AxiosRequestConfig) => {
if(error){
throw new axios.Cancel('Operation canceled due to previous failure.');
}
else {
return req
}
})
Also see: Axios: how to cancel request inside request interceptor properly?

redux not catching errors

So whenever the app is loaded it should check for user Auth using the loadUser(), the problem I'm having is that if there is no token in localStorage, the server won't return any errors(when its suppose to). I looked at the code for auth(backend), and it returns a status meassage when no token received, I was wondering is it because no token isn't a type of error, that's way the server didn't send an error response?
Below are the code snippets:
auth.js(backend)
const jwt = require("jsonwebtoken");
const config = require("config");
module.exports = function (req, res, next) {
//get token from header
const token = req.header("x-auth-token");
// check if not token
if (!token) {
return res.status(401).json({ msg: "no token, auth denied" });
}
//verify token
try {
const decoded = jwt.verify(token, config.get("jwtSecret"));
req.user = decoded.user;
next();
} catch (err) {
res.status(401).json({
msg: "token isnt valid",
});
}
};
App.js
const App = () => {
useEffect(() => {
if (localStorage.token) {
setAuthToken(localStorage.token);
store.dispatch(loadUser());
}
}, []);
auth.js Redux
export const loadUser = () => async (dispatch) => {
console.log("from auth.js");
if (localStorage.token) {
setAuthToken(localStorage.token);
}
try {
const res = await axios.get("/api/auth");
console.log("inside auth.js get auth route");
dispatch({
type: USER_LOADED,
payload: res.data,
});
} catch (err) {
console.log("error from auth.js");
dispatch({
type: AUTH_ERROR,
});
}
};
Basically the code inside catch(err) { //code }
is not executed.

Silly of me, added else condition into App.js solved the issue.

cannot read property of when trying to send data from React to Express

I'm trying to send some data from a React form to my Express back end. To do this I'm using fetch where I'm trying to send some variable data from react. I'm console logging the data before running the fetch to see if it is there, console log can see the data.
My error states
[0] (node:2966) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'message' of undefined
So it seems like my Express back end can't see the variable data.
How I'm sending the data from react
handleSubmit = async e => {
e.preventDefault();
console.log("Submit was pressed!");
if (this.state.email === "") {
}
const { name } = this.state;
const query = this.state.query;
const subject = "kontakt fra nettside";
const message = { name, query };
console.log(message.name, message.text, "data is");
fetch(
"http://localhost:5000/api/email", variabler
{
method: "POST",
cache: "no-cache",
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": true,
content_type: "application/json"
},
body: JSON.stringify(message, subject)
}
); //.then(response => response.json());
};
My file for retrieving the data from the front end in Express
const emailConfig = require("./emailConfig")();
const mailgun = require("mailgun-js")(emailConfig);
exports.sendEmail = (recipient, message, attachment) =>
new Promise((resolve, reject) => {
const data = {
from: "Test <test#test.no>", // Real email removed from this post
to: recipient,
subject: message.subject,
text: message.query,
inline: attachment,
html: message.html
};
mailgun.messages().send(data, error => {
if (error) {
return reject(error);
}
return resolve();
});
});
and sendMail.js
const express = require("express");
const sendMail = express.Router();
const emailUtil = require("./emailUtil");
const { sendEmail } = emailUtil;
sendMail.post("/", async (req, res, next) => {
// const { recipient, message } = req.body;
console.log("Request mottatt");
const recipient = "test#test.no";
const message = req.body.message;
try {
await sendEmail(recipient, message);
res.json({ message: "Your query has been sent" });
console.log("Message has been sent");
await next();
} catch (e) {
await next(e);
console.log("nah", e);
}
});
module.exports = sendMail;
I can't figure out where the error is, any ideas? :)