We Keep Coding

localhost:3000 google sign in working but production sign in not working.. redirect mismatch issue

Access blocked: This app’s request is invalid
You can’t sign in because this app sent an invalid request. You can try again later, or contact the developer about this issue. Learn more about this error
If you are a developer of this app, see error details.
Error 400: redirect_uri_mismatch

This is the most common mistake that is often overlooked while deploying our applications. You should access your Google Developer console for this project and configure the redirect URL with the deployed URL and few tweaks. Hope this would solve your problem.

There is a mismatch between the redirect URI that is registered with an OAuth client and the one that is being used in the authorization request.
Make sure that the redirect URI you are using in the authorization request is the same as the one that is registered with the OAuth client.

Redirect uri mismatch is one of the most common google oauth error messages.
The redirect uri is used to tell the authorization server where to return the authorization code back to.
This is configured over on google developer console for your project under the credentials themselves.
The redirect uri your application is sending from must exactly match one that you have listed in google cloud console.
If you click on error details it will tell you exactly what redirect uri you need to add in google developer console.
Google Oauth: error redirect_uri_mismatch the javascript origin Quick Fix.
Google OAuth2: How the fix redirect_uri_mismatch error. Part 2 server sided web applications.

How to test Pinterest SDK locally?

I'm testing out the Pinterest SDK on my local machine. The problem is, I need a secure server in order to test the API (they only allow Redirect URIs with a HTTPS prefix).
Every time I try to login to the Pinterest application it throws the error:
{"status": "failure", "message": "You are not permitted to access that resource.", "code": 7, "data": "The provided redirect_uri http://localhost:3000/ does not match any of the registered redirect URIs."}
Is there any way I can test via HTTPS locally?

If you are using Create React App you can start the development server in HTTPS, see https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

You can't. Pinterest demands that you have https link.
I tried using ngrok to convert my localhost link to an https link for testing. But it was throwing some errors, so skipped it. You can try it out though
But if you wish to have a temporary setup to work with the APIs, lets say to write down functions to process information you get from APIs, which was my requirement, then you can follow what I did. May not be the best option, but I could get my job done.
I hosted a basic app on firebase. Firebase provides some sample apps which you can use as base app if you want.
Just get the link of the hosted app and add it in your app page in Pinterest.

Google Sign in button not working on server

I am getting a weird issue. Google sing in button is working fine on my local system (using url: localhost) but it is not working on the server.
It keep giving me error 400 Error: invalid_request
I have added my server url on google console and even verified my URL
I am using example code from here
See my demo here

For use with requests from a web server. This is the path in your
application that users are redirected to after they have authenticated
with Google. The path will be appended with the authorization code for
access. Must have a protocol. Cannot contain URL fragments or relative
paths. Cannot be a public IP address.
Your redirect URI should probably look more like this.
http://ec2-54-175-82-188.compute-1.amazonaws.com/user/auth
When your code runs it has built the following request (Put this in any web browser.)
https://accounts.google.com/o/oauth2/auth?redirect_uri=storagerelay%3A%2F%2Fhttp%2Fec2-54-175-82-188.compute-1.amazonaws.com%3Fid%3Dauth315255&response_type=permission%20id_token&scope=email%20profile%20openid&openid.realm=&client_id=651551554260-60j7jq0i2gjsfm1mm0rh74ie4m80md5i.apps.googleusercontent.com&ss_domain=http%3A%2F%2Fec2-54-175-82-188.compute-1.amazonaws.com&fetch_basic_profile=true&gsiwebsdk=2
If you look at the redirect URI.
storagerelay%3A%2F%2Fhttp%2Fec2-54-175-82-188.compute-1.amazonaws.com%3Fid%3Dauth315255
Its not correct. It should be the page on your website that is designed to handle the authentication.

On the server, try setting the redirect_uri to "postmessage". It should do the magic.

Google Authentication resulting in origin_mismatch error.

I have done code for getting list of google analytics accounts
and its works fine with a static clientid
I have used this tutorial: Hello Analytics API: JavaScript quickstart for web applications
The problem is:
I want this functionality for all users means my users logged in from their Google Accounts and they all can see their Google Analytics accounts list.
However I am seeing an error: "origin_mismatch"
I want this without set origin because I can not set origin for all users.

Origin mismatch is normally caused by the Javascript origins incorect in the project on google developers console. Check and make sure that the Javascript origins match the domain from which your requests are coming and to which you are returning the user after login in.
Creating a Google API Console project and client ID
In the Authorized JavaScript origins field, enter the origin for your
app. You can enter multiple origins to allow for your app to run on
different protocols, domains, or subdomains. You cannot use wildcards.
In the example below, the second URL could be a production URL.
http://localhost:8080 https://myproductionurl.example.com
Answer: If you are using JavaScript you need to set the origin for the server that you are returning authentication to. There is no way around this. Just add your server and your users will be able to access it. There is no need to set it for each user. The origin is to your server hosting the script.

Error: origin_mismatch when authorizing embed API for Google Analytics

I'm trying to implement a statistics dashboard from google analytics in a 3rd party CMS and I'm running into some problems. I'm trying to use googles embed API to build my dashboard and run into this error when I try to authenticate my account:
Error: origin_mismatch
I have looked around for a solution and found out it was because of a missing www. pretty quick. The thing is that I filled out the right URL in googles developer console and still have no luck. Does anyone know how I can fix this to work properly?
Error: origin_mismatch
Application: CMEZ Analytics
You can email the developer of this application at: email#email.com
Request Details
=
from_login=1
response_type=code token id_token gsession
scope=https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/userinfo.email
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay482041337
include_granted_scopes=true
origin=http://cmez.eu
state=458516662|0.59538506
as=1d7def2550073266
client_id=[censored]
authuser=1
hl=nl
That’s all we know.

The origin_mismatch errror is probably caused by the Javascript origins not being set correctly in the Google Developer console for your project. The Javascript origins must match the domain from which your requests are coming and to which you are returning the user after sign in.
Note: A common mistake here is to add javascript origins for http:// but not https:// (or vice versa). You must also include the port number of your server in the javascript origins if a port number appears in the url.
Documentation info
In the Authorized JavaScript origins field, enter the origin for your
app. You can enter multiple origins to allow for your app to run on
different protocols, domains, or subdomains. Wildcards are not
allowed. In the example below, the second URL could be a production
URL.
http://localhost:4567
https://myproductionurl.example.com