Generate CSRF Token Asynchronously

Question

EE 5.4.0

I'm developing an admin dashboard using ReactJS. I have a class that I'm using as an API to handle actions sent from the frontend. Part of this frontend is a member section that has a logout button.

The logout buttons are using a csrf_token as an href in a link that looks like this:

href="https://www.domain.com/?ACT=15&csrf_token={token}"

I'm trying to get/generate that csrf_token value in my class and then return it to the frontend so I can have a working logout link in my component.

I can't use the normal EE logout tags because they won't be recognized in React components.

I've also tried using EE.CSRF_TOKEN, as suggested here, but I'm getting a notice that says Use of undefined constant EE - assumed 'EE'. It does return a value that resembles a csrf token, but when I test that using the ACT structure in the url, I get an error.

Is there a built in way to do this that I'm just missing?

Answer 1

You can write a currently valid CRSF token to any location you like in your template output using the Single Global Variable {csrf_token} - so one solution to your issue is to write this value into a data-* parameter linked to a hidden or otherwise unused div and read the value from there into your React app.

HTH