feature: Support login with multiple auth providers in the same session.

[dalexhd]

What problem does this feature solve?

I want my users to be able to login with a custom provider in my application, and optionally if they want, to be able to log in with any other provider like Spotify.

In >5.0.0 version you're only able to login with a single provider. My idea is to give the availability to store multiple provider's authentication states in all the NuxtJS lifecycle.

_{This feature request is available on Nuxt community (#c711)}

[dalexhd]

Any updates here? Is this posible?

[StanleyMasinde]

@dalexhd Does your application have a backend? If so, you could:

• Identify a unique property to use in identifying users in my case, I use the email
• When someone authenticates with a provider, I check for that user in my DB using the email. And add them if they don't exist.
• As a plus, I can store all the providers that a user has used.
• Treat the clientside as just the UI real authentication and authorisation happens in the backend.

[dalexhd]

@StanleyMasinde Yes my application has a backend.

I know that a user can sign in with multiple providers, and I only would need to check if that email has been registered before or not...
But that is not my case...

The main feature that I would like to have is this:
I would like to be able to access multiple provider auth states at the same time. So it would be a multi-session based module. Here is an example:

// A user has loggedin using twitter, so I would need to use this in order to get related twitter data:
this.$auth.user('twitter')

// Also the previous user has loggedin with spotify. So I would need to save 2 session on my vuex instance, Twitter and spotify.
this.$store.state.auth.user('spotify') // Get spotify related data
this.$store.state.auth.user('twitter') // Get twitter related data

I've taken current documentation and modified it in order to support this feature:

---

Auth

This module globally injects $auth instance, meaning that you can access it anywhere using this.$auth.
For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$auth.

properties

All properties are reactive. Meaning that you can safely use them in Vue template v-if conditions.

user

This object contains details about authenticated user provider details such as name.
You can access it using either $auth or Vuex.

// Access using $auth
this.$auth.user('twitter')

// Access using vuex
this.$store.state.auth.user('twitter')

loggedIn

This boolean flag indicates that user is authenticated with a specific provider and available at the moment or not.

// Access using $auth
this.$auth.loggedIn('twitter')

// Access using vuex
this.$store.state.auth.loggedIn('twitter')

Under the hood, auth uses attached $storage instance to provide this states.

methods

loginWith(strategyName, ...args)

• Returns: Promise

Set current strategy to strategyName and try to do login. Usage varies by current strategy.

this.$auth.loginWith('local', /* .... */)
  .then(() => this.$toast.success('You Logged In With Twitter!'))

login(...args)

• Returns: Promise

Login using active strategy. Usage varies by current strategy.

TIP: Using loginWith is recommended instead of this function!

this.$auth.login(/* .... */)
  .then(() => this.$toast.success('You Logged In With Twitter!'))

setUser(provider, user)

Set a specific provider user data and update provider loggedIn state.

TIP: This function can be used to set the user using the login response after a successfully login, when autoFetchUser is disabled.

this.$auth.setUser('twitter', user)

setUserToken(provider, token, refreshToken)

• Returns: Promise

Set the auth token and optionally the refresh token for the specified provider, then it will fetch the user using the new token and current strategy.

TIP: This function can properly set the user after registration

this.$auth.setUserToken('twitter', token, refreshToken)
  .then(() => this.$toast.success('Provider User Token set!'))

logout(provider, ...args)

• Returns: Promise

Logout from specified strategy. Usage varies by current scheme.

await this.$auth.logout('twitter', /* .... */)

fetchUser(provider)

• Returns: Promise

Force re-fetch user using provided strategy.

await this.$auth.fetchUser('twitter')

hasScope(provider, scopeName)

Check if user has a specific scope from specific provider:

// Returns is a computed boolean
this.$auth.hasScope('twitter', 'admin')

refreshTokens(provider)

Refreshes tokens from the specified provider if refresh token is available and not expired. This only works when logged in.

// Refresh tokens
this.$auth.refreshTokens('twitter')

TIP: Useful to manually refresh the token.

[StanleyMasinde]

That's very impressive @dalexhd. I'd recommend you create a PR with these feature working because the maintenance team has s a lot to handle already.