Auth-module: after login successfully, auth donot retrieve user data and auth.loggedIn returns false

[shahriar350]

I am using nuxt auth V5.
After login successfully, nuxt don't retrieve user automatically and in state, auth shows _loggedIn: false_

I am using session auth with django.
this is my nuxt.config.js

[JoaoPedroAS51]

Hi @shahriar350! This is not a bug at all, it's just misconfiguration. There are possibly two things that are happening here.

First, you're trying to use a deprecated option propertyName in endpoints. So, for user, you should set user.property to 'data'. I believe this will fix your issue.

Second, when you set the cookie, it will check it for loggedIn state. So if the cookie is undefined or its name is wrong, the loggedIn state will be false. (I believe the correct name would be XSRF-TOKEN)

Here is an example of what your config should look like:

auth: {
  strategies: {
    cookie: {
      cookie: {
        name: 'XSRF-TOKEN' // <-  I changed the cookie name, but you can change it back if it's different for your use case.
      },
      endpoints: {
        csrf: {
          url: '/api/myauth/token/'
        },
        login: {
          url: '/api/myauth/login/',
          method: 'post'
        },
        logout: {
          url: '/api/myauth/logout/',
          method: 'post'
        },
        user: {
          url: '/api/myauth/user/',
          method: 'get'
        },
      },
      user: {
        property: 'data' // <- The user property goes here.
      }
    }
  }
}

[mustafadalga]

My problem is the same.I am logging in with the Laravel API. The login process is successful but vuex auth status does not change.

How can I fix the problem?

• Laravel version:5.7
• Nuxt version:2.14.6

Vue Devtool

Login information is saved to local storage.

 auth: {
        strategies: {
            local: {
                endpoints: {
                    login: {
                        url: "login",
                        method: "post",
                    },
                    user: {
                        url: "user",
                        method: "get",
                    },
                    logout: {
                        url: "logout",
                        method: "post"
                    }
                },
                user: {
                    property: 'data'
                }
            }
        }
    }

Login.vue

  async submit() {
      try {
        let status = await this.$auth.loginWith("local", {
          data: this.form,
        });
      } catch (error) {
        console.log(error.response.data);
      }
    },
  },

[shahriar350]

Hi @shahriar350! This is not a bug at all, it's just misconfiguration. There are possibly two things that are happening here.

First, you're trying to use a deprecated option propertyName in endpoints. So, for user, you should set user.property to 'data'. I believe this will fix your issue.

Second, when you set the cookie, it will check it for loggedIn state. So if the cookie is undefined or its name is wrong, the loggedIn state will be false. (I believe the correct name would be XSRF-TOKEN)

Here is an example of what your config should look like:

auth: {
  strategies: {
    cookie: {
      cookie: {
        name: 'XSRF-TOKEN' // <-  I changed the cookie name, but you can change it back if it's different for your use case.
      },
      endpoints: {
        csrf: {
          url: '/api/myauth/token/'
        },
        login: {
          url: '/api/myauth/login/',
          method: 'post'
        },
        logout: {
          url: '/api/myauth/logout/',
          method: 'post'
        },
        user: {
          url: '/api/myauth/user/',
          method: 'get'
        },
      },
      user: {
        property: 'data' // <- The user property goes here.
      }
    }
  }
}

sorry for my bad. but after change this nuxt-auth don't retrieve user after logged in.

this don't call user. no request sent to server for retrieving user
this is my code where is code for login

[JoaoPedroAS51]

@shahriar350 If no user request, then it's now related to cookie. Check the cookies in your browser and find the correct name.

[JoaoPedroAS51]

Hi @mustafadalga! The response you showed me is from login request or user request?

[mustafadalga]

Hi @mustafadalga! The response you showed me is from login request or user request?
This is a login request.The result returned after login.

I solved the problem.The codes are as follows

I added the token parameter.

    auth: {
        strategies: {
            local: {
                token: {
                    property: 'meta.token',// as my backend send meta.token instead of token
                    required: true,
                    type: 'Bearer',
                },
                endpoints: {
                    login: {
                        url: "login",
                        method: "post",
                    },
                    user: {
                        url: "user",
                        method: "get",
                    },
                    logout: {
                        url: "logout",
                        method: "post"
                    }
                },
                user: {
                    property: 'data'
                }
            }
        }
    },

I added user information after logging in with $auth.setUser method.

    async submit() {
      try {
        let { data } = await this.$auth.loginWith("local", {
          data: this.form,
        });
        this.$auth.setUser(data.data);
        console.log(data.data);
      } catch (error) {
        console.log(error);
      }
    },
  },

[JoaoPedroAS51]

@mustafadalga I'm happy to know it's working now! :)

I just would suggest setting user.autoFetch to false, in order to avoid the user request that is called right after login.
This will not disable the user fetch at all, just the one after login to avoid an unnecessary request

See https://auth.nuxtjs.org/schemes/local#user

[mustafadalga]

@JoaoPedroAS51 Thank you for your suggestion. As you said, I changed the autoFetch property to false. :)