Auth-module: LoggedIn state doesnt update upon successful login

[MastinGood]

I successfully login to my nuxt app using laravel sanctum but the loggedIn state doesnt update to true even if I already set the user using this code.

 const user = await this.$axios.$get('/api/user');       
 this.$auth.setUser(user)  

Here's my nuxt config:

[msonowal]

@MastinGood
You should use along with await this.$auth.setUserToken('200') for sanctum
Duplicate
https://github.com/nuxt-community/auth-module/issues/930#issuecomment-744285414

[MastinGood]

Throws error on submit.

<script>
  export default {
    auth: 'auth',
    data() {
      return {
       form: {
            email: '',
            password: ''
            },
        errors: {}
      };
    },
    methods: {
      async login(){
        try{
          await this.$axios.$get('/sanctum/csrf-cookie');
          await this.$auth.loginWith('local', { data: this.form })
          const user = await this.$axios.$get('/api/user');
          await this.$auth.setUser(user);
          await this.$auth.setUserToken(200);
          this.$router.push('/');
        }
        catch({response}){
          console.log(response.data.errors);
          this.errors = response.data.errors;
        }
      }
    },
  };
</script>

[msonowal]

@MastinGood try with this await this.$auth.setUserToken('200')

But may I ask why you are using it manually i.e. csrf token etc just try to use as per the guide it will be automatically done

[JoaoPedroAS51]

Hi @MastinGood! I recommend using laravel sanctum provider, it will do all the job for you :wink:

Then, your login method will look like this:

<script>
  export default {
    auth: 'auth',
    data() {
      return {
       form: {
            email: '',
            password: ''
            },
        errors: {}
      };
    },
    methods: {
      async login(){
        try{
          await this.$auth.loginWith('laravelSanctum', { data: this.form });
          this.$router.push('/');
        }
        catch({response}){
          console.log(response.data.errors);
          this.errors = response.data.errors;
        }
      }
    },
  };
</script>

You can also set home redirect option in auth config, so you don't need to use this.$router.push('/')

[MastinGood]

Thanks a ton! It works now 💯

[MastinGood]

@JoaoPedroAS51 Can we use laravelSanctum to register like I did in login? or we manually hit this endpoint /register to register?

[JoaoPedroAS51]

@MastinGood I think you should hit the /register endpoint using axios, then, you call loginWith.

Something like this:

register() {
  this.$axios.post('/register' , { data: this.form })
    .then(() => this.$auth.loginWith('laravelSanctum', { data: this.form }))
}