CODEWITHSUNDEEP
vue.jsaxioslaravel-7laravel-sanctum
MOHAMMED ABDUL HASEEB
MOHAMMED ABDUL HASEEB

Reputation: 361

Getting 401 unauthorized for Laravel sanctum

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?

Upvotes: 29

Views: 42923

Answers (11)

Kunal Rajput
Kunal Rajput

Reputation: 784

Following are the 8 steps that I follow while setting up Laravel sanctum check if you missed anything

Step1 composer require laravel/sanctum

Step2 php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider

Step3 php artisan migrate (you can ignore this if you're using spa)

Step4 uncomment this line from app/http/kernel.php \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,

Step5 In config/cors.php update 'supports_credentials' => true,

Step6 In .env file update SESSION_DRIVER=cookie & add new line of SESSION_DOMAIN=localhost (even if you are using any port like 8080 just mention localhost in session_domain)

Step7 In config/sanctum.php add your client domain along with port(if local) in stateful as follows, in my case for vue CLI it's usually localhost:8080 & for nuxt its localhost:3000 , code is as follows

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:8000,localhost:8080,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

Mostly if your stateful (step7) is not setup properly you will get 401 unauthorized or it will try to redirect you to the home page along with cors policy error

Step8 Do not forget to await until sanctum/csrf-cookie promise is resolved

    async login() {
      await axios.get("http://localhost:8000/sanctum/csrf-cookie");

      await axios.post("http://localhost:8000/login", {
        email: "[email protected]",
        password: "password",
      });

      let response = await axios.get("http://localhost:8000/api/user");
      console.log(response.data);
    },

Upvotes: 21

BossNL
BossNL

Reputation: 89

If anyone is using Valet as the webserver, you might want to double check the APP_URL - it needs to match with your Valet linked domain (for example domain.test or domain.dev).

In my case, logging in into the app via Inertia was no problem, but following requests to my /api routes got 401. Applying the above fixed this.

Upvotes: 0

Etta
Etta

Reputation: 423

You SPA which is intended to be a first party app is not a first party app if it's on different port. So it's just acting like a mobile app in your development environment.

For example

Laravel api

localhost:8000

Vuejs app

locahost:5781

So you need to authenticate it be sending an authorization header when developing in your localhost host. Note: Do this only in your local development enviroment. So put the code below in an if.

axios.interceptors.request.use(
  config => {
    // Do something before request is sent
    
    if(process.env.dev) {
       // accessToken was set after a successful login
       const accessToken = localStorage.getItem('accessToken')
    
       if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`
    }
    

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

Upvotes: 1

O Connor
O Connor

Reputation: 4392

Laravel 10 with VueJs 3 and Sanctum package. I have solved this problem by setting APP_URL=[my domain name] in the .env file which the value matches the domain name in the web browser.

Give this a try. Hope it helps.

Upvotes: 0

MR_AMDEV
MR_AMDEV

Reputation: 1922

For me i just had to place the host with port number:

SANCTUM_STATEFUL_DOMAINS=127.0.0.1:5173

and it started working. Maybe this helps someone.

Upvotes: 4

Alberto Sanchez Gonzalez
Alberto Sanchez Gonzalez

Reputation: 196

My issue was I setup the domain in the wrong place. I thought was an array of domains, in config/sanctum.php, but not, needs to be placed within the string:

OK:

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,myownlocaldomain.test,myownlocaldomain.test:8080', <-------- OK
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

BAD:

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : '',
        'myownlocaldomain.test', <----- BAD
        'myownlocaldomain.test:8080', <---- BAD
    ))),

I hope I save days of work to someone else...

Upvotes: 1

sportakal
sportakal

Reputation: 125

Hi i found a solution.

My SPA is Vue v3 working on 3000 port. Also my backend is working on 80 port. (laravel 8.1)

Make Stateful Domains in config/sanctum.php like that

 'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost:3000',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

Adding only one and correct domain on their, worked for me magically. I wrote before there whole possible variant of ports, it made me crazy and cost a couple days and nights.

Upvotes: 0

&#205;caro Souza
&#205;caro Souza

Reputation: 11

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:

Upvotes: 0

mario
mario

Reputation: 91

For anyone dealing with localhost:

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

Upvotes: 9

Scot
Scot

Reputation: 421

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.

Upvotes: 39

Null_
Null_

Reputation: 40

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

Upvotes: 1

Related Questions