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

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 youremailprefix@example.com. 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.

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).

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

The redirect url is case sensitive.

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

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

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

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.

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.

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

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

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

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.

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

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

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

In my case I added

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

in Authorized redirect URIs section and it worked for me

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.

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

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.