Using CSURF in Express app with session package without using body-parser - node.js

Question

I am trying to use CSURF package in Express App without using Body-Parser package. Body-Parser isn't needed in Express App because we can use app.use(express.json())to handle request.body instead of Body-Parser so I am trying to figure out a way to use CSURF without having Body-Parser in my app.
I have installed CSURF and following the instructions online without using Body-Parser but I got errors saying that the CSRF key is missing. My front-end is a login form and I have used EJS in order to send the CSRF Token from the server to the front-end.
Front-end:
<form id="login-form">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
**<input type="hidden" id="_csrf" name="_csrf" value= "<%= csrfToken %>" > **
<input type="text" class="form-control" id="username" placeholder="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-right login_btn">
</div>
</form>
<script>
const form = document.querySelector('#login-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = form.elements.username.value;
const password = form.elements.password.value;
const csrf = form.elements._csrf.value
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password,csrf }),
})
</script>
Back-end:
router.post('/login', (req, res, next) => {
console.log(req.body.csrf);
if (!req.body.csrf) {
// Return an error if the CSRF token is missing
return res.send({ message: 'CSRF token missing' });
}
// Check if the CSRF token in the request body matches the one in the session
if (req.body.csrf !== req.csrfToken()) {
// Return an error if the CSRF token is invalid
return res.send({ message: 'CSRF token invalid' });
} else {
// Authenticate the user using the local strategy
passport.authenticate('local', (error, user, info) => {
if (error) {
return next(error);
}
if (!user) {
return res.send({ success: false, message: 'Invalid username or password' });
}
req.login(user, (error) => {
if (error) {
return next(error);
}
req.session.loggedIn = true;
res.send({ success: true, message: 'Login success, redirecting you to homepage in 3 seconds' });
return;
});
})
(req, res, next);
}
});
router.get('/login', (req, res) => {
console.log(req.csrfToken());
res.render('login', { csrfToken: req.csrfToken() });
});
App:
app.use(express.json());
express.urlencoded({ extended: true });
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.use(
session({
store: new MSSQLStore(DBconfig, options),
secret: process.env.SESSION_KEY,
resave: false,
saveUninitialized: true,
cookie: {
maxAge: 1000 * 60 * 60 * 24, // 24 hours
secure: true
}
}));
app.use(csurf({ }));
app.use(function (req, res, next) {
res.locals.csrfToken = req.csrfToken();
next();
})
require('./routes/lib/passport.js');
app.use(passport.initialize());
app.use(passport.session());
app.use('/login', loginRouter); //define login route