auth-module: Prevent User Request on index page(before login) Not Working : Laravel sanctum (Token Based Authentication))

I’m Using Nuxt Auth Module With Laravel Sanctum

Issue are the user request is being sent automatically when the page starts, even though I’m not login or trying to login

my nuxt.config.js file is : auth: { strategies: { local: { endpoints: { login: { url: '/login', method: 'post', propertyName: 'token' }, logout: { url: '/logout', method: 'post' }, user: { url: '/user', method: 'get', propertyName: 'user' }, }, } }, redirect: { login: '/login', logout: '/login', callback: '/login', home: '/dashboard' } },

I’m also trying user property to (propertyName: false ) or (propertyName: ’ ’ ) but not working

store/auth.js `export const getters = { authenticated(state, getters, rootState){ return rootState.auth.loggedIn; },

user(state, getters, rootState){
	return rootState.auth.user;
}

How to Stop this first request for a user that automatically occurs. any solutions

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15

Most upvoted comments

For me what works best is to disable the user endpoint entirely like that:

auth: {
    strategies: {
      cookie: {
        cookie: {
          name: 'XSRF-TOKEN',
        }
      },
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: process.env.API_BASE_URL,
        endpoints: {
          login: {
            url: '/api/login',
          },
          logout: {
            url: '/api/logout',
          },
          user: false // Setting user to false will disable to automatic call entirely, so you can have more control.
        },
        tokenRequired: false, //Optional
        tokenType: false, //Optional
        autoFetchUser: false //Optional
      },
    },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/profile'
    }
  },

And to avoid the user request immediately after login (because it would be redundant) just return your user info on the login POST response and then:

this.$auth
        .loginWith('laravelSanctum', { data: this.loginForm })
        .then(res => {
          this.$auth.setUser(res.data.data)
          this.$router.push('/profile')
        })

After that you can even take advantage of that and only make a request on reload, something like that:

beforeCreate() {
if (process.client && !this.$auth.user || this.$auth.user.length) {
      this.$axios.$get('/api/user')
        .then(res => {
          this.$auth.setUser(res.data)
        })
        .catch(err => {
          this.$auth.logout()
          //   Your error handler
        })
    }
}

In other words:

Disable the user endpoint by setting it as user: false in nuxt.config.js
Return the user info in the login response on success, and use this.$auth.setUser() method to set the user manually.
Find a way to check if you don’t have the user data already and only then proceed with the request, this will ensure that when you reload the page you won’t be logged out, note that it would work out with mounted() hook instead of beforeCreate too.

nikolayandreev on Sep 14, 2020

@nikolayandreev where we can call this method

`beforeCreate() {
   if (process.client && !this.$auth.user || this.$auth.user.length) {
  this.$axios.$get('/api/user')
    .then(res => {
      this.$auth.setUser(res.data)
    })
    .catch(err => {
      this.$auth.logout()
      //   Your error handler
      })
    }
}`

KamranMaqbool on Sep 18, 2020