How to generate CSRF token in Reactjs and send to Play Framework?


I was trying to send a post request from react form to play framework. It is throwing the following error:

Caused by: java.lang.RuntimeException: No CSRF token was generated for this request! Is the CSRF filter installed?

While using Play templates, CSRF token is handled from the template itself. Since I'm trying to use React for front end, I cannot use Play templates. Can anyone guide me on generating CSRF token in React and passing it to Play?

Thanks in advance


It looks like you can set up an action to generate a CSRF token (see <a href="https://www.playframework.com/documentation/2.6.x/ScalaCsrf#Getting-the-current-token" rel="nofollow">docs</a>):


If you are not using the CSRF filter, you also should inject the CSRFAddToken and CSRFCheck action wrappers to force adding a token or a CSRF check on a specific action. Otherwise the token will not be available.

</blockquote> import play.api.mvc._ import play.api.mvc.Results._ import play.filters.csrf._ import play.filters.csrf.CSRF.Token class CSRFController(components: ControllerComponents, addToken: CSRFAddToken, checkToken: CSRFCheck) extends AbstractController(components) { def getToken = addToken(Action { implicit request => val Token(name, value) = CSRF.getToken.get Ok(s"$name=$value") }) }

GET this and pass it to the React form:

<input type="hidden" name="csrfToken" value="1234567890abcdef"/>

(or add it directly to the POST request.)


  • javascript XSLT nodes, selecting the first of a group (merge-like)
  • Column Nullability/Optionality: NULL vs NOT NULL
  • stringify/parse edn in clojure/ClojureScript
  • wxWidgets: Detecting click event on custom controls
  • How to limit cursor movement in WPF based app?
  • How to record a JNLP/ Java Web Start application with JMeter
  • Webpack-dev-server and isomorphic react-node application
  • Print: Entry, “:CFBundleIdentifier”, Does Not Exist have tried most solutions
  • Do I have to inject the service in the unit test if I cal testBed.get() previously?
  • Using an enum contained in a Cloud Endpoint model on a Android client
  • Skip Characters in Oracle TO_DATE function
  • How to make nicEditor snaplet? (Several questions)
  • Create a multiple screen android application
  • Graceful pod termination
  • How do I check if System::Collections:ArrayList is empty / nullptr / null?
  • Creating a C++ function that calls other Lua function
  • what is the purpose of “export as namespace foo”?
  • Efficient & Pythonic way of finding all possible sublists of a list in given range and the minim
  • What is the difference between a “service account” and an “installed application”?
  • iOS Cordova first plugin - plugin.xml to inject a feature
  • How can we prepend rows to a react native list-view?
  • Laravel 4 routing not working due to .htaccess file?
  • How to use function wrapper in mustache.php?
  • Clear fused location provider's location for testing
  • Do I need to seed any random number generator before using EVP_PKEY_keygen of OpenSSL?
  • Django invalid literal for int() with base 10
  • uniform generation of points on 3D box
  • xtable package: Skipping some rows in the output
  • Limiting recursion to certain level - Duplicate rows
  • C++ Partial template specialization - design simplification
  • If I include Java 8 in my Android app does that affect which devices it will work on?
  • PHP - How to update data to MySQL when click a radio button
  • angularjs unit test when to use $rootScope.$new()
  • Updating server-side rendering client-side
  • Statically linking a C++ library to a C# process using CLI or any other way
  • Adding custom controls to a full screen movie
  • Confusion with PayPal's monthly billing cycle
  • Unanticipated behavior
  • Angular 2 constructor injection vs direct access
  • Observable and ngFor in Angular 2