Google and Facebook providers not properly working in production

[bsor-dev]

Version

module: 5.0.0-1618898588.9655d0e
nuxt: 2.15.2

Nuxt configuration

mode:

• [/ ] universal
• spa

Nuxt configuration

auth.js

export default async function ({
  $auth,
  $axios,
  store,
  route,
  app,
  redirect,
  next,
}) {
  const authStrategy = await $auth.strategy.name
  const queryToken = Object.keys(route.query).length > 0 ? route.query.token : 0


  //authStrategy goes back to local after redirected back to my website
  if (queryToken) {
    if (authStrategy === 'facebook' || authStrategy === 'google') {
      try {
        await $axios.setToken(queryToken, 'Bearer')
        await $auth.strategy.token.set(queryToken)
        await $auth.fetchUser()
        redirect({ name: 'index' })
      } catch (err) {
        alert(JSON.stringify(err))
      }
    }
  }


  if ($auth.loggedIn) {
    let token = $auth.strategy.token.get()
    let refreshToken = $auth.strategy.refreshToken.get()
    $axios.setToken(token, 'Bearer')
    store.commit('user/setMe', $auth.user)
    store.commit('user/setToken', {
      token: token.replace('Bearer ', ''),
    })
    store.commit('user/setRefreshToken', {
      refresh_token: refreshToken,
    })
    store.commit('user/isAuthenticated', true)
  }

  $auth.onError((error, name, endpoint) => {
    console.error(name, error)
  })
}

nuxt.config.js

auth: {
    plugins: [
      {
        src: '~/plugins/auth.js',
      },
    ],
    redirect: {
      login: '/login',
      logout: '/login',
      home: '/',
      callback: '/',
    },
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'token.token',
          //require: true, // default
          //type: 'Bearer', // default
          prefix: '_test.',
          maxAge: false,
        },
        refreshToken: {
          property: 'token.refreshToken',
          data: 'refresh_token',
          maxAge: false,
        },
        user: {
          property: 'user',
        },
        endpoints: {
          refresh: { url: '/api/auth/refresh', method: 'post' },
          login: {
            url: '/api/auth/login',
            method: 'post',
            //spropertyName: 'token.token',
          },
          logout: {
            url: '/api/auth/logout',
            method: 'post',
            propertyName: false,
          },
          user: {
            url: '/api/auth/user',
            method: 'get',
            propertyName: false,
          },
        },
        scope: ['roles', 'permissions'],
        scopeKey: ['roles', 'permissions'],
      },
      facebook: {
        scheme: 'oauth2',
        endpoints: {
          authorization: `${process.env.APP_URL}/api/socialauth/login/facebook`,
          userInfo: `${process.env.APP_URL}/api/auth/user`,
        },
        refreshToken: {
          property: 'token.refreshToken',
          data: 'refresh_token',
          maxAge: false,
        },
        token: {
          property: 'token.token',
          //require: true, // default
          //type: 'Bearer', // default
          prefix: _test.',
          maxAge: false,
        },
        user: {
          property: 'user',
        },
        state: 'UNIQUE_AND_NON_GUESSABLE',
        clientId: '****',
        clientSecret: '***',
        grantType: 'authorization_code',
        responseType: 'code',
        accessType: 'offline',
        //codeChallengeMethod: 'S256',
        scope: ['public_profile', 'email'],
        autoLogout: false,
      },
      google: {
        scheme: 'oauth2',
        endpoints: {
          authorization: `${process.env.APP_URL}/api/socialauth/google/login`,
          userInfo: `${process.env.APP_URL}/api/auth/user`,
        },
        refreshToken: {
          property: 'token.refreshToken',
          data: 'refresh_token',
          maxAge: false,
        },
        token: {
          property: 'token.token',
          //require: true, // default
          //type: 'Bearer', // default
          prefix: '_test.',
          maxAge: false,
        },
        user: {
          property: 'user',
        },
        clientId: `***.apps.googleusercontent.com`,
        //codeChallengeMethod: '',
        scope: ['openid', 'profile', 'email'],
      },
    },
  },

What is expected?

Should able to login after redirect back to my website from google/facebook auth.

What is actually happening?

After redirected back nothing happens.

Steps to reproduce

When I tried to login using google/facebook auth, by default the authStrategy is set to local

The moment I click the google/facebook button this.$auth.loginWith('google'), authStrategy switch to google temporarily and after authenticating and redirected back to my website it switched back to authStrategy local again instead of google. So my auth middleware not getting the proper settings

I should get google authStrategy not local again. If I add local on this condition, I can login but when I open my website in new tab I'm not logged in because it duplicates authStrategy in my localstorage and cookies, so its two authStrategy local and google

auth.js

if (authStrategy === 'facebook' || authStrategy === 'google') {
      try {
        await $axios.setToken(queryToken, 'Bearer')
        await $auth.strategy.token.set(queryToken)

        await $auth.fetchUser()
        console.log(route)
        //return app.router.push({ path: '/' })
        redirect({ name: 'index' })
      } catch (err) {
        alert(JSON.stringify(err))
      }
    }

In my localhost dev mode it working fine, only happens when I deploy in live server. Or maybe because of my server? I'm using nginx with SSL. Seems it doesn't save my previous cookie settings after redirect back

[RonAlmog]

Found any solution to this issue?
I have learned a few tricks from your code, like how to catch the $auth.user .
I'm struggling on where to add the FB user to my database. I guess you're doing it in the store. is it?
maybe in this line?
store.commit('user/setMe', $auth.user)
can you please share this action?
also any advice on how to deal with the user state would be really great. thanks!

[bsor-dev]

@RonAlmog Its due to my nginx config issue on my server, proxy cache

[RonAlmog]

Hey @rosnaib11 , can I bug you with 2 quick questions:

1. I see that in the facebook strategy you are sending the request to the backend. I assume in the backend you are calling facebook. what's your callbackUrl ? do you return to another backend endpoint (with the data so you can write to db, etc), or to the website?
2. in your code i see this line:

if (authStrategy === 'facebook' || authStrategy === 'google') {

for me, the authStrategy does not change, and stays 'local' all the time. i'm trying to debug. my questions: who is changing the authStrategy, and causing it to be 'facebook' instead of 'local'?
Thank you!

[bsor-dev]

Hey @rosnaib11 , can I bug you with 2 quick questions:

1. I see that in the facebook strategy you are sending the request to the backend. I assume in the backend you are calling facebook. what's your callbackUrl ? do you return to another backend endpoint (with the data so you can write to db, etc), or to the website?
2. in your code i see this line:

if (authStrategy === 'facebook' || authStrategy === 'google') {

for me, the authStrategy does not change, and stays 'local' all the time. i'm trying to debug. my questions: who is changing the authStrategy, and causing it to be 'facebook' instead of 'local'?
Thank you!

1.) My callback URL is also pointed to my backend down to my controller. And from controller it will redirect together with token to my front-end URL.

2.) And from my front-end, I use these conditions to catch token

if` (authStrategy === 'facebook' || authStrategy === 'google') {

[RonAlmog]

perfect, thanks.
the token that you catch on front end, is this the one that facebook gives you, or you generate a new jwt token?

[bsor-dev]

perfect, thanks.
the token that you catch on front end, is this the one that facebook gives you, or you generate a new jwt token?

Its a generated JWT token

jwt.token

[RonAlmog]

great stuff, thanks so much for your help!