Nuxt with laravel sanctum recieve "Unauthenticated" message

Question

I'm trying to use Laravel sanctum with NuxtJS. The problem is I'm able to pass the get csrf and login but when i try to access the api/user, I get "Unauthorized" message. They say i should set SESSION_DRIVER to cookie but it's still the same. I'm using xampp so I'm running the laravel on localhost:8000 and nuxtjs on localhost:3000. Thanks in advance.

Laravel API

.env

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

config/cors

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

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

api.php

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

NUXT JS

nuxt.config.js

axios: {
     baseURL: "http://localhost:8000/",
     credentials: true
},
auth: {
   redirect: {
       login: '/login',
       logout: '/',
       callback: '/login',
       home: '/'
   },
   strategies: {
          local: {
             endpoints: {
                login: { url: '/login', method: 'post', propertyName: false },
                user: { url: '/api/user', method: 'get', propertyName: false }
             },
             tokenRequired: false,
             tokenType: false
          }
   },
   localStorage: false
},

Login.vue

export default {
data(){
    return{
        email:'',
        password:''
    }
},
components: {

},
methods:{
    login(){
        this.$axios.get('/sanctum/csrf-cookie', {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            withCredentials: true,
        })
        .then( function(){
            this.$auth.loginWith('local', {
                data: {
                    email: this.email,
                    password: this.password
                },
            });
        }.bind(this))
    }
},
mounted(){  
}
}
</script>

In order for this to work properly the SPA would need to send back the value of the XSRF-TOKEN cookie under the request header X-XSRF-TOKEN, which currently does not seem to be documented here, but this is how Laravel resolves encrypted CSRF cookies. — Ajay Kadoula
Reading the token from the cookie header like the middleware above does will not protect against CSRF since that cookie is sent along with the request regardless of where it came from, defeating the purpose of CSRF protection entirely. — Ajay Kadoula
@AjayKadoula yeah i've read that before. But i think I've configured axios properly to send the request with the csrf token by setting credentials: true in nuxt.config.js .. so what am i doing wrong? — HelloWorld1014
this are not same origins means this two domain for front and back have different ports. this answer may help: stackoverflow.com/a/62417776/7908390 — TEFO

Mn Hasan Mn Hasan · Accepted Answer · 2021-09-14T21:43:15

in nuxt.config.js, check local server port like this :

  auth: {
    strategies: {
      'laravelSanctum': {
       provider: 'laravel/sanctum',
       url: 'http://localhost:8000'
       },
    },
  },

  axios: {
    baseURL: 'http://localhost:8000',
    credentials: true
  },

Nuxt with laravel sanctum recieve "Unauthenticated" message

1 Answers