HijenHEK / laravel-vue-sanctum-spa

A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:
66 stars 18 forks source link

401 Unauthorized #3

Closed AdmiralXy closed 3 years ago

AdmiralXy commented 3 years ago

After successful registration and login, every route with middleware auth:sanctum returns a status code: 401 Unauthorized, what could be the problem?

AdmiralXy commented 3 years ago

Ah, alright, if I run site with the php artisan serve, then everything is ok, but with my Apache server and virtual domain there is a 401 error, how can I fix this?

HijenHEK commented 3 years ago

hello , thank you for opening this issue .

the problrem you are facing is a consequence of an unmatch in the url happening between the frontend and the backend allowed stateful domains , the vue js front end will post to yourdomain/api/login , yourdomain should be avaible in the stateful array located in the app/config/sanctum.php ( so your backend can accept the cookie sent by the front end including in the headers of each request ) . by default laravel will inlude the APP_URL env var which holds your url so you need to specify your app url but ( and this is what i missed ) it wont include the port number ! because the config here uses parse_url that why it will accept the .test cause it has no port extension ( it will take it from the env var ) but it will not accept the localhost:8000 cause the parse_url will ignore the port number .

FIX : add the url manually to your config/sanctum.php with the port number

/*
    |--------------------------------------------------------------------------
    | Stateful Domains
    |--------------------------------------------------------------------------
    |
    | Requests from the following domains / hosts will receive stateful API
    | authentication cookies. Typically, these should include your local
    | and production domains which access your API via a frontend SPA.
    |
    */

    'stateful' => explode(',', env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost,localhost:3000,localhost:8000,127.0.0.1,127.0.0.1:8000,::1,'.parse_url(env('APP_URL'), PHP_URL_HOST)
    )),
AdmiralXy commented 3 years ago

Thank you very much for the quick response and detailed explanation! After adding the URL to the sanctum settings, everything started working as expected.