CSRF token mismatch when using nuxt/auth + Laravel Sanctum - laravel

Question

CSRF token mismatch. error on register page when I try to login it was working good.
my register page
<template>
<b-container>
<b-row>
<b-col cols="6" class="mx-auto">
<b-card title="Register">
<b-button variant="primary" #click="register()">Register</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
auth: 'guest',
data() {
return {
name: "john",
email: "john#email.com",
password: "123321"
};
},
methods: {
async register() {
const data = {
'name': this.name,
'email': this.email,
'password': this.password
}
console.log(data);
try {
const res = await this.$axios.post('/register', data)
console.log(res)
}
catch(e) {
console.log(e.message)
}
}
}
};
</script>
nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'hello',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
router: {
middleware: ['auth'],
},
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
'#nuxtjs/auth-next',
],
axios: {
baseURL: "http://localhost:8000/api"
},
auth: {
strategies: {
'laravelSanctum': {
provider: 'laravel/sanctum',
url: 'http://localhost:8000',
endpoints: {
login: {
url: "/api/login"
},
logout: {
url: "/api/logout"
},
user: {
url: "/api/user"
}
},
user: {
property: false
}
}
},
redirect: {
login: "/login",
logout: "/",
home: "/dashboard"
}
},
// PWA module configuration: https://go.nuxtjs.dev/pwa
pwa: {
manifest: {
lang: 'en'
}
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
babel: {
plugins: [
['#babel/plugin-proposal-private-methods', { loose: true }]
]
}
}
}
Login Page
<template>
<b-container>
<b-row>
<b-col cols="6" class="mx-auto">
<b-card title="Login">
<b-button variant="primary" #click="login()">Login</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
middleware: ["guest"],
data() {
return {
form: {
email : "john#email.com",
password : "123321"
}
};
},
methods: {
login() {
this.$auth
.loginWith("laravelSanctum", {
data: this.form
})
.then(response => console.log(response))
.catch(error => console.log(error));
}
}
};
</script>
EDIT: I do have the following error in my network tab devtools.
network tab error xhr.js?b50d:177 POST localhost:8000/api/register 419 (unknown status) "message": "CSRF token mismatch.", "exception": "Symfony\Component\HttpKernel\Exception\HttpException",