Using csurf with react-server

Question

I would like to add csurf as an express middleware inside the react-server for a universal app.

What I want to achieve is adding the csrf token to a hidden input in a form in the react component to maintain the same csrf protection flow a server-rendered website would provide, but within a SPA.

Is this technically possible within the react-server? If so, how can I pass the csrf token that is available in the response object to the react component via the page (ideally)?

Answer 1

I actually ran into the same problem and luckily happened to come across the solution here: https://github.com/kriasoft/react-starter-kit/issues/1142

to use it just do:

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

and then for every get request set a cookie with the csrf token:

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