Using csurf with a reaction server

Question

I would like to add csurf as direct middleware inside react-server for a generic application.

What I want to achieve is to add the csrf token to the hidden form input in the responder component in order to maintain the same csrf protection flow that the server website provided, but within the SPA framework.

How technically is this possible in the response server? If so, how can I pass the csrf token, which is available in the response object, for the reacting component through the page (ideally)?

Answer 1

Actually, I ran into the same problem and, fortunately, ended up here: https://github.com/kriasoft/react-starter-kit/issues/1142

using it is simple:

app.use(csrf({ cookie: true, value: (req) => (req.cookies.csrfToken) })); 

and then for each request to receive, set a cookie with the csrf token:

 res.cookie('csrfToken', req.csrfToken ? req.csrfToken() : null, { sameSite: true, httpOnly: true });