this.$auth.loggedIn returning false

Solution 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.

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.

Solution 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
      }
  }
}