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)?
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 });