Passing JWT header to authorization middleware in Express - node.js

Question

I have a small node application that uses express. In order for a user to submit form data, they must log in. When they log in, they get a json web token that should get passed to the auth middleware to verify that they can submit the form.
I am running into trouble sending the JWT to the auth middleware.
The Authorization when the user logs in and then gets sent to the page to submit the form looks like this:
router.post('/auth', async (req, res, next) => {
const { error } = validate(req.body);
if (error) return res.status(400).send(error.details[0].message);
let user = await User.findOne({ email: req.body.email });
if (!user) return res.status(400).send('Invalid email or password.');
const validPassword = await bcrypt.compare(req.body.password, user.password);
if (!validPassword) return res.status(400).send('Invalid email or password.');
const token = user.generateAuthToken();
res.set({'x-auth-token': token }).render('../views/index/form', { 'x-auth-token': token })
;});
The route for the form submission looks like this:
router.post('/rates', auth, async (req, res) => {
const { error } = validate(req.body);
if (error) return res.status(400).send(error.details[0].message);
let rates = new Rates({
// deleted to save space
});
rates = await rates.save();
res.send(rates);
});
As you can see in order to post, it has to go through the auth middleware first which looks like this:
const config = require('config');
const jwt = require('jsonwebtoken');
function auth(req, res, next) {
const token = req.header('x-auth-token');
if (!token) return res.status(401).send('Access denied. No token provided.')
try {
const decoded = jwt.verify(token, config.get('jwtPrivateKey'));
req.user = decoded;
next();
}
catch (ex) {
res.status(400).send('Invalid token.');
}
}
module.exports = auth;
I get the "Access denied. No token provided." every single time. When I do a post request to rates in Postman and set the headers there, it works fine.
I am sending this form data through a page rendered with express handlebars.
I'm not sure if I am using res.set the wrong way, or if something gets lost when the handlebars form view gets rendered?
I can see the x-auth-token when I log in on the front end, get directed to the form page, and view the headers in chrome inspector. But once I try to submit the form data for the rates in the front end, the auth token is lost and it fails at the auth middleware.
There has to be something I'm just not seeing.
Here is my code on the page that is sending the form data:
<script>
var formElement = document.querySelector("form");
var header = XMLHttpRequest.getResponseHeader("x-auth-token");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/rates', true);
xhr.setRequestHeader("x-auth-token", header);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if(this.readyState == XMLHttpRequest.DONE && this.status = 200) {
console.log("success");
} else {
console.log("error sending")
}
}
xhr.send(new FormData(formElement));
</script>