Auth-module: loginWith() Promise toast on success

[abegehr]

Version

v4.5.1

Reproduction link

n/a

Steps to reproduce

Using docs "Getting Started" to setup oauth2 stragegy with provider google.
Calling
this.$auth.loginWith("google").then(() => {
this.$toast.success("Logged in!");
});
on button click.

What is expected ?

Show "Logged in!" toast message after successful login.

What is actually happening?

Showing "Logged in!" directly after button click and not after actual login.

Additional comments?

Here is my google login strategy:
google: {
scope: [
"openid",
"profile",
"email",
"https://www.googleapis.com/auth/gmail.metadata"
],
client_id: "CLIENT_ID",
response_type: "code",
access_token_endpoint: "http://localhost:4000/auth/google/"
}

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

[Fubinator]

I've just got exactly the same problem and it got really annoying. Basically, when the .then() method is called, the busy flag is still true and loggedIn is false, which makes it hard to determine if the user logs in successfully.

[bitk0der]

.loginWith('local', { data: { username: this.username, password: this.password } }) .then(() => this.$toast.success('Logged In!')) .catch(e => { this.error = e + '' this.$toast.error(this.error); })

In fact, you could "watch" loggedIn state and trigger event on changing.

[johanvanwambeke]

.loginWith('local', { data: { username: this.username, password: this.password } }) .then(() => this.$toast.success('Logged In!')) .catch(e => { this.error = e + '' this.$toast.error(this.error); })

In fact, you could "watch" loggedIn state and trigger event on changing.

Should I watch it in the login page? (same page where I would do the 'then'?)
Because the redirect takes me away from the code.

[JoaoPedroAS51]

Closing here, as this is an old issue and it's fixed in v5.

this.$auth.loginWith('local', /* .... */)
  .then(() => this.$toast.success('Logged In!'))
  .catch(() => this.$toast.error('Something is wrong!'))