Error: CSRF token missing 🐛

[JamieSlome]

Describe the bug

When logging in via the UI, the following error is received:

Error: CSRF token missing
 at checkCsrf (.../git-proxy/node_modules/lusca/lib/csrf.js:169:18)

To Reproduce

1. Checkout to the reconcile branch
2. Go to /login via the UI
3. Enter admin & admin for username and password credentials
4. Submit login form
5. View locally running logs on dev machine

Additional context

CSRF added in PR: #462

[JamieSlome]

@vaibssingh - heads up on the above ⤴️ 👍

[JamieSlome]

@vaibssingh - reopening this. Are we able to take a look at this issue on the reconcile branch and open a pull request pointing there instead of main?

Thanks for your time today ❤️

[JamieSlome]

Reference: nextauthjs/next-auth#88

[JamieSlome]

This blog has been the most useful in getting CSRF setup, I am getting ever closer:

https://medium.com/@sakshi_13861/in-depth-guide-to-counteracting-cross-site-request-forgery-csrf-in-expressjs-8fbe3c36691d

[JamieSlome]

@vaibssingh @maoo - I discovered the fix 💪 At the app configuration level, lusca should be set directly after the session has been configured:

app.use(session({ ... }));

app.use(
  lusca({
    csrf: {
      cookie: { name: '_csrf' },
      secret: 'qwerty', // will be configurable via proxy.config.json
    },
    hsts: { maxAge: 31536000, includeSubDomains: true, preload: true },
    nosniff: true,
    referrerPolicy: 'same-origin',
    xframe: 'SAMEORIGIN',
    xssProtection: true,
  }),
);

At each authorised invocation of the API, for example login and logout, the CSRF token stored as a cookie on the client should be retrieved and sent back to the server via the X-CSRF-TOKEN header:

const csrfToken = getCookie('_csrf'); // get CSRF token from Cookies

axios
  .post(
    loginUrl,
    {
      username: username,
      password: password,
    },
    {
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken, // enforces CSRF protection
      },
    },
  )