Getting 401 unauthorized for Laravel sanctum

10
votes

I am using Laravel Sanctum with Vuejs SPA. Both reside on same top level domain

Laravel backend : app.demo.localhost
Vue SPA : app-spa.demo.localhost

Login and logout (endpoints) are working correctly when called from VueJS SPA using axios and XSRF-TOKEN is succesfully set, but when I call other api end points it gives me 401 unauthorized.

In axios this is being set 

axios.defaults.withCredentials = true;

I have the below configurations

In Laravel .env

SESSION_DRIVER=cookie
SESSION_DOMAIN=.demo.localhost
SANCTUM_STATEFUL_DOMAINS=app-spa.demo.localhost

In Routes/Api.php

Route::middleware('auth:sanctum')->get('api/user', function (Request $request) {
   return $request->user();
});

In 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,

Could someone help me out please?

4
vue.jsaxioslaravel-7laravel-sanctum
You don't have it shown above, have you enabled the sanctum middleware in app/Http/Kernel.php? laravel.com/docs/7.x/sanctum#spa-authentication – Dylan Hobbs
Did you manage to solve this issue? – pu4cu
I have the same problem on my production server, using react and axios. O development server it works fine – Develope Cruz
anyone solve this? I am getting a success login with a custom guard. But subsequent requests fail even through xsrf token is set etc... – Eden WebStudio
Facing the same problem. Please provide answer if someone as found it. – Rukmi Patel

4 Answers

24
votes

If you are using php artisan serve add the port number to SANCTUM_STATEFUL_DOMAINS. So if your port number is 8000:

SESSION_DRIVER=cookie
SESSION_DOMAIN=.demo.localhost
SANCTUM_STATEFUL_DOMAINS=app-spa.demo.localhost:8000

Your SANCTUM_STATEFUL_DOMAINS must match the url in your browser. The port number should not be on the SESSION_DOMAIN.

3
votes

For anyone dealing with localhost:

SESSION_DRIVER=cookie    
SESSION_DOMAIN=localhost    
SANCTUM_STATEFUL_DOMAINS=localhost:8080(port number you use)
1
votes

I just encountered the same problem. I configured all the options according to the official documentation, but I couldn't get the authorization.

Then I use routes/web.php instead of routes/api.php, so I can use sanctum middleware very well.

Now the problem seems obvious，Axios withCredentials maybe need to place in the correct way.

const http = axios.create({
    baseURL: API_URL,
    withCredentials: true
})

maybe not work. So I add {withCredentials: true} like

http.get('/api/whoami', {withCredentials: true})
  .then(res => {
                console.log(res.data)
            })

Then it works.

But the very strange thing is that it is normal now, no matter whether I clear the browser cache, cookies or Laravel's various caches, there is no previous situation

0
votes

My problema was.... (no read with attention)

If your SPA needs to authenticate with private / presence broadcast channels, you should place the Broadcast::routes method call within your routes/api.php file: