this.$auth.loggedIn returning false - vue.js

Question

I'm using laravel/passport for authentication in the backend and nuxtjs as frontend when I send a login request from nuxtjs, in case login success, I get back as a response a token and user informations and then the user will be redirected to /profile page, however in /profile page when I return this.$auth.loggedIn I'm getting false!
login.vue
<script>
export default {
data() {
return {
auth: false,
email: "",
password:""
}
},
methods: {
async login() {
try {
const data = { email: this.email, password: this.password }
await this.$auth.loginWith('local', { data:data})
.then(() => this.$router.push('/profile'))
} catch (e) {
}
}
}
}
</script>
profile.vue
<template>
<div class="mt-6">loggedInUser: {{ loggedInUser }}</div>
</template>
<script>
export default{
data() {
return {
loggedInUser:this.$auth.loggedIn
}
}
}
nuxt.config.js
auth: {
strategies: {
provider: 'laravel/passport',
local: {
user: {
property: false,
autoFetch: true
},
endpoints: {
login: { url: '/login', method: 'post', propertyName: 'token' },
user: { url: '/user', method: 'get' }
},
clientId: 'cleint_id',
clientSecret: 'client_secret'
}
}
},
modules: [
'#nuxtjs/axios',
// https://go.nuxtjs.dev/bootstrap
'bootstrap-vue/nuxt',
'#nuxtjs/auth',
],
axios: {
baseURL: "http://prostudent.test/api"
},
and how nuxt knows that a user is logged in since logging in happens in the backend?
this is directly after I click on login, I get redirected to profile and the response of login is as expected, message, token and infos, but in /profile page seems like I'm not logged in!

Answer 1

Even if you're not using Vuex with your own modules, nuxt/auth creates some state for you. Hence the the presence of this.$store.state.auth.loggedIn. Btw, did you tried appending $store on your profile.vue file? As shown in the documentation.
Like this
<template>
<div class="mt-6">
loggedInUser: {{ $store.state.auth.loggedIn }}
</div>
</template>
Also, open your vue devtools and check the vuex tab, you'll find some nice state there.
This also answers your other question
and how nuxt knows that a user is logged in since logging in happens in the backend?
Nuxt checks the response from the server and depending of it, sets the state of auth.loggedIn to either true or false.
Those are the 2 steps that you need to do to achieve a successful login (use loginWith + setUser).
const succesfulLogin = await this.$auth.loginWith('local', {
data: {
email: this.email,
password: this.password,
},
})
if (succesfulLogin) {
await this.$auth.setUser({
email: this.email,
password: this.password,
})
}
After those, loggedIn may pass to true.
Of course, the user info can be fetched from the backend too. Depends of your use case.

Answer 2

Use a computed property instead of data property :
<template>
<div class="mt-6">loggedInUser: {{ loggedInUser }}</div>
</template>
<script>
export default{
computed: {
loggedInUser(){
return this.$auth.loggedIn
}
}
}