Nuxt Auth - User Data not set

Question

I try to do a login via nuxt-auth module. As a response I get the token and then the user data is delivered. However, this.$Auth.loggedIn is false and this.$Auth.user is undefined. I have been fighting for 3 days and can not get any further. Hope somebody can help me.

login

await this.$auth.login({
    data: {
        email: this.email,
        password: this.password
    }
}).then(() => {
    this.$router.push('/dashboard')
}).catch(err => {
    this.snackbar.show = true;
})

nuxt.config.js

auth: {
    strategies: {
        local: {
            endpoints: {
                login: {
                    url: '/auth/login',
                    method: 'post',
                    propertyName: 'access_token'
                },
                logout: {
                    url: '/auth/logout',
                    method: 'post'
                },
                user: {
                    url: '/auth/me',
                    method: 'post'
                },
                tokenRequired: true
            }
        }
    }
}

response login

{
"access_token": "xxxxxxxxxxxxx.eyJpc3MiOiJodHRwczpcL1wvYXBpLmFwcHJlexxxxxxxcxXRoXC9sb2dpbiIsImlhdCI6MTUzODI5NTczMywiZXhwIjoxNTM4Mjk5MzMzLCJuYmYiOjE1MzgyOTU3MzMsImp0aSI6ImdtWWVyZTViQjk1cU5BRG8iLCJzdWIiOjIsInBydiI6IjYwODM2NzQ0MzQ4ZDQzMTk4NzE4N2ZjMWM2YzIzMjYxMDcyMWE5ZjAifQ.JhOiwIg7StzZR71aqYyI9rJpPXVclmddzPSIwqCIUN4",
"token_type": "bearer",
"expires_in": 3600
}

response user

{
    "id": 2,
    "name": "Dominik Dummy",
    "email": "[email protected]",
    "created_at": {
        "date": "2018-09-28 09:11:31.000000",
        "timezone_type": 3,
        "timezone": "UTC"
    },
    "updated_at": {
        "date": "2018-09-28 09:11:31.000000",
        "timezone_type": 3,
        "timezone": "UTC"
    },
    "self": "https:\/\/api.apprex.de\/api\/users\/2"
}

Aldose

Are u sure you need post request for getting user? If so - check the network if the user get request done. – Fun

Answer 1

Ok after a long try, I finally solved it. The problem was that auth.fetchUser() requires a property user in the user response, which is not present in my user response. I set the propertyName to false in the nuxt.config.js and now it works

*nuxt.config.js

auth: {
strategies: {
    local: {
        endpoints: {
            login: {
                url: '/auth/login',
                method: 'post',
                propertyName: 'access_token'
            },
            logout: {
                url: '/auth/logout',
                method: 'post'
            },
            user: {
                url: '/auth/me',
                method: 'post',
                propertyName: false // <--- Default "user"
            }
        }
    }
}
}

Currently I am not sure if this is a fault in the module

Aldose

Note that some tutorials I've seen say to set propertyName to undefined — that doesn't work. Your answer is the only one that's worked for me! – Ebb

you save my time – Otway

Answer 2

Update for auth-next": "^5.0.0"

You will have to set property: false instead of propertyName. So your nuxt.config.js might be as follows:

auth: {
    strategies: {
      local: {
        token: {
          property: 'access_token',
          required: true,
          type: 'Bearer'
        },
        user: {
          property: false, // <--- Default "user"
          autoFetch: true
        },
        endpoints: {
          login: { url: 'api/login', method: 'post' },
          logout: { url: 'api/auth/logout', method: 'post' },
          user: { url: 'api/user', method: 'get' }
        }
      }
    }
  },

Teniafuge

Thank you for posting an updated answer 👍 – Thermosetting

I wanted to avoid making an extra request to the user endpoint. To do this, I also needed to set endpoints.user to false. As the documentation says: "...unless you disable the user endpoint with endpoints.user: false you will still need to implement the user endpoint so that auth can fetch the user information on e.g. page refresh." (auth.nuxtjs.org/schemes/local/#user) – Malaco

Answer 3

You should call the this.$auth.fetchUser() for fills user data and loggedIn in the auth store Docs

Handgun

No, its called automatically after login github.com/nuxt-community/auth-module/blob/dev/lib/schemes/… – Fun

Yes I know it, but I think you wanted to call it manually and if you have the response from self API so it would be great and you can reload the page after getting the response for debugging it if user object fills after reload make sure you this.$auth.fetchUser() does work, else trouble due to not call fetchUser function – Handgun

thanks for this function! This needs to be called if we are updating user's data on backend – Charles