nuxt auth : Google provider return invalid_request

Question

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.

I'm also having the same problem – Abid Feb 23 '21 at 06:16 — Abid, Feb 23 '21 at 06:16
@Abid did you try to switch nuxt auth version ? – ZecKa Feb 23 '21 at 10:02 — ZecKa, Feb 23 '21 at 10:02

Alex · Answer 1 · 2021-06-10T15:48:37.780

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"],
  },
};

If you change the responseType to code, then you will be able to select a gmail account but the redirection from /login to /home (or whatever you have) no longer works — Damian Perez, Jun 10 '21 at 01:44
@DamianPerez I have edited my answer and I hope it gives more clarity now. If you change the response type to `responseType: "id_token token"` then you should be redirected to your Nuxt app. — Alex, Jun 10 '21 at 15:51

score 0 · Answer 2 · answered Jan 24 '21 at 18:46

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

replace @nuxtjs/auth-next with @nuxtjs/auth
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"}
  }
}

silvan · Answer 3 · 2021-05-07T09:46:06.523

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'
}

nuxt auth : Google provider return invalid_request

3 Answers3