Nuxt auth user reset after browser refresh

Question

i'm building an app with user login and register info. I use nuxt/auth module for handling the authentification. Whenever the user get logs in the state changes to true without a problem. The only issue i'm having is when i call set user method , the user info get registered successfully, but whenever i refresh the browser i lose the user data even though in the first place it was set successfully.

my nuxt.js config for nuxt auth module

auth: {
        strategies: {
          local: {
            token: {
              property: "token",
              global: true,
            },
            redirect: {
                "login": "/account/login",
                "logout": "/",
                "home": "/page/ajouter-produit",
                "callback": false
            },
            endpoints: {
              login: { url: "http://localhost:5000/login", method: "post" },
              logout: false, //  we don't have an endpoint for our logout in our API and we just remove the token from localstorage
              user:false
            }
          }
        }
      },

My register/login component

        async typeForm(e) {
            this.typesubmit = true;
            // stop here if form is invalid
            this.$v.$touch();
            if (this.$v.typeform.$anyError) {
                return;
            }
            const user = await axios.post(`${baseUrl}register`,{
                username:this.typeform.username,
                password:this.typeform.password,
                email:this.typeform.email,
                tel:this.typeform.tel,
                adresse:this.typeform.adresse,
                store:this.typeform.store,
            })
            .then(response => {
                console.log(response.data)
                return response.data.user;
            }).catch( (error) => {
                this.error = ''
                this.error = error.response.data
            })

            if(user){
                let loginData = {email:this.typeform.email,  password:this.typeform.password} 
                const response = await this.$auth.loginWith('local', { data: loginData})
                .then(response => {
                this.$auth.setUser(response.data.user) // the user is set without a problem, everything works fine.
                return response.data;
                }).catch( (error) => {
                    this.errors = error.response.data
                    console.log(error.response)
                })
            }
            
        }

When i console log the state and the user in the first place everything works fine

  console.log(this.$store.state.auth.user) // logs all user data i get from the api call. but when i refresh i get an empty object 
  console.log(this.$store.state.auth.loggedIn) // logs true , and even after i refresh it's still true

please help

Cambrian

Answer 1

Problem solved. what i did is to add to my login function

this.$auth.$storage.setUniversal('user', response.data.user, true)

works like a charm.

Cambrian

thanks dude gonna try this now! – Rudiment

Answer 2

I have the samie issue. After added this.$auth.$storage.setUniversal('user', response.data.user, true), the user is logged out after refreshing the page.

Here is my code :

  this.$auth
    .loginWith("local", {
      data: {
        email: this.connexionLogin,
        password: this.connexionPassword
      }
    })
    .then( (response) => {
        this.$auth.setUser(response.data.user);
        this.$auth.$storage.setUniversal('user', response.data.user, true)
  
        this.$emit("connexionOk");

and my nuxt.config :

auth: {
    watchLoggedIn: true,
    resetOnError: true,
    redirect: {
      login: "/admin/login",
      logout: "/admin/login",
      callback: "/callback",
      home: '/admin/', // Pour ne pas être redirigé vers la home suite authentification
    },
    strategies: {
      local: {
        token: {
          property: "tokens.access.token",
        },
        user: {
          property: 'user',
          autoFetch: false
        },
        endpoints: {
          login: {
            url: "v1/auth/login",
            method: "post",            
          },
          logout: false,
        },
      },
    },
  },

Sells