CODEWITHSUNDEEP
herokugoogle-cloud-platformoauth-2.0google-oauthnext-auth
Nicholas Sliter
Nicholas Sliter

Reputation: 160

Google OAuth 2 Error 400: redirect_uri_mismatch but redirect uri is compliant and already registered in Google Cloud Console

I am developing a NextJS application using next-auth with Google Oauth 2 as its authentication provider. The production build is running on Heroku. When attempting to sign in on my production build, Google OAuth is giving me "Error 400: redirect_uri_mismatch". Normally this would be an easy fix, except the exact uri is already registered in Cloud Console.

See my cloud console config.

I have also tried added many different permutations of my uri, but this did not help.

This issue not solved by 11485271 or 69151061.

Error in question:

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
If you’re the app developer, make sure that these request details comply with Google policies.
redirect_uri: https://middcourses2.herokuapp.com/api/auth/callback/google

Image of error page

And here is a link to the list of authorized domains in GCP.

Upvotes: 13

Views: 22649

Answers (10)

Mike L
Mike L

Reputation: 1

Late to the conversation here, but I had to update .env.local, setting the env vars GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET correctly (as I had done already in .env), in order to get over the error 400.

Upvotes: -1

Aathi
Aathi

Reputation: 1

If your port is different from 3000, you need to update the config

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

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      authorization: {
        params: {
          response_type: "code",
          redirect_uri: "http://localhost:5000/api/auth/callback/google",
          scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email"
        }
      }
    })
  ]
});

export { handler as GET, handler as POST }

Update .env

NEXTAUTH_URL="http://localhost:3001"

Upvotes: 0

Pedro Bertao
Pedro Bertao

Reputation: 1

If above answers doesn't work, double check the organization that the Credentials are. Maybe you are configuring the correct url but for a credential that is not being used in the app. Double check if the Credentials OAuth Client is correct in the environment(.env):

GOOGLE_CLIENT_SECRET=XXX
GOOGLE_SECRET=XXX
NEXT_AUTH=https://your-url.com

And for the Authorized redirect URIs

  • http://localhost:3000
  • http://localhost:3000/api/auth/callback/google
  • https://your-url.com
  • https://your-url.com/api/auth/callback/google

Upvotes: 0

FreeCoder
FreeCoder

Reputation: 81

I had the same problem, in my case was a simple error adding my env variable. In the .env file was GOOGLE_CLIENT_SECRET and in my router.ts was using GOOGLE_SECRET

Make sure all the name variables are exactly the same.

Upvotes: -1

Choco Li
Choco Li

Reputation: 541

So for the credential setup in GCP, you need 2 sets of origin/redirect url

Authorized JavaScript origins

https://your-url

http://localhost:3000

Authorized redirect URIs

https://your-url/api/auth/callback/google

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

Also you need to set your production url in .env for production NEXTAUTH_URL=your-url

Otherwise google login will only work on your dev environment.

Upvotes: 4

Moshe Fortgang
Moshe Fortgang

Reputation: 1150

In my case, it was that I mistakenly defined the basePath incorrectly.

By the way, you don't need to define it; it's only if you want to use a custom base path.

Upvotes: 0

Salahuddeen
Salahuddeen

Reputation: 81

I had the same error, in my case the

NEXTAUTH_URL= 'http://localhost:3000' //my origin url

in .env was

NEXTAUTH_URL= 'http://localhost:300'  //my origin url

it was 300 instead of 3000, so make sure the URL is same as the origin

Upvotes: 3

Bryan
Bryan

Reputation: 41

I meet same question to, but if you use next-auth for authentication, you should add http://localhost:3000/api/auth/callback/google in your Authorized redirect URIs, see https://next-auth.js.org/getting-started/rest-api#get-apiauthcallbackprovider for more information.

Upvotes: 4

Kaushal Dokania
Kaushal Dokania

Reputation: 359

For me, clientID was not the issue, but this was due to a trailing slash( / ).

redirect_uri must be an EXACT MATCH on the developers console.

In the Google Cloud console, I had http://localhost:8080 under the redirect URIs in the list while my code was sending http://localhost:8080/ while making the oAuth call.

Upvotes: 6

Nicholas Sliter
Nicholas Sliter

Reputation: 160

Solved! So for some reason, Google changed my Client ID and Client Secret after I already set up those env variables. Once I noticed the change and inputted the new values it worked fine.

Upvotes: 3

Related Questions