Laravel Spark 6.0 Ajax request unauthenticated

Question

I am building an app from a vanilla Spark 6.0 installation. I can login, access the Kiosk and click around.

I have created a new Card section with a form and am using the SparkForm object as directed by the documentation; however every single request returns unauthenticated and thus I have to re-login.

I cannot get the ajax request to authenticate. I have created a seperate adminApi to handle admin ajax request which is protected by auth/dev/web middleware.

Any ideas/pointer much appreitated.

Relevent Code:

RouteServiceProvider:

public function map(Router $router)
{
    $this->mapWebRoutes($router);

    $this->mapApiRoutes($router);

    $this->mapAdminApiRoutes($router);

    //
}
...
protected function mapAdminApiRoutes(Router $router)
{
    $router->group([
        'namespace' => $this->namespace,
        'middleware' => ['dev', 'auth', 'web'],
        'prefix' => 'admin/api',
    ], function ($router) {
        require base_path('routes/adminApi.php');
    });
}

routes/adminApi.php

Route::resource('/insurers', 'Admin\InsurersController');

vue component - insurers.js

var base = require('kiosk/users');

Vue.component('spark-kiosk-insurers', {
    mixins: [base],
    data: function() {
        return {
            showingInsurerProfile: false,
            form: new SparkForm({
                name: '',
                email:'',
                logo:''
            })
        }
    },
    props: {
        insurer: {}
    },
    methods: {
        search: function() {

        },
        create: function() {
            Spark.post('/admin/api/insurers', this.form)
            .then(response => {
                console.log(response);
            });
        },

    }
});

Answer 1

Add the CSRF Token to the form like

<meta name="csrf-token" content="{{ csrf_token() }}">

Then add the following to your request:

headers: {
 'X-CSRF-TOKEN': 'Token Here' // from meta

}