Authenticating a web app with a Laravel API via Sanctum requires first sending a request to your API's CSRF Cookie endpoint and extracting the CSRF Token. This token then needs to be URL-decoded and sent along in the subsequent request using the custom X-XSRF-TOKEN header.
Doing all this manually every time a request is sent is quite involved and time-consuming. Therefore I wrote this little plugin for the Yaak API client to make the process simpler using a template function.
To use this plugin, proceed as follows:
- Download the latest version of the plugin from the Releases page and add it to Yaak.
- Create a request to your Laravel API's CSRF Cookie endpoint (
/sanctum/csrf-cookie) - Create the request for which you want CSRF protection (e.g. a login request)
- Go to the
Headerstab of the protected request and add a key namedX-XSRF-TOKEN. For the value of the header, start typinglaravel_csrf_cookieand select the corresponding function. - Click on the template and select your CSRF Cookie request.
That's it!
The template function will now automatically retrieve the CSRF Cookie, extract the token, and attach it to your request.
If you're using CSRF protection in a lot of places, it might make sense to declare a global variable for the token value so that it's easily configurable. This is possible in Yaak by setting the value of a global environment variable to the result of your template function.
To do this, open up your environment and select "Manage Environments" (or hit CMD+Shift+E). Add a variable (e.g. csrfToken) and add the template function as the value, much like in steps 3. and 4. After that, use the environment variable in your request's X-XSRF-TOKEN header in place of the template function.
If you'd like to learn more about the auth flow in Laravel Sanctum and how to avoid common pitfalls, I recommend this excellent write-up on Codecourse. It's using Postman for the walkthrough, but the principles remain the same: