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',
]))),

Answer 2

I not use Sanctum but use Vuejs Laravel and Axios and I notice that you need to add to all axios protected URL the header Authorization

Bearer YOURTOKENKEY

On my ap.js I use

import jwtToken from './helpers/jwt-token'

    axios.interceptors.request.use(config => {
        config.headers['X-CSRF-TOKEN'] = window.Laravel.csrfToken
        config.headers['X-Requested-With'] = 'XMLHttpRequest'

        if (jwtToken.getToken()) {
            config.headers['Authorization'] = 'Bearer ' + jwtToken.getToken()
        }

        return config;
    }, error => {
        return Promise.reject(error);
    });

and my JWTTOKEN js file

export default {
    setToken(token) {
        window.localStorage.setItem('jwt_token', token);
    },
    getToken() {
        return window.localStorage.getItem('jwt_token');
    },
}

So all request by axios send Authorization header with Bearer + token

I hope this help you