NuxtAuth is trying to fetch the user before app is authenticated

[mtzrmzia]

I'm using Laravel Sanctum to authenticate my SPA, but it seems that when the app first loads the AuthModule is trying to fetch the user before the user logs in because I have a console error GET http://api.test/api/user 401 (Unauthorized) obviously the route is protected with middleware in Laravel so the AuthModule cannot capture the user until I log in

So when I log in the SPA the AuthModule fetch the user correctly wich is the expected behavior, but when i log out the error appears again..

nuxt.config.js

export default {
    modules: [
      '@nuxtjs/axios',
      '@nuxtjs/auth'
    ],
    axios: {
      baseURL: process.env.BASE_URL,
      credentials: true
    },
    auth: {
      strategies: {
        local: {
          endpoints: {
            login: { url: '/api/auth/login', method: 'post' },
            user: { url: 'api/user', method: 'get', propertyName: 'user' }
          },
          tokenRequired: false,
          tokenType: false
        }
      },
      redirect: {
        home: '/',
        logout: '/login'
      }
    }
  }

login.vue

<template>
  <div>
    <form @submit.prevent="userLogin">
      <div>
        <label>Email</label>
        <input type="text" v-model="login.email" />
      </div>
      <div>
        <label>Password</label>
        <input type="text" v-model="login.password" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  auth: 'guest',
  data() {
    return {
      login: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async userLogin() {
      try {
        await this.$axios.$get('sanctum/csrf-cookie')
        let response = await this.$auth.loginWith('local', { data: this.login })
        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

index.vue

<template>
  <div class="container">
      <h1 class="title">
      {{this.$auth.user}}
      </h1>
  </div>
</template>

<script>

export default {
  middleware: 'auth',
      methods: {
      logout() {
        this.$auth.logout()
      }
    }
}
</script>

[JoaoPedroAS51]

Hi @IsidroMar95! Laravel Sanctum support will be added in v5. In the meantime you can use the dev version @nuxtjs/auth-next You can check the updated docs here: https://dev.auth.nuxtjs.org/guide/setup.html And Laravel Sanctum provider docs here: https://dev.auth.nuxtjs.org/providers/laravel-sanctum.html

[mtzrmzia]

I thought if it was supported, I was thinking of using Sanctum in a project in production, but I'll wait for the next version to be stable, thanks for responding.

[emaia]

@IsidroMar95 I have same problem with the Sanctum v^2.4.0. With v2.3.3 works.

Update: check this https://github.com/laravel/sanctum/issues/161

[Zhythero]

I managed to create a workaround for this. I sent my login credentials manually via axios and then have my back-end return the authenticated user, then put that user as the logged in user via this.$auth.setUser(user).