You may be working locally with the Laravel project; scaffolded a front-end app with React/Vue/Angular and when making requests to routes wrapped within auth:sanctum middleware, you may get an unauthenticated error. It is because of misconfigurations. Let's fix this.
- Make sure the laravel app is serving from localhost (127.0.0.1) by doing the good old
php artisan serve.Do not use virtual hosts because you cannot serve the front-end apps from the same virtual host.
- Check the port numbers of your front-end app. Usually, React app serves at
http://localhost:3000and Vue app serve from
- It is necessary for the front-end app(s) and the laravel app to serve from the same domain - localhost in our case.
- Set sanctum stateful domains in .env file. These are the addresses of our front-end apps including the port numbers.
- Set session domain in .env file. You need to change this at production to your domain name.
- Set paths and supports_credentails in cors.php The routes of web.php you wish to have access to in your front-end app should be added to the paths array.
'paths' => ['api/*', 'login', 'register', 'otp/*', 'sanctum/csrf-cookie'], 'supports_credentials' => true,
- And finally, you should make requests from the front-end app to the localhost/api/other-route but not to 127.0.0.1/api/other-route using axios.