CODEWITHSUNDEEP
laravelvuejs3single-page-application
Hash
Hash

Reputation: 21

Laravel Sanctum 401 Unauthorized Response

I have a laravel application on a docker container at http://laravel.test. I have a VueJS SPA that is being served on http://localhost:8080. The SPA first makes a get request to http://laravel.test/sanctum/csrf-cookie and then makes a POST request to http://laravel.test/api/login . The User gets authenticated.

However after that any request that I make to routes under the auth:sanctum middleware for e.g

Route::middleware('auth:sanctum')→get('/products',[ProductController::class,'index']);

I get the Message

xhr.js?1a5c:220          GET http://laravel.test/api/products 401 (Unauthorized)

If I remove this route from auth:sanctum middleware the route works fine.

The .env files consists of the following configuration

APP_URL=http://laravel.test
SESSION_DRIVER=cookie
SESSION_DOMAIN=laravel.test
SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

The cors.php contents are

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

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost:8080'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

And here is the Kernel.php

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

I am using VueJs as an SPA and axios to make API Calls. Axios configuration include

axios.defaults.withCredentials = true;

I am using nginx on laradock, Laravel 9 and VueJs 3 if that info is of any use. However I have tried it on apache with the same result. I have tried php artisan serve and its still not working. (I changed the parameters of .env to reflect the platform change obviously)

I have searched again for about a week on the Internet and StackOverflow. However I have not been able to resolve this problem.

Can anyone help me out with this. What am I doing wrong. I have followed the official laravel documentation. I am trying to use Sanctum SPA Authentication and not token authentication.

Upvotes: 1

Views: 4272

Answers (1)

Tan Nguyen
Tan Nguyen

Reputation: 1844

tl;dr In order to make Sanctum work, the server and client have to be on the same top-level domain, different ports are ok. For local development with Sanctum, localhost is the easiest solution as Laravel Breeze package recommended.

Let's assume you're running frontend on port 8080 and backend on port 8000.

  1. In .env
APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:8080
  1. In config/sanctum.php
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s%s',
        'localhost,localhost:8080,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : '',
        env('FRONTEND_URL') ? ','.parse_url(env('FRONTEND_URL'), PHP_URL_HOST) : ''
    ))),

notice port 8080 and 8000 in the above example.

  1. Make sure configs are cached properly:
php artisan config:cache

Your frontend seemed right so just check two configs above and reverse others to default.

Upvotes: 2

Related Questions