Search code examples
authenticationgoogle-oauthnuxt.js

Nuxt Auth doesn't work with Google strategie


I'm trying to implement a Google authentication in front of a Nuxt website. I using the community Auth module with the buid-in google strategie. Actually, the authentication is working perfectly in localhost but it's not working when the website is online. Sometime, Google responds with a 401 error (for invalid credentials).

Here is what look like my nuxt.config.js file:

export default {
  mode: 'spa',

  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/auth",
    "@nuxtjs/vuetify",
  ],

  auth: {
    strategies:{
      google: {
        client_id:
          "XXXXXXXX-xxxxxxxxxxxxxxx.apps.googleusercontent.com"
      }
    },
    redirect: {
      login: '/login',
      logout: '/login',
      home: '/',
      callback: '/callback'
    }
  }
}

And here my login.vue page :

<template>
  <v-btn @click="loginClicked()">Login with Google</v-btn>
</template>

<script>
  export default {
      middleware: ['auth'],
      methods: {
        consoleLog(text) {
            if (this.log !== null) {
                this.log += text + "\n";
            } else {
                this.log = text + "\n";
            }
        },
        async loginClicked() {
            try {
                let res = await this.$auth.loginWith('google');
                console.log("login result: " + res);
            } catch (err) {
                this.consoleLog("login error: " + err);
            }
        }
    }
  }
</script>

Solution

  • It would appear that the last update of the Nuxt-Auth module fixes my problem (v4.9.1). The changelog state an oauth2 fix for callback route check.