laravel_token is valid for first request but not subsequent requests

Question

I have installed Laravel Passport and configured it according to the documentation. When calling axios.get from my VueJS file, the first call works as expected. the laravel_session Request Cookie is injected into the request, and the authentication passes, returning the resource.

My problem arises when I try to call the axios.get method again. My use case here is a search function. I'm making a call to /api/banking/accounts/search/{search-term} whenever the user types into a text field, using the code below:

remoteMethod(query) {
            if (query !== '') {
                this.loading = true;

                axios.get(
                    `/api/banking/accounts/search/${escape(query)}`
                ).then(res => {
                    this.destinationAccountDirectory = res.data;
                    this.loading = false;
                });
            } else {
                this.destinationAccountDirectory = [];
            }
        },

This code works fine without any auth:api middleware on the route, and for the first time with auth:api middleware. As can be seen from the screenshots below, the laravel_token value changes and is rejected on subsequent calls to the API.

**I've tried to removed the \Laravel\Passport\Http\Middleware\CreateFreshApiToken that was added to the web middleware group during passport installation, which seemed to have temporarily solved the issue, until I receive a 419 on a request shortly after. What could be causing the new laravel_tokens to be rejected? **

Answer 1

I solved this by removing the web middleware from my API route. Why it was there in the first place, I have no idea.

I changed my api.php from

Route::group([
    'middleware' => [
        'web',
        'auth:api']], function() {

    Route::post('/banking/transactions', 'TransactionController@store');

    Route::get('/banking/accounts', 'BankAccountDirectoryController@index');
    Route::get('/accounts/{account}', 'BankAccountDirectoryController@show');
    Route::get('/banking/accounts/search/{term?}', 'BankAccountDirectoryController@search');
});

to

Route::group([
    'middleware' => [
        'auth:api']], function() {

    Route::post('/banking/transactions', 'TransactionController@store');

    Route::get('/banking/accounts', 'BankAccountDirectoryController@index');
    Route::get('/accounts/{account}', 'BankAccountDirectoryController@show');
    Route::get('/banking/accounts/search/{term?}', 'BankAccountDirectoryController@search');
});

Should the API routes be under the web group to benefit from the middleware, or is it purely for UI? Am I safe to do this?