the redirect uri must exactly match the one you are adding to Google developer console

If you check the error message your app is running with

http://super-server.herokuapp.com/v1/auth/google/callback

All the ones you have added are https

May i suggest fixing your app so that it runs https. I dont think that you will be able to add http as a production redirect uri endpoint.

documentation

Obtaining OAuth 2.0 access tokens

authorization-errors-redirect-uri-mismatch

Node.js

I dont know enough about react.js but with node you should be able to do something like this

const http = require('http');
const https = require('https');

In my case (MERN + passport.js), i had a configuration that looked like:

const googleOptions = {
  clientID: config.google.id,
  clientSecret: config.google.secret,
  passReqToCallback: true,
  callbackURL: '/v1/auth/google/callback',
  scope: ['profile', 'email']
};

Even though the server, the client && the configuration of the oauth client within google api console were all in production with everything setup for https, for some reason, the callbackURL kept firing with google oauth as http://my-domain.com/v1/auth/google/callback

so this fix may be hacky, but it did fix my oauth issues:

//Google Strategy
const googleOptions = {
  clientID: config.google.id,
  clientSecret: config.google.secret,
  passReqToCallback: true,
  callbackURL: config.environment == 'production' ? 'https://super-server.herokuapp.com/v1/auth/google/callback' : '/v1/auth/google/callback',
  scope: ['profile', 'email']
};

Looks like the redirect_uri on the client side (React side) is set to http://super-server.herokuapp.com/v1/auth/google/callback

Change the redirect_uri on the client side from (http) http://super-server.herokuapp.com/v1/auth/google/callback to (https) https://super-server.herokuapp.com/v1/auth/google/callback.