Submitting headless forms

[TJofficeguru]

We are using Statamic as a headless CMS, with a Vue / Nuxt frontend (no antler templates etc).
We are using the Statamic REST API to get our content, but I think we might have hit a wall, as the REST API is read-only, and we would like to be able to submit forms.

When posting to the statamic REST api at /api/forms/test_form, I get "CSRF Token mismatch".
Makes sense, but is it actually possible to get the CSRF Token?

I'm wondering if this is just a limitation that we cant work around, or if I have missed something else.

[duncanmcclean]

You can either:

1. Put it somewhere in your template using the {{ csrf_token }} variable (although, this won't work when using static caching) and include that in your AJAX request.

2. Make a GET endpoint which simply returns 'csrf_token()', then include that in your AJAX request.

[TJofficeguru]

Thanks for the reply duncan!

I don't think the first solution works for us, as we are not using templating with blade or antler files?

To your second suggestion, I think a $session needs to be set in order to generate the csrf, but the page we are trying to submit a form from is public without a login/session.

[ryanmitchell]

You could add the form end point to App\Http\Middleware\VerifyCsrfToken's $except array?

[TJofficeguru]

We ended up going with this solution, after trying a couple of different things.

We also stumbled upon the "cp/auth/token" endpoint, but as we understood that was not going to work either.

For future reference for others who may stumble upon this, we also had to add the endpoints to our config/cors.php "paths" array, as we have the CMS and the frontend on different domains.

We also enabled forms, by going to config/statamic/api.php and changing resources.forms to true.

An important point that was brought up by @jasonvarga in another comment, was that we had to post to /!/forms/test.

The documentation could use some more information, regarding how to work with forms when using headless Statamic without templates, I might make a contribution there in the future :)

Thank you very much for helping out @ryanmitchell @duncanmcclean @jasonvarga 🤝

[jasonvarga]

When posting to the statamic REST api at /api/forms/test_form

Even if you got the CSRF token, there's no such route. The API is currently read only. You'll need to post to the endpoint that the form:create tag submits to, which is /!/forms/test.

I'd add /!/forms/test to the VerifyCsrfToken middleware's $except array like Ryan suggested.

[TJofficeguru]

Thank you for the help, you were correct about Ryan's suggestion, but it was also a huge help pointing us to the /!/forms/test endpoint!

Cheers 🎉