Structure of the project:
2 folders namely api and client, where api is used for laravel installation and client refers to the nuxt project.
Laravel (v-8.00) setups:
This is what I have in .env file for the session variables
SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=127.0.0.1
SANCTUM_STATEFUL_DOMAINS=127.0.0.1:3000
cors.php contains the following
'paths' => [
'api/*',
'login',
'logout',
'sanctum/csrf-cookie'
],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => false,
'max_age' => true,
'supports_credentials' => true,
No changes made to sanctum.php and it contains
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1,127.0.0.1:8000,::1')),
Nuxt Setups
.env file contains:
PORT=3000
HOST=127.0.0.1
BASE_URL=http://127.0.0.1:3000
API_URL=http://127.0.0.1:8000
nuxt.config.js contains:
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth-next',
'@nuxtjs/pwa',
'@nuxtjs/dotenv',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseUrl: process.env.API_URL,
credentials: true,
},
auth: {
strategies: {
cookie: {
cookie: {
name: 'XSRF-TOKEN',
}
},
'laravelSanctum': {
provider: 'laravel/sanctum',
url: process.env.API_URL
},
},
redirect: {
login: '/login',
logout: '/login',
callback: '/login',
home: '/'
}
},
Login.vue has
data() {
return {
form: {
email: '',
password: ''
},
errors: {}
}
},
methods: {
async submit () {
this.$auth.loginWith('laravelSanctum', { data: this.form })
.then(response => {
this.$router.push(`/`)
})
.catch(({response}) => {
this.errors = response.data.errors
})
}
},
Responses
This is what I am getting in response when trying to log a user in:
