Google OAuth 2 authorization - Error: redirect_uri_mismatch

Question

On the website https://code.google.com/apis/console I have registered my application, set up generated Client ID: and Client Secret to my app and tried to log in with Google. Unfortunately, I got the error message:

Error: redirect_uri_mismatch
The redirect URI in the request: http://127.0.0.1:3000/auth/google_oauth2/callback did not match a registered redirect URI

scope=https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
response_type=code
redirect_uri=http://127.0.0.1:3000/auth/google_oauth2/callback
access_type=offline
approval_prompt=force
client_id=generated_id

What does mean this message, and how can I fix it? I use the gem omniauth-google-oauth2.

Propylite

For anyone else having this problem, note that you can debug this issue by accessing a URL like https://accounts.google.com/o/oauth2/auth?client_id={client_id}&response_type=token&redirect_uri={redirect_uri}&scope={scope} in a browser, instead of running your entire app to test. – Nash

I have noticed, google automatically bind redirect_uri in double quotes in ( redirect_uri= "whatever") above url, and results this error. If I remove this double quotes, I am able to go through next screen. Now, how can we evade this double quotes, since it is automatically redirected by google itself. – Forwarder

@JackM response_type shouldn't be equal to code? what's the token? – Jesu

Answer 1

The redirect URI (where the response is returned to) has to be registered in the APIs console, and the error is indicating that you haven't done that, or haven't done it correctly.

Go to the console for your project and look under API Access. You should see your client ID & client secret there, along with a list of redirect URIs. If the URI you want isn't listed, click edit settings and add the URI to the list.

EDIT: (From a highly rated comment below) Note that updating the google api console and that change being present can take some time. Generally only a few minutes but sometimes it seems longer.

Rebeccarebecka

Ran into a similar problem, and wanted to note that updating the google api console and that change being present can take some time. Generally only a few minutes but sometimes it seems longer. – Sathrum

Open a private/incognito window in your browser, and try again. Sometimes this fixes the caching issue. – Mawson

google has no options for a redirect uri in the google console in the "Api & Auth > Credentials" donsn't matter if I create a new Client Id or generate a new key, there is simply no way to specify the redirect uri from the google console. – Jellyfish

the only way I was able to get the redirect option was via https://mcmap.net/q/65143/-google-oauth2-authorizing-oauth-token-error-redirect_uri_mismatch this solved all of my problems – Jellyfish

What if you have a very long dynamic url which may change, I am having issues where the redirect uri doesn't seem to be matching I believe due to the dynamic variables used to navigate to the page and session values – Lanta

The "Edit Settings" button is only available for web application. You need to create "Client ID for web application" if you can't find the setting. – Pyjamas

Anyone struggling to find where to set redirect urls in the new console: APIs & Auth -> Credentials -> OAuth 2.0 client IDs -> Click the link to find all your redirect urls – Voronezh

"Generally only a few minutes but sometimes it seems longer". What is the longest people had to wait? I've waited about an hour now and it still doesn't work and I am 100% sure I've set everything up correctly. – Retrospective

I'm just fade up with these mistakes which present no logic at all . i mean what is difference between http:// www. myweb.com and http:// www.myweb.com / . should not these things be handled at their side :( truely disappointing – Disproportionation

and if they are taking time for some reason to implement change , then there must be some kind of notification to developer so that we could know whether change is made or not :( – Disproportionation

The other thing to note is that there is a delay between setting the redirect url(s) in the credentials screen and when they take affect and allow the login flow to work. In my case it was a couple of minutes. – Caboodle

The type of credentials also matter. "Other" won't give you an option to add "Authorised redirect URIs", while "Web application" does. – Legislative

The interface on google is so bad. You can press save and it doesn't save. Seems like you need to hammer the save button. Refresh the page to check the urls have been added properly to the list. – Embalm

"list of redirect URIs" is no longer in the console. Can anyone describe a way to create a redirect URI in the console? – Nickeliferous

@Yar, i had the same issue and solved it by following these instructions. I hope you don't have the issue anymore, but maybe that'll help someone else. github.com/googlesamples/oauth-apps-for-windows/tree/master/…. – Ejective

Please note that the redirect uris are case sensitive :( – Fibrinolysis

I started getting this error after changing my redirect uri (even though I updated it in the google API console to exactly match the redirect uri I was using). After 20 hours I was still getting this error, so I simply created a new OAuth client id in the console and that worked immediately. – Alix

I am having this same error and I believe is due to the website domain be different to the email domain. Could this be the case? – Bowery

I had the same problem on the reactjs app. I added domain lvh.me:3000 for my localhost in authorized url on google developer console. It is working fine. – Anaplastic

Also worth noting that the 'http' part of the URL must match in both the local script and the GCP api console. You will experience an error if one is 'http' and the other is 'https' for example. Seems obvious but easy to overlook. – Ctenophore

Just note that the Google API console is incredible sensitive to the URL you enter. As noted above it's case-sensitive. It's also trailing-slash sensitive. Just treat it as something that does strict string equality. – Nash

I added the Authorize URI and reran the script, but the new request used a different localhost. So, I added another URI, and again another localhost used to the request. I have a list of 10 URIs now....... – Jerboa

The issue I believe is after you add the redirect URL in Google API console and press save. You should press ctrl-F5 to speed up the registration of that new URL. – Vengeful

These OAuth management consoles are aggressively difficult to use. There's no reason for it, either. It's just messy, lazy UX. I've been setting up OAuth logins for years, and I always struggle with this last step: "tell Facebook/Twitter/Google what the damn address of my web site is, in spite of their terrible OAuth management console". – Callipash

So how can I change the Google console to not want to go outside the root of my app in the callback? I have no idea why it wants xxxx.edu/authcallback/indexasync and not xxxx.edu/APPNAME/authcallback/indexasync <- it should be this one – Colley

Just wanted to chime in that my authorized uri contained https, and I was redirecting to http – Dihybrid

Also: please don't make the mistake of trying to use a Service Account (where such redirect URI list is absent) -> because a Service Account will return the cryptic message regarding missing redirect URI). – Enroll

For me the problem was to change from https to http scheme in the OAuthClient2 section. – Cort

Answer 2

In my case it was www and non-www URL. Actual site had www URL and the Authorized Redirect URIs in Google Developer Console had non-www URL. Hence, there was mismatch in redirect URI. I solved it by updating Authorized Redirect URIs in Google Developer Console to www URL.

Other common URI mismatch are:

• Using http:// in Authorized Redirect URIs and https:// as actual URL, or vice-versa
• Using trailing slash (http://example.com/) in Authorized Redirect URIs and not using trailing slash (http://example.com) as actual URL, or vice-versa

Here are the step-by-step screenshots of Google Developer Console so that it would be helpful for those who are getting it difficult to locate the developer console page to update redirect URIs.

1. Go to https://console.developers.google.com

2. Select your Project

3. Click on the menu icon

4. Click on API Manager menu

5. Click on Credentials menu. And under OAuth 2.0 Client IDs, you will find your client name. In my case, it is Web Client 1. Click on it and a popup will appear where you can edit Authorized Javascript Origin and Authorized redirect URIs.

Note: The Authorized URI includes all localhost links by default, and any live version needs to include the full path, not just the domain, e.g. https://example.com/path/to/oauth/url

Here is a Google article on creating project and client ID.

Annulate

I kept Authorized JavaScript origins empty and Authorized redirect URIs as 127.0.0.1/google_account/authentication and it worked from me. – Codd

Help me Please. #41271012 – Thrips

For those struggling with this, if you created your app via some other google page (such as the Drive API page), you might not see these options. I had to delete and recreate the Client ID from WITHIN the API Manager console. – Puffin

In order to see the JavaScript Origins and redirect URIs, I needed to set the Application Type to "Web application": – Jehovah

i didnt find this option. maybe the UI changed? – Owensby

I was doing this for a Firebase-created app, and had to disregard creating a new Client ID, instead using the one named "Web client (auto created by Google Service)" – Stopper

In my case, the problem was a slash :| – Mcanally

Follow this solution: This will work: https://mcmap.net/q/65145/-error-400-redirect_uri_mismatch-when-using-gmail-api-net – Barta

Answer 3

If you're using Google+ javascript button, then you have to use postmessage instead of the actual URI. It took me almost the whole day to figure this out since Google's docs do not clearly state it for some reason.

Textbook

Since this question is the top hit when googling the error message, here are some additional pointers. As Mike says, use "postmessage" for your redirect URI. You need to specify this in 2 places (if you are using the web-app-server-flow). One is in the g-signin button on the javascript. The other is in the signet authorization client in your server code. – Marney

great answer. I was posting with javascript and needed to set 'oauth2_redirect_uri' => 'postmessage' in the google API config.php file. – Wash

I have no strength to find out what "postmessage" as a redirect uri (wtf?) means, but you saved me! thanks! – Defensible

postmessage sounds nice, but it results in the useless Error: invalid_request origin parameter is required! – Jellyfish

https://mcmap.net/q/65143/-google-oauth2-authorizing-oauth-token-error-redirect_uri_mismatch allowed me to set the redirect to whatever I needed – Jellyfish

@MikeKeskinov How do I use a postmessage instead of an URI? – Roundup

Just put the word "postmessage" where an URI should be. – Textbook

After spending few hours trying to solve this problem, your answer help me a lot! The Google documentation is not very clear. In server side, if you use the Google API Client library, you should use this code : $client->setRedirectUri('postmessage'); instead of $client->setRedirectUri('http://your.url...'); – Ldopa

Can you help me with my question? #37308112 – Fieldwork

Wow.... @Ldopa solution worked for me after hours of beating my head against a wall. – Floatation

In GO: &oauth2.Config{ ClientID: ..., ClientSecret: ..., Endpoint: google.Endpoint, RedirectURL: "postmessage", Scopes: ..., } – Whiteside

I was struggling to solve this issue with django-rest-social-auth and angular frontend. Its working when I passed 'postmessage' as redirect_uri. Thanks a lot !!! – Taciturnity

Important addition: I discovered that on cross-client server auth flow you should use "postmessage" when you received your serverAuthCode from Web SDK, BUT set redirect_uri empty when you received serverAuthCode from Android or iOS SDK. – Getraer

Wow, I was skeptical when first seeing this answer because there's no mention of it anywhere I could find in the docs. After changing the POST parameter to exchange the "authorization_code" for an access token to redirect_uri: 'postmessage', it does work. – Syndactyl

works like magic – Blackface

omg, huge thanks to you guys! I wasted over a day on this. Just out of interest, where is that part regarding 'postmessage' mentioned in the docs? – Suckerfish

This is also the right answer if you are using Google Identity Services to get an authorization code via the popup method. See Jeff Ward's answer for more info. – Rothberg

Answer 4

In any flow where you retrieved an authorization code on the client side, such as the GoogleAuth.grantOfflineAccess() API, and now you want to pass the code to your server, redeem it, and store the access and refresh tokens, then you have to use the literal string postmessage instead of the redirect_uri.

For example, building on the snippet in the Ruby doc:

client_secrets = Google::APIClient::ClientSecrets.load('client_secrets.json')
auth_client = client_secrets.to_authorization
auth_client.update!(
  :scope => 'profile https://www.googleapis.com/auth/drive.metadata.readonly',
  :redirect_uri => 'postmessage' # <---- HERE
)

# Inject user's auth_code here:
auth_client.code = "4/lRCuOXzLMIzqrG4XU9RmWw8k1n3jvUgsI790Hk1s3FI"
tokens = auth_client.fetch_access_token!
# { "access_token"=>..., "expires_in"=>3587, "id_token"=>..., "refresh_token"=>..., "token_type"=>"Bearer"}

The only Google documentation to even mention postmessage is this old Google+ sign-in doc. Here's a screenshot and archive link since G+ is closing and this link will likely go away:

It is absolutely unforgivable that the doc page for Offline Access doesn't mention this. #FacePalm

Ascarid

@mariobgr Yeah, other answers here mention postmessage, but I wanted to give the specific circumstances (e.g. grantOfflineAccess) of when this crazy undocumented hack was necessary for me. :P I didn't want it to be true either. :) Cost me hours of headache. – Ascarid

Another postmessage thing that burned me for a few hours this morning: After parsing through Google's own Python client code, I finally came across this: "postmessage: string, this is generally set to 'postmessage' to match the redirect_uri that the client specified" Also, in their documentation: "The default redirect_uri is the current URL stripped of query parameters and hash fragment." Which means that if your redirect_uri is not the current url, then you'll need to explicitly specify it in gapi.auth2.init(), and on the server side, you'll use postmessage. – Kauri

Jeff, you are awesome! I just spent hours trying to debug Google's Auth API and this was one of the issues. Insane "solution" that is not documented anywhere. In fact, their own docs give wrong answers here. Fantastic! (Also, What the actual %2F Google?) – Warty

postmessage solved my issue, thanks! – Koestler

Answer 5

For my web application i corrected my mistake by writing

instead of : http://localhost:11472/authorize/
type :      http://localhost/authorize/

Jodijodie

Thanks for sharing, it helps. I was stuck on this because the GitHub OAuth2 API does not require you to remove the port number. – Toolmaker

That worked for me, too. I was following this course: asp.net/mvc/overview/security/… and getting 'redirect uri error'. After I've changed localhost:44334/signin-google to localhost/signin-google it worked. Thanks a lot for useful tip. – Mortie

Thank you so much. I was testing with this github.com/google/google-api-dotnet-client-samples and "The redirect URI in the request" appeared to be from a different port every time that i ran it. This helped me so much. It would have taken hours to figure out what was happening! – Varus

Amazing, this worked perfectly for my case! I had to add 127.0.0.1/authorize , as it wasn't resolving to the localhost DNS – Twine

Answer 6

1.you would see an error like this

2.then you should click on request details

after this , you have to copy that url and add this on https://console.cloud.google.com/

3. go to https://console.cloud.google.com/

4. click on Menu -> API & Services -> Credentials

5. you would see a dashboard like this ,click on edit OAuth Client

6. now in Authorized Javascript Origins and Authorized redirect URLS add the url that has shown error called redirect_uri_mismatch i.e here it is http://algorithammer.herokuapp.com , so i have added that in both the places in Authorized Javascript Origins and Authorized redirect URLS

7. click on save and wait for 5 min and then try to login again

Erkan

This works, seems no need to wait 5 minutes, <= 2 minutes is fine in my case. – Overmeasure

Answer 7

Make sure to check the protocol "http://" or "https://" as google checks protocol as well. Better to add both URL in the list.

Extrapolate

No, it's better to just make sure you're using https. – Volvulus

Answer 8

This seems quite strange and annoying that no "one" solution is there. for me http://localhost:8000 did not worked out but http://localhost:8000/ worked out.

Coeducation

this is because the redirect_uri must be an EXACT MATCH on the developers console and in your application. – Throstle

I had no ending "/" neither in the developers console and the application. Both were exact matches, and it did not work. I had to add an ending "/" for the script to work. – Mariehamn

This solved my issue, thanks. Don't know why this is needed though. – Contaminant

Answer 9

This answer is same as this Mike's answer, and Jeff's answer, both sets redirect_uri to postmessage on client side. I want to add more about the server side, and also the special circumstance applying to this configuration.

Tech Stack

Backend

• Python 3.6
• Django 1.11
• Django REST Framework 3.9: server as API, not rendering template, not doing much elsewhere.
• Django REST Framework JWT 1.11
• Django REST Social Auth < 2.1

Frontend

• React: 16.8.3, create-react-app version 2.1.5
• react-google-login: 5.0.2

The "Code" Flow (Specifically for Google OAuth2)

Summary: React --> request social auth "code" --> request jwt token to acquire "login" status in terms of your own backend server/database.

1. Frontend (React) uses a "Google sign in button" with responseType="code" to get an authorization code. (it's not token, not access token!)
   • The google sign in button is from react-google-login mentioned above.
   • Click on the button will bring up a popup window for user to select account. After user select one and the window closes, you'll get the code from the button's callback function.
2. Frontend send this to backend server's JWT endpoint.
   • POST request, with { "provider": "google-oauth2", "code": "your retrieved code here", "redirect_uri": "postmessage" }
3. For my Django server I use Django REST Framework JWT + Django REST Social Auth. Django receives the code from frontend, verify it with Google's service (done for you). Once verified, it'll send the JWT (the token) back to frontend. Frontend can now harvest the token and store it somewhere.
   • All of REST_SOCIAL_OAUTH_ABSOLUTE_REDIRECT_URI, REST_SOCIAL_DOMAIN_FROM_ORIGIN and REST_SOCIAL_OAUTH_REDIRECT_URI in Django's settings.py are unnecessary. (They are constants used by Django REST Social Auth) In short, you don't have to setup anything related to redirect url in Django. The "redirect_uri": "postmessage" in React frontend suffice. This makes sense because the social auth work you have to do on your side is all Ajax-style POST request in frontend, not submitting any form whatsoever, so actually no redirection occur by default. That's why the redirect url becomes useless if you're using the code + JWT flow, and the server-side redirect url setting is not taking any effect.
4. The Django REST Social Auth handles account creation. This means it'll check the google account email/last first name, and see if it match any account in database. If not, it'll create one for you, using the exact email & first last name. But, the username will be something like youremailprefix717e248c5b924d60 if your email is [email protected]. It appends some random string to make a unique username. This is the default behavior, I believe you can customize it and feel free to dig into their documentation.
5. The frontend stores that token and when it has to perform CRUD to the backend server, especially create/delete/update, if you attach the token in your Authorization header and send request to backend, Django backend will now recognize that as a login, i.e. authenticated user. Of course, if your token expire, you have to refresh it by making another request.

Oh my goodness, I've spent more than 6 hours and finally got this right! I believe this is the 1st time I saw this postmessage thing. Anyone working on a Django + DRF + JWT + Social Auth + React combination will definitely crash into this. I can't believe none of the article out there mentions this except answers here. But I really hope this post can save you tons of time if you're using the Django + React stack.

Berliner

I'm not using any third-party packages, but setting it to 'postmessage' still did the trick where none of the URIs in console would work. – Hallmark

Answer 10

In my case, my credential Application type is "Other". So I can't find Authorized redirect URIs in the credentials page. It seems appears in Application type:"Web application". But you can click the Download JSON button to get the client_secret.json file.

Open the json file, and you can find the parameter like this: "redirect_uris":["urn:ietf:wg:oauth:2.0:oob","http://localhost"]. I choose to use http://localhost and it works fine for me.

Godman

Answer 11

Checklist:

• http or https?
• & or &?
• trailing slash(/) or open ?
• (CMD/CTRL)+F, search for the exact match in the credential page. If not found then search for the missing one.
• Wait until google refreshes it. May happen in each half an hour if you are changing frequently or it may stay in the pool. For my case it was almost half an hour to take effect.

Backlog

Answer 12

When you register your app at https://code.google.com/apis/console and make a Client ID, you get a chance to specify one or more redirect URIs. The value of the redirect_uri parameter on your auth URI has to match one of them exactly.

Crat

And it is with very field that has problems for deep Angular based links as google doesn't agree [landed1.github.io/videos.html#/oauth2callback]is a valid URL – Cordula

Answer 13

for me it was because in the 'Authorized redirect URIs' list I've incorrectly put https://developers.google.com/oauthplayground/ instead of https://developers.google.com/oauthplayground (without / at the end).

Troche

Answer 14

It has been answered thoroughly but recently (like, a month ago) Google stopped accepting my URI and it would not worked. I know for a fact it did before because there is a user registered with it.

Anyways, the problem was the regular 400: redirect_uri_mismatch but the only difference was that it was changing from https:// to http://, and Google will not allow you to register http:// redirect URI as they are production publishing status (as opposed to localhost).

The problem was in my callback (I use Passport for auth) and I only did

callbackURL: "/register/google/redirect"

Read docs and they used a full URL, so I changed it to

callbackURL: "https://" + process.env.MY_URL+ "/register/google/redirect"

Added https localhost to my accepted URI so I could test locally, and it started working again.

TL;DR use the full URL so you know where you're redirecting

Rhinoceros

Answer 15

2015 July 15 - the signin that was working last week with this script on login

<script src="https://apis.google.com/js/platform.js" async defer></script>

stopped working and started causing Error 400 with Error: redirect_uri_mismatch

and in the DETAILS section: redirect_uri=storagerelay://...

i solved it by changing to:

<script src="https://apis.google.com/js/client:platform.js?onload=startApp"></script>

Throstle

Encountering the same Error 400, but changing the script did not work inside of my Cordova WebView. – Phinney

@NickSpacek please check if the missing double quotes were responsible. – Throstle

Answer 16

The redirect url is case sensitive.

In my case I added both: http://localhost:5023/AuthCallback/IndexAsync http://localhost:5023/authcallback/indexasync

Jezabel

And be careful with the character "/" at the end of the URL. Sometimes is needed, others times not. – Presidium

so we can keep localhost as request_uri even for live websites? – Thrips

Answer 17

If you use this tutorial: https://developers.google.com/identity/sign-in/web/server-side-flow then you should use "postmessage".

In GO this fixed the problem:

confg = &oauth2.Config{
        RedirectURL:  "postmessage",
        ClientID:   ...,
        ClientSecret: ...,
        Scopes:      ...,
        Endpoint:     google.Endpoint,
}

Whiteside

Answer 18

beware of the extra / at the end of the url http://localhost:8000 is different from http://localhost:8000/

Perpetua

Answer 19

Just make sure that you are entering URL and not just a domain. So instead of: domain.com it should be domain.com/somePathWhereYouHadleYourRedirect

Valina

Yes, this was my issue with NextAuth. When using the default GoogleProvider, it uses https://example.com/api/auth/callback/google, which you actually have to specify in your dashboard. – Wellgroomed

Answer 20

I also get This error Error-400: redirect_uri_mismatch

This is not a server or Client side error but you have to only change by checking that you haven't to added / (forward slash) at the end like this

redirecting URL list ❌:

https://developers.google.com/oauthplayground/

Do this only ✅:

https://developers.google.com/oauthplayground

Hibernicism

Answer 21

My problem was that I had http://localhost:3000/ in the address bar and had http://127.0.0.1:3000/ in the console.developers.google.com

Turley

Answer 22

Rails users (from the omniauth-google-oauth2 docs):

Fixing Protocol Mismatch for redirect_uri in Rails

Just set the full_host in OmniAuth based on the Rails.env.

# config/initializers/omniauth.rb

OmniAuth.config.full_host = Rails.env.production? ? 'https://domain.com' : 'http://localhost:3000'

REMEMBER: Do not include the trailing "/"

Presentiment

Answer 23

None of the above solutions worked for me. below did

change authorised Redirect urls to - https://localhost:44377/signin-google

Hope this helps someone.

Moreen

if we use localhost it will work for published website too. I mean if in the API console I add the localhost request URI. How will it work when the web site gets live? Or for live sites we need to put another set of actual URI in API Console? – Thrips

Answer 24

Anyone struggling to find where to set redirect urls in the new console: APIs & Auth -> Credentials -> OAuth 2.0 client IDs -> Click the link to find all your redirect urls

Voronezh

Answer 25

I have frontend app and backend api.

From my backend server I was testing by hitting google api and was facing this error. During my whole time I was wondering of why should I need to give redirect_uri as this is just the backend, for frontend it makes sense.

What I was doing was giving different redirect_uri (though valid) from server (assuming this is just placeholder, it just has only to be registered to google) but my frontend url that created token code was different. So when I was passing this code in my server side testing(for which redirect-uri was different), I was facing this error.

So don't do this mistake. Make sure your frontend redirect_uri is same as your server's as google use it to validate the authenticity.

Berk

I have a React front end and a Flask back end and this answer fixed my issue. thanks – Gambia

Answer 26

My two cents:
If using the Google_Client library do not forget to update the JSON file on your server after updating the redirect URI's.

Rudie

how to update that? – Erkan

@RohanDevaki download and replace the JSON file. – Rudie

Answer 27

Important addition: I discovered that on cross-client server auth flow you should use "postmessage" when you received your serverAuthCode from Web SDK and set redirect_uri empty when you received serverAuthCode from Android or iOS SDK.

Getraer

DUDE I was stuck on this for 15 hours and you blessed my life! Thank you!! For others, on my python backend, when verifying token code, I passed redirect_uri ="" and it worked. I also followed developers.google.com/identity/sign-in/ios/offline-access properly and now it all works (I'm using the deprecated library though but it works for now and it seems to do the same thing as normal one) – Hogshead

Answer 28

Let me complete @Bazyl's answer: in the message I received, they mentioned the URI "http://localhost:8080/" (which of course, seems an internal google configuration). I changed the authorized URI for that one, "http://localhost:8080/" , and the message didn't appear anymore... And the video got uploaded... The APIS documentation is VERY lame... Every time I have something working with google apis, I simply feel "lucky", but there's a lack of good documentation about it.... :( Yes, I got it working, but I don't yet understand neither why it failed, nor why it worked... There was only ONE place to confirm the URI in the web, and it got copied in the client_secrets.json... I don't get if there's a THIRD place where one should write the same URI... I find nor only the documentation but also the GUI design of Google's api quite lame...

Houser

Both URI's you posted look identical. What do you mean? – Mustee

Answer 29

I needed to create a new client ID under APIs & Services -> Credentials -> Create credentials -> OAuth -> Other

Then I downloaded and used the client_secret.json with my command line program that is uploading to my youtube account. I was trying to use a Web App OAuth client ID which was giving me the redirect URI error in browser.

Riverside

Answer 30

The main reason for this issue will only come from chrome and chrome handles WWW and non www differently depending on how you entered your URL in the browsers and it searches from google and directly shows the results, so the redirection URL sent is different in a different case

Add all the possible combinations you can find the exact url sent from fiddler , the 400 error pop up will not give you the exact http and www infromation

Locomotive

Answer 31

In my case the redirect-uri is http://127.0.0.1:5000/auth/google/callback
and I keep requesting through http://localhost:5000/auth/google
Make sure if you use localhost or 127.0.0.1.

Dave

Answer 32

Try to do these checks:

1. Bundle ID in console and in your application. I prefer set Bundle ID of application like this "org.peredovik.${PRODUCT_NAME:rfc1034identifier}"
2. Check if you added URL types at tab Info just type your Bundle ID in Identifier and URL Schemes, role set to Editor
3. In console at cloud.google.com "APIs & auth" -> "Consent screen" fill form about your application. "Product name" is required field.

Enjoy :)

Adal

Answer 33

In my case I had to check the Client ID type for web applications/installed applications.

installed applications: http://localhost [Redirect URIs] In this case localhost simply works

web applications: You need valid domain name [Redirect URIs:]

Manzanilla

Answer 34

What you need to do is go back to your Developer Console and go to APIs & Auth > Consent Screen and fill that out. Specifically, the product name.

Columbarium

Also, don't use a product name that is also used in another project. Make sure it's unique. – Toolmaker

Answer 35

I had two request URIs in the Console,

http://xxxxx/client/api/spreadsheet/authredirect 

and

http://localhost. 

I tried all the top responses to this question and confirmed that none of them were my problem.

I removed localhost from the Console, updated my client_secret.json in my project, and the mismatch error went away.

Webworm

Answer 36

I had the same issue with google sign in.

I had correctly entered my callbacks in google Credential panel at google developer console here was my redirect urls :

https://www.example.com/signin-google

https://www.example.com/signin-google/

https://www.example.com/oauth2callback

https://www.example.com/oauth2callback/

Everything seems fine right? But it still didn't work until I added one more magical Url I added signin-google URL (which is default google callback) without www and problem solved.

Take it into account (depending on your domain) you may or may not need to add both with and without www URLs

Cowage

Answer 37

Below are the reasons of Error: redirect_uri_mismatch issue occurs :

1. Redirect URL field blank at your google project.
2. Redirect URL does not match with your site
3. Important! It will work only with working domain like example.com, book.com etc (Not work with local host or AWS LB URL)

Recommended to use domain URL

Cottager

What should be done is google generates wrong redirect_uri param all the time? It is generated as localhost:XXXXX with a random port number, ignoring redirect uri I set up creating client. – Matchboard

Answer 38

The trick is to input the right redirect url at the point of creating the ID. I found that updating the redirect url once the ID has been created via an 'Edit' just doesn't get the job done. What also worked for me is duplicating the entire 'vendor' folder and copying it to the same location where the 'oauth' file is (just until you successfully generate the token and then you can delete the duplicate 'vendor' folder). This is because trying to point to the vendor folder via '../vendor/autoload' didn't work for me.

So, delete your existing troublesome Client OAuth ID and try this approach, it will work.

Corpulence

That didn't work for me, Google still wants me to provide it with a URI that is outside of the root folder of my website: redirect_uri: https://XXXXX.edu/AuthCallback/IndexAsync it should be this https://XXXXX.edu/FOLDER/AuthCallback/IndexAsync – Colley

Answer 39

To make it work on localhost and if using for web-server, do provide

Authorized JavaScript origins (Client ID for web appication)
e.g. http://localhost:4200

Coinage

Answer 40

I had this problem using Meteor and Ngrok, while trying to login with Google. I put the Ngrok URL in the Google Developer Console as redirect URLs, and went to the Ngrok URL page. The thing was that I didn't use Meteor's ROOT_URL when executing the app, so any redirect would go to localhost:3000 insted of the Ngrok URL. Just fixed it by adding the Ngrok URL as ROOT_URL on Meteor's configuration or by exporting it before executing the app on the terminal like: export ROOT_URL=https://my_ngrok_url

Iceman

Answer 41

I had the same issue to authorize in Reactjs app on my local machine with port 3000.
I have added lvh.me in authorized domains and http://lvh.me:3000 for authorized origin and authorized redirect URL as shown in following images respectively.

Note: You can add multiple sites for verified domains. i-e for your local machine, staging or other environments

Anaplastic

Answer 42

if you are using passport js and you are deploying your app in heroku you need to add this setting proxy: true in passport strategy

passport.use(new GoogleStrategy(
    {
        clientID: keys.googleClientID,
        clientSecret: keys.googleClientSecret,
        callbackURL: '/auth/google/callback',
        proxy: true
    })

or check your authorized url

must be https://yourwebsite/auth/google/callback

Tambratamburlaine

Answer 43

In my case I added

https://websitename.com/sociallogin/social/callback/?hauth.done=Google

in Authorized redirect URIs section and it worked for me

Smaragdite

where did you add? – Erkan

'Authorized redirect URIs' field – Smaragdite

Answer 44

In my case resetting the secret ('reset secret'-button) did the trick.

Colson

Answer 45

Go to OAuth consent screen on your Google https://console.cloud.google.com/

then click on the PUBLISH APP.

Sanitize

Answer 46

This can also happen when you've deployed your app on the Cloud and using a Load Balancer. It's utterly confusing in this case because you'll keep seeing that you've specified the correct callback URI but Google keeps saying your URI is not an exact match. The solution is to enable Sticky Sessions on your Load Balancer. If you are using Elastic Beanstalk in AWS, this is done by simply adding a .ebextensions/load-balancer.config file in your build directory, with the following content:

option_settings:
  aws:elasticbeanstalk:environment:process:default:
    StickinessEnabled: 'true'
    StickinessLBCookieDuration: '43200'

If you're using a Load Balancer and you've double checked your URI multiple times. Try this.

Yolanthe

Answer 47

If you are using AWS Amplify make sure you check your amplify-config.js or whatever you are passing into Amplify.configure(CONFIG);.

Make sure that these are set properly:

"redirectSignIn": "https://develop.de58tqweqi5gdus.amplifyapp.com/",
"redirectSignOut": "https://develop.de58tqweqi5gdus.amplifyapp.com/",

Herwick

Answer 48

It's also important to note that when verifying the code during callback, you need to set the redirect URI to match both the redirect URI used when generating the auth URL and the authorized redirect URI on Google Cloud Console.

e.g. Generating auth URL:

const oAuth2Client = getOAuth2Client();

const authorizeUrl = oAuth2Client.generateAuthUrl({
  access_type: "offline",
  scope: "https://www.googleapis.com/auth/userinfo.email",
  prompt: "consent",
  redirect_uri:
      process.node.NODE_ENV === "production"
        ? "https://[yourdomain].com/account/auth/callback"
        : "http://localhost:3000/account/auth/callback",
});

And when verifying the code during callback to get the access tokens:

const { tokens } = await oauth2Client.getToken({
    code: code,
    redirect_uri:
        config.NODE_ENV === "production"
          ? "https://[yourdomain].com/account/auth/callback"
          : "http://localhost:3000/account/auth/callback",
});

If you don't specify the redirect_uri when calling getToken method, you may face a redirect_uri_mismatch error.

And in Google Cloud Console, add the two redirect URIs:

• https://[yourdomain].com/account/auth/callback
• http://localhost:3000/account/auth/callback

Cysticercus