Auth-module: $auth.loggedIn stays false after loginWith('local').

[sugoidesune]

Version

v4.9.1

Reproduction link

https://codesandbox.io/s/nuxt-auth-autofetchuser-not-working-eqdnq

Steps to reproduce

1. Login with loginwith.

What is expected ?

After a succesful loginWith() call, $auth.loggedIn should switch to true.

What is actually happening?

$auth.loggedIn stays false, only refreshes on page reload.

_{This bug report is available on Nuxt community (#c569)}

[JoaoPedroAS51]

Hi @sugoidesune! That's because loggedIn state is based on user data :)

[sugoidesune]

Took me also a while to realise, These two things would be seperate in my book.
Could also use a more explicit text in the docs!
Thanks!

[JoaoPedroAS51]

@sugoidesune We discussed about loggedIn being separated from user data, but we choose this approach to ensure that user is logged in and data has been fetched so we can safely navigate and render templates depending on $auth.user.

[Timibadass]

I'm currently experiencing this issue and I have to refresh my app using window.location for this.$auth.$state to get updated with both user info and loggedIn as true @JoaoPedroAS51

[izzatullokanoatov]

Hi. Does it fetch user data after logged in?

[Timibadass]

Hi @Izzatullo, I have tried manually setting the user with this.$auth.setUser(user) when autoFetchUser was set to false, I've also tried setting it to true and although it fetches the user data, this.$auth.$state still returns default values for both user and loggedIn. The two methods don't change until I refresh my app.

[JoaoPedroAS51]

Hi @Timibadass! Sorry for the delay. Can you show me your config and your login method? :)

[Timibadass]

My config currently looks like this
endpoints: { login: { url: "users/auth/login", method: "post", propertyName: "token" }, user: { url: "users/accounts", method: "get", propertyName: "user" }, logout: false }, tokenType: "", autoFetchUser: false, tokenRequired: true }

and my login method looks like this
let res = await this.$auth.loginWith("local", { data: { email, password } }); this.$auth.setUser(res.data.user);

@JoaoPedroAS51 .

[JoaoPedroAS51]

@Timibadass Your config seems fine to me.

Are you using vuex-persist or nuxt-vuex-localstorage? An user reported that these packages don't work with auth-module and after uninstalling them this issue was fixed.

[Timibadass]

@JoaoPedroAS51 I just removed the plugin(vuex-persist) and it works as expected, Thanks!

I think it should be added to the documentation so people would know not to use it with the auth module.

[sugoidesune]

Sorry continued conversation on github about this issue.
Turns out that loggedIn is actually 'user is set' and not just 'login call succesful'

[kawashimaken]

I have the similar issue here.
I am using the dev branch, and using local(refresh scheme) strategy.
after loginWith(), even after setUser(tried both manually and automatically fetching user data)

• 1) I can confirm loginWith is successful and receive correct json response from backend, and
• 2) I can also confirm user is set correctly, both steps processed without any errors.

HOWEVER, the loggedIn is seemed not updated, and stay false.

Do you guys have any insights if there are anything I might have missed? Thanks!

By the way the (non-dev branch)4.9.1 version works fine. Since I need to use fresh token so I am trying out the dev branch. Any help will be appreciated.

[SebastianMieszczanczyk]

Yes, I agree that this is stupid to rely on user data to set if user is authenticated or not - especially in a refresh strategy. You can already have fetched user data but the token can be expired. So in my opinion you should rather rely on decoding jwt, checking the exp time and set loggedIn flag depends on that if token expired or not. There will be also good to split it into 2 ways:

• when token expired so user needs to be immediately logged out
• when token should be refreshed (because of time interval or in comparison expiration date to actual date)