2
votes

I have a VueJS app and a Laravel API in separated projects. I have some issues to auth with laravel sanctum. My VueJs is on localhost:8080 and my API on localhost:8000

When i try to set cookie, i have a "This set-cookie domain attribute was invalid with regards to the current host url" issue

I think that laravel cant set cookie, when i try to auth he returned a 419 error status which mean token mismatch.

My config/cors.php

   'paths' => [
        'api/*',
        'sanctum/csrf-cookie',
        'login',
        'logout'
    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

I follow the laravel documentation.

Add theses lines to my app/Http/Kernel.php

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

I activated axios credentials in my vue app

axios.defaults.withCredentials = true;

I set my SESSION_DOMAIN=localhost:8080.

In my VueJS login component :

       axios
          .get('/sanctum/csrf-cookie')
          .then(response => {
            axios.post('/login', {
              email : '[email protected]',
              password : 'password'
            }).then(response => {
                console.log('User signed in!');
            }).catch(error => console.log(error)); // credentials didn't match
      });

enter image description here

The request for csrf-cookie enter image description here

The request for login enter image description here

1

1 Answers

1
votes

Before logging in you have to check that cookie are setted. Your cookie is not set that's why you have 419 error. Try to take away ports from configs. Try

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

And now check cookies. For me works.