I'm extremely confused on the topic of generating a session long CSRF token on a single page application using React.
It looks like the convention is to have the server generate the CSRF token on log in, and embed the token on the login form.
However in single page applications, it's not so simple.
What is the best method for applications using React and Angular, to retrieve the CSRF token from the backend? Is retrieving the token from just calling an API endpoint safe?
To answer you question, you must first understand what CSRF is, what kind of vulnerability it counters. Wikipedia has a good enough explanation on it.
In a nutshell, CSRF is a server-side problem, which shouldn't concern you as the react/angular dev. By definition your application is a legit application, and any api call should you're making on the backend server should pass the CSRF check.
How the backend server will consider the api call as safe is another question, and the answer depends on multiple factors such as how the user is authenticated, which framework is used to develop the server, etc.
A main point is that CSRF is tightly related to cookie, as the whole logic is to push an innocent victim to unknowingly submit a maliciously crafted web request. This is possible because the server will consider that the request is valid because the cookie sent with the request is valid and no CSRF check is done.
For example, if your application uses an authentication schema based on bearer or JWT token sent in the authentication header (and stored in local storage) the CSRF attack simply isn't possible because those tokens aren't sent with every request to the server as cookies are. CSRF simply doesn't work in that case.
If you use a cookie based auth with your SPA you are vulnerable to CSRF. In that case they are multiple solutions. ALL are implemented server side.
For example, one method is based on the fact that your SPA will always do a call using a HEAD method before doing a post, so if the server can return a cookie with a valid CSRF token for the session, you should pass CSRF protection.
Another method is to retrieve the token from a previous api call and manually add it as a hidden field in any put/delete/post/patch method.
In the end, ask your backend dev what he wants you to do.
