How to get user info after a successful authentication with nuxt-auth

Question

I'm using nuxt.js, after I send a login request with email and password to the backend I get a response which contains a message, token and user informations, how can I access user informations in the response and save it inside some state in store.js after a successful login? I wanted to save user object in user state down in store/index.js using an action saveUserAction which might be dispatched after a successful login, i dont know if thats right or not, any advise would be very helpful

Response

{
  "message":"success",
  "token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiNzFkYjA1MWM2MTYxMmE4YzAyNWI2YjU3N2xMzJiNzJjMjI0MzRlY2IzNzYwNTg2N2NjOWQ5ZWEwY2MiMJM3uYEiZ8GSlPlQhIctVErO2KzwXOBxifWWoM7et_qT-mgvfsk3ljwiQF9iPQw-WeekBx8J8lcmxDLESa3tfE1Re1Xk2flkcBLmiI4JN2YHh08U1U",
  "user":{
    "id":1,
    "role_id":4587,
    "firstname":"Hans",
    "lastname":"newman",
    "email":"newman@gmail.com",
    "email_verified_at":null,
    "phone":"89498",
    "skype":"gdgdfg",
    "birthdate":"2021-05-02",
    "address":"asdfaf",
    "postalcode":14984,
    "city":"jisf",
    "country":"isfisf",
    "status":"mfof",
    "created_at":"2021-06-16T09:33:08.000000Z",
    "updated_at":"2021-06-16T09:39:41.000000Z",
    "image":"1623835988-carlsen.png",
    "description":"sfdgg",
    "geo_lat":5.5,
    "geo_lng":8.1
  }
}

login.vue

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      auth: false,
      email: '',
      password: '',
    }
  },

  methods: {
    async 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,
        })
        this.$router.push('/profile')
      }
    },
  },
}
</script>

store/index.js

export const state = () => ({
  user:{}
})
  
export const mutations = {
  saveUser(state, payload) {
    state.user=payload;
  }
}

export const actions = {
   saveUserAction({commit}, UserObject){
      commit('saveUser');
   }
}

Answer 1

Go to your vue devtools, vuex tab and look for auth , it should already be available. This answer may help you during your debugging: https://stackoverflow.com/a/68081536/8816585

Since you do have your user object in the response, this kind of configuration should do it, as shown in the documentation . No need to make some other vuex actions.

auth: {
  strategies: {
    local: {
      token: {
        property: 'token',
        global: true,
      },
      user: {
        property: 'user', // the name of your object in your backend response payload
      },
      endpoints: {
        [...]
      }
    }
  }
}