How to refresh CSRF token in Nodejs / Express via AJAX - node.js

Question

The scenario:
I have a page in my app which users seem to be leaving open and returning to well after their session / CSFR have expired
When they try and submit data from that page and the session is rejected, I have a feature to open up a log-in modal
On submitting that, there's first a request to the server to issue a new CSRF token
On receiving that, it then uses that new token, and sends it with their user credentials to generate a new session
They can then continue with what they were doing before
The problem is that at step 4, the request fails due to an invalid CSRF token.
On the server side, the two routes look like this (using express, csurf):
const csrf = require("csurf");
const csrfProtection = csrf({ cookie: true });
const passport = require("passport");
//Issue new ajax csrf login token
app.get("/ajaxLoginToken", csrfProtection, function (req, res) {
const csrfToken = req.csrfToken();
res.json({ csrfToken });
console.log("New csrf token issued", csrfToken);
});
//AJAX login
app.post("/ajaxLogin", csrfProtection, function (req, res, next) {
passport.authenticate("local", async function (err, user, info) {
//This point is never reached due to csrf mismatch
On the browser, step 3 looks something like this:
async requestNewToken() {
let response = await fetch("/ajaxLoginToken", {
method: "GET",
});
let responseBody = await response.json();
//Update csrf token
document.querySelector('meta[name="csrf-token"]').setAttribute("content", responseBody.csrfToken);
document.cookie = `_csrf=${responseBody.csrfToken}`;
Then to send step 4, it adds the csrf token to the request before sending
async login({email, password}) {
let response = await fetch(request.url, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
},
body: JSON.stringify({email, password}),
//this always fails due to csrf token
When I try debugging, the new token is being received on the log in request, but it's rejected. Any help would be amazing - I've been bashing my head at this for days.

Answer 1

Hard to say without a minimal running example, but I guess you didn't include the CSRF cookie. By calling csurf with csurf({ cookie: true }) you decided to maintain the CSRF Token on client side in form of a cookie, by default called _csrf. You already did it. This mechanisms is called Double Submit Cookie.
Up to now, you have to send the CSRF token twice with every request: As an Header or a request param, depends on how you configured it, see csurf - value for the defaults, AND in form of the cookie. As far as I can see, you never send the cookie in your AJAX request. You send the CSRF Token as Header X-CSRF-Token but you have to include the cookie as well.
Just a guess, but could it be possible that you have to configure your fetch call by using the credentials option? By default, fetch doesn't include cookies. You have to incude them by using credentials: "include". Be aware, you can use credentials: "include" only if the Access-Control-Allow-Origin header is configured, wildcards are not possible when using include.
To sum it up, I guess you never send the cookie in your AJAX call and you have to configure it.