sanctum: CSRF token mismatch

So I finally got it 100% working. The SESSION_DRIVER = cookie is one of the missing links. The other was definitely getting NuxtJS and Laravel on subdomains of the same TLD.

Here is my code repo for the Laravel API with Airlock: https://github.com/serversideup/airlock-laravel-api

Here is my code repo for the NuxtJS install with the Nuxt Auth Module: https://github.com/serversideup/airlock-nuxt-frontend

If you guys have any questions, let me know and I can help trouble shoot

Additionally I had to set SESSION_DRIVER=cookie in .env file to make it work with API routes such as /api/user

@mansouralex I’ve just figured out the issue. You were right. I edited config/session.php but it didn’t help.

The problem was with Airlock Middleware: vendor/laravel/airlock/src/Http/Middleware/EnsureFrontendRequestsAreStateful.php

When I changed the 45th line to null it did the trick.

This is a temporary workaround for Airlock, I made a pull request with the reference to your comment.

I couldn’t even think that the error was due to a new update in Chrome. Thank you so much, Alex! 🙂

I don’t really know what’s wrong but I’m having this issue on chrome only… but on firefox Dev Edition… everything works fine

@JGamboa As mentioned in this thread, you’ll need to put your frontend on a domain. The way I have it setup for apps using Airlock is the backend is api.tld.test and the frontend is app.tld.test for example, then follow the instructions on here to set it up.

@taylorotwell Thank you for all of the help, I was able to get it working in one scenario with Nuxt!

Here’s what made the difference:

CORS

A lot of this had to do with CORS, but also with the cookie domain. For CORS, the only change I made to the default fruitcake/laravel-cors package was to set 'supports_credentials' => true and to add the Airlock routes to the cors file:

/*
     * You can enable CORS for 1 or multiple paths.
     * Example: ['api/*']
     */
    'paths' => [
        'airlock/csrf-cookie',
        'login',
        'api/*'
    ],

Nuxt

By default NuxtJS runs on http://localhost:3000. According to a couple issues I read about, in order for a qualified domain, you need at least one . (https://stackoverflow.com/a/1188145). You also need your session domain set in session.php as @taylorotwell mentioned here: https://github.com/laravel/airlock/issues/11#issuecomment-574181474.

We have a testing infrastructure so I threw a Nuxt install under a subdomain and set that per suggestion () to be .TLD.test. This worked! We got an X-XSRF-TOKEN header passed and proper airlock authentication!

In my case, once I changed the TLD away from localhost, and adjusted the session.php it worked right away. Hope this helps someone!

To every request after /airlock/csrf-cookie you need to add a X-XSRF-TOKEN header with the value of the XSRF-TOKEN cookie.