Back

Difficulties with Laravel passport API and Vue


bennyboy posted 2 months ago

Hello,

When I send an API request in this group: Route::group(['prefix' => 'v1'], function() { Route::post('register', 'API\[email protected]')->name('register'); Route::post('login', 'API\[email protected]')->name('login');

});

Everything goes well but as soon as I try to send a logout request to: Route::group(['prefix' => 'v1', 'middleware' => 'auth:api'], function() { Route::post('logout', 'API\[email protected]')->name('logout'); });

I am getting a 401 non authenticated error. The weird part is that with postman it works fine but when using my local web server it won't work.

I went to class VerifyCsrfToken extends Middleware and added: protected $except = [ 'logout' ];

But same problem.

Could someone please tell me how the CSRF token works when doing API calls from a vue app on a different domain(locally for testing).

What am I doing wrong?

It is my understanding that the CSRF token cannot be used because the vue installation is not inside Laravel but created on its own. I am using Axios as:

   axios.post('https://web.testing/api/v1/logout', {
        headers: {
          'Accept': 'application/json',
          'Authorization' : 'Bearer ' + token
        }
        })
        .then(response => {

          context.commit('logout');

        })

I have been stuck for a good 2 days on that and cannot find an answer to it. It may be a CORS issue, so I downloaded a chrome CORS plugin but the 401 error is still there.

Thanks in advance

Cameron replied 2 months ago

Trying to look into this and what could be going wrong , Im assuming you have a vue app on a different domain (non laravel) and you are trying to make requests to laravel on a different domain ? If so, I don’t think you need the card token because you are essentially consuming the api from a “third party app”. Like an iPhone app sending requests to /api. Your bearer / passport is the way it will validate . Csrf is really just a meta tag in laravel that JavaScript reads per user session and gets auto included with each axioms requestfr inside laravel to laravel.

Can I just confirm with you that your logout route is actually inside the same route group /v1 as the other routes and you are not duplicating the route group code for the logout route ?

bennyboy replied 2 months ago

Thank you so much Cameron! I found the issue after 2 days of scratching my head lol. I checked everything from the Laravel doc, vue, axios, crazy time......

The problem was right there front of my eyes:

axios.post('https://web.testing/api/v1/logout', {
      headers: {
        'Accept': 'application/json',
        'Authorization' : 'Bearer ' + token
      }
      })
      .then(response => {

        context.commit('logout');

      })

If you look closer at the axios.post(), it should contain 3 parameters, and if you only send a header without data, then in the second parameter field, you should add "null", It is when I changed my IDE from Visual Code Studio to PHPSTORM that a "Data hint" field showed up, then I thought.....hey wait a minute, this is not data I am sending but a header....

It now working.

I have to say the whole experience was not fun because I was expecting at least to get a notifications error form Axios, or Laravel to help me find the issue a bit faster:-)

Thanks again for your help and I hope this post will help others.


Sign in to participate in this thread!



We'd like to thank these amazing companies for supporting us