Laravel 7.x Sanctum (SPA) with Vuejs always returns 401 Unauthorized

Question

So it's been several hours I couldn't figure out the issue even reading through and trying any possible solution available on the internet. I'm using Laravel 7.x with Vue js and struggling with Sanctum SPA authentication.

Login request works fine which is using Auth::routes() defined in web.php

but, any requests made to APIs defined in api.php under auth:sanctum middleware returns 401. For example, call to fetch the user object fails with status 401:

Here is the Request Header:

This is web.php

This is api.php

Here is the stateful object in sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1,127.0.0.1:8000')),

On vue.js side, I've set the withCredentials flag to true:

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.axios.defaults.withCredentials = true;

in cors.php, suports_credentials flag is also set to true

and, here is my Kernel.php

/**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

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

Answer 1

I had the same issue and I couldn't find any answer but after troubleshooting I got it working.

Your issue is that you're accessing it through localhost port 8000, but in your stateful param under sanctum config there is no localhost:8000 (even localhost pointing to 127.0.0.1). The config uses $_SERVER['SERVER_NAME'] so it actually looks for the exact content while accessing it.

A simple fix below:

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', implode(',', [
    'localhost',
    'localhost:8000',
]))),