NuxtJs Auth with multiple strategies, endpoints getting overwritten

1.9k Views Asked by At

I am building a web app using NuxtJs and I am using nuxtjs/auth-next for OAuth authorization with Google and Facebook auth providers. I have configured post authorization endpoints to fetch token from backend, while it works when I just have one Strategy in nuxt config (either google or facebook), but when I have both then both logins are using the first strategy's endpoint. I have spent a lot of time on this, please share if you have any thoughts on how to resolve this. Thanks!

Edit: This works fine on localhost, I don't see endpoints getting overwritten, but when deployed the first strategy's token endpoint gets applied to the second one as well

Here is my auth config in nuxt.config.js

  auth: {
    strategies: {
      facebook: {
        responseType: "code",
        endpoints: {
          token: Config.HOST + "/api/social-login/facebook/",
          userInfo: Config.HOST + "/api/auth/user/"
        },
        clientId: Config.FACEBOOK_CLIENT_ID,
        scope: ["public_profile", "email"],
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30
        }
      },
      google: {
        clientId: Config.GOOGLE_CLIENT_ID,
        responseType: "code",
        endpoints: {
          token: Config.HOST + "/api/social-login/google/",
          userInfo: Config.HOST + "/api/auth/user/"
        },
        codeChallengeMethod: "",
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30
        }
      }
    }
  }
1

There are 1 best solutions below

1
On

One problem of the auth-next is that it has only one current strategy at the time. That means that you cannot be logged in with two different strategies at the same time.

Say, a user logs in with Facebook. Then the active strategy is set to the facebook strategy as found in the nuxt.config.js file.

Then the users logs in with Google, auth-next checks whether she/he is logged in (and yes she/he just logged in with Facebook, so the user is logged in), then sends the user to the "logged in" page. But, not the one in the Google strategy config, but the one in the active strategy config: Facebook.

In live testing with auth-next and two or more strategies, it is therefore important to make sure you are logged out of all the possible strategies to view the process. And maybe code it so the user can never log in whilst already logged in with a strategy.

Not saying this is the case with your problem, just to say this is something developers should be aware of while testing the frontend as it does create your kind of situation.