CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsnuxt-auth
ZecKa
ZecKa

Reputation: 2942

nuxt auth : Google provider return invalid_request

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.

Upvotes: 5

Views: 3466

Answers (3)

Alex
Alex

Reputation: 376

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

Upvotes: 3

silvan
silvan

Reputation: 1113

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

Upvotes: -1

ZecKa
ZecKa

Reputation: 2942

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

Upvotes: 0

Related Questions