CSRF Token Mismatch Error

Ensure all POST, PUT, DELETE, and PATCH requests include the CSRF token.

// HTML form: include token as hidden field
<form method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}">
  <input type="text" name="email">
  <button type="submit">Submit</button>
</form>

// AJAX: include as header
fetch("/api/update", {
  method: "POST",
  headers: {
    "X-CSRF-Token": csrfToken,
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})

Ensure the CSRF token is freshly loaded with each page request, not served from cache.

// Express.js: generate token per session
app.get("/form", (req, res) => {
  res.render("form", {
    csrfToken: req.csrfToken()
  })
})

// Disable form caching with headers
res.set("Cache-Control", "no-store, no-cache, must-revalidate")

Some frameworks regenerate the CSRF token on each request. Adjust your client logic accordingly.

// Extract new token from response headers
fetch("/api/data", {
  method: "POST",
  headers: { "X-CSRF-Token": currentToken }
}).then(res => {
  // Update token from response header
  const newToken = res.headers.get("X-CSRF-Token")
  if (newToken) localStorage.setItem("csrfToken", newToken)
})