nuxt auth : Google provider return invalid_request

user_2838586 0
Viewed 2354

I try to set google authentication with Nuxt Auth module, but I got following error from google:

Error 400 : invalid_request
Parameter not allowed for this message type: nonce

Here is my config

// nuxt.config.js
modules: ["@nuxtjs/axios", "@nuxtjs/auth-next"],
auth: {
  router: {
    middleware: ["auth"],
  },
  redirect: {
    login: "/login",
    logout: "/",
    callback: false,
    home: "/",

  },
  strategies: {
         google: { clientId: "MyClientID", codeChallengeMethod: "" }
  }
}

And how i call the google auth in my component:

login(){
   this.$auth.loginWith("google").then( result => console.log(result) )
}

I also try to run official demo from here: https://github.com/nuxt-community/auth-module/tree/dev/demo But I got the same error.

nuxt-auth nuxtjs nuxt.js vue.js javascript
3 Answers

Had the same issue but setting responseType: 'code' worked for me.

EDIT: Set responseType: "id_token token" for an implicit grant flow and to get redirected to your Nuxt app with an access token by Google. This whole OAuth topic has always been quite confusing to me and there's so much misinformation out there on what to do and what not to do in terms of security. I have found the following article to be very helpful and demystify the various OAuth flows: https://itnext.io/an-oauth-2-0-introduction-for-beginners-6e386b19f7a9 However if you do not want to expose the access token on the front end and rather obtain it in your back end then you must use the code grant flow by setting responseType: "code" and set up your back end properly. I ended up using the code grant flow but I assume that most people find the implicit grant flow more convenient.

Here's the full snippet:

export default {
  modules: ["@nuxtjs/axios", "@nuxtjs/auth-next"],
  auth: {
    strategies: {
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        redirectUri: `${process.env.BASE_URL}/auth/google/callback`,
        codeChallengeMethod: "",
        responseType: "id_token token",
      },
    },
  },
  router: {
    middleware: ["auth"],
  },
};
user_57340660

Seems to be related with the version of Nuxt Auth.

Maybe this feature is not ready in @nuxtjs/auth-next

So i run

npm install @nuxtjs/auth@latest --save

Then update nuxt.config.json

  1. replace @nuxtjs/auth-next with @nuxtjs/auth
  2. replace clientId with client_id
// nuxt.config.js
modules: ["@nuxtjs/axios", "@nuxtjs/auth"],
auth: {
  router: {
    middleware: ["auth"],
  },
  redirect: {
    login: "/login",
    logout: "/",
    callback: false,
    home: "/",

  },
  strategies: {
         google: { client_id: "MyClientID"}
  }
}
user_28385860

in auth-next and auth0 the setting of responseType let me bypass the problem, my working config looks like:

auth0: {
  logoutRedirectUri: process.env.BASE_URL,
  domain: String(process.env.AUTH0_DOMAIN).replace(/(^\w+:|^)\/\//, ''),
  clientId: process.env.AUTH0_CLIENT_ID,
  scope: ['read:reports', 'read:roles', 'create:client_grants', 'offline_access'], // 'openid', 'profile', 'email' default added
  audience: process.env.AUTH0_AUDIENCE,
  responseType: 'token',
  accessType: 'offline',
  grantType: 'client_credentials',
  redirectUri: process.env.BASE_URL + '/callback',
  codeChallengeMethod: 'S256'
}
user_90260410
Related