Implementing JWT for protecting a post route in my nodejs, express, react application has been quite a challenge. While testing with postman and adding the JWT token to the headers works flawlessly to add users to the database, I encounter a 401 response (Unauthorized) when making the request from react using axios.
Below is the axios post request from the front end:
addClient = async e => {
let newUser = {
businessname: businessname.toLowerCase(),
firstName: firstName.toLowerCase(),
lastName: lastName.toLowerCase(),
email,
username,
password,
phoneNumber,
customerStatus: customerStatus.value,
userType,
Gooduntil
};
const accessString = localStorage.getItem("JWT");
await Axios.post("/auth/signup", newUser, {
headers: { Authorization: `JWT ${accessString}` }
})
.then(res => {
console.log(res);
return this.setState({
loadingAxiosReq: false
});
})
.catch(err => {
return console.log(err);
});
}
The post route looks like this:
router.post("/signup", verifyToken, (req, res) => {
console.log(req.headers);
const {
businessname,
username,
firstName,
lastName,
phoneNumber,
email,
password,
customerStatus,
userType,
Gooduntil
} = req.body;
if (password.length < 8) {
throw "Password must be at least 8 characters";
} else {
User.findOne({
where: {
email
}
}).then(user => {
if (user) {
return res.send("Email already exists!");
} else {
const encryptedPassword = bcrypt.hashSync(password, salt);
let newUser = {
businessname,
username,
firstName,
lastName,
phoneNumber,
email,
password: encryptedPassword,
customerStatus,
userType,
Gooduntil
};
User.create(newUser)
.then(() => {
// newUser.isAdmin = true
delete newUser.password;
res.send(newUser);
})
.catch(function(err) {
console.log(err);
res.json(err);
});
}
});
}
});
And here's the middleware being used:
const jwt = require("jsonwebtoken");
module.exports = function(req, res, next) {
const token = req.header("JWT");
if (!token) return res.status(401).send("Access Denied!");
try {
const verified = jwt.verify(token, process.env.JWT_SECRET);
req.user = verified;
return next();
} catch (err) {
res.status(400).send("Invalid Token!");
}
};
If you have any suggestions on how to successfully make the axios request, it would be greatly appreciated. Thank you!