CODEWITHSUNDEEP
node.jsauthenticationgoogle-cloud-platformnext.jsnext-auth
NroGamerz
NroGamerz

Reputation: 197

next-auth google provider doesn't work at, Access blocked: This app’s request is invalid

I have been hitting my head on this whole week. I have tried literally everything. I am trying to use next-auth + google provider.

In GCP, in authoried urls and redirect urls: localhost:3000 realdomain.com

localhost:3000/api/auth/callback/google realdomain.com/api/auth/callback/google

[...nextauth].js:

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    })
  ],
  secret: process.env.NEXTAUTH_SECRET,
  callbacks: {
    async session({ session, token }) {
      return session;
    },
  },
})

NEXTAUTH_URL=realdomain.com

with above config it worked locally. But in production, it always redirected to localhost:3000/api/auth/callback/google and not worked. So, I removed all the locals domain in GCP, still doesn't work. One thing to note: when I console.log(providers) even in production app it is:

google: Object { id: "google", name: "Google", type: "oauth", … }
​​
callbackUrl: "http://localhost:3000/api/auth/callback/google"
​​
id: "google"
​​
name: "Google"
​​
signinUrl: "http://localhost:3000/api/auth/signin/google"
​​
type: "oauth"

still localhost. The error:

Access blocked: This app’s request is invalid
Error 400: redirect_uri_mismatch

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the redirect URI in the Google Cloud Console.
Request details: redirect_uri=http://localhost:3000/api/auth/callback/google

"next-auth": "^4.20.1"

thanks!

Upvotes: 1

Views: 8540

Answers (5)

Karan Pal
Karan Pal

Reputation: 1

Use http://localhost:3000/api/auth/callback/google in google console redirect URL

Upvotes: 0

Ariska Hidayat
Ariska Hidayat

Reputation: 61

The following steps worked for me:

step1: Upon login, click on "error details

enter image description here

step2: look at URL info, copy that URL

enter image description here

step3: paste on authorized direct uri column

enter image description here

Upvotes: 2

Antonio Brandao
Antonio Brandao

Reputation: 1452

Note that you might be missing the "www" in the redirect_uri you configured in the google console.

This didn't work for me:

https://prose.cafe/api/auth/callback/google

But this did:

https://www.prose.cafe/api/auth/callback/google

(note the 'www')

The "error details" popup should be giving you the full correct redirect_uri:

redirect_uri error

The difference between my config and the URL in the error details was the "www". Now works fine.

Upvotes: 0

pabloasc
pabloasc

Reputation: 783

It worked to me using these values:

.env file

NEXTAUTH_URL=http://127.0.0.1:3000/api/auth

Google console - allowed redirect URI:

http://127.0.0.1:3000/api/auth/callback/google

Upvotes: 1

MacDroid
MacDroid

Reputation: 11

change the value of the NEXTAUTH_URL environmental variable from localhost to your real domain i.e:

NEXTAUTH_URL=https://yourRealDomain.com

Upvotes: 1

Related Questions