How do I resolve the Google OAuth "redirect_uri_mismatch" error? - meteor

Question

I am failing to configure my Google OAuth for my Meteor app.
I was successful in setting it up a few weeks ago when it worked perfectly, but now all of a sudden I cant seem to correctly configure this.
I have tunneled my app via ngrok. Am going to give you a step by step illustration of the how I go towards setting this up. Kindly point out what am doing wrong and what I can do to rectify this.
I start in my terminal. I fire up the app using:
meteor --port 7000
I open up another terminal and fire up ngrok using:
./ngrok http 7000
This yields
In my Meteor.startup I add the following code:
../client/main.js
Meteor.startup(function () {
// Client startup method.
METEOR_OFFLINE_CATALOG=1;
METEOR_PROFILE=1;
Meteor.absoluteUrl.defaultOptions.rootUrl ='http://41958975.ngrok.io';
//
});
In my browser console when I type:
Meteor.absoluteUrl()
I get
I now paste the http://41958975.ngrok.io link into the browser and get this:
Clicking on the button is followed by:
Since the steps 1 to 5 have previously been done, I jump straight to steps 6, 7, and 8.
...and complete by pasting in the Client ID and the Client Secret
then clicking on the save configuration. The results is:
Now when I click on the sign in with google button: This pops up, just like its supposed to happen.
I click on one of the account options. This is when it all goes bazurk! I am redirected back to the sign in with google button (login page) with this error message showing
Looking at the terminal, I also get this error message:
I cant seem to get beyond this point.
What am I doing wrong and how can I get beyond this point?
Looking forward to your help.

Answer 1

You forgot to modify your ROOT_URL when you're running your app. The very first line of your last screenshot clearly shows it:
App running at: http://localhost:7000/
Setting absoluteUrl on client won't help, because it's your server who tries to obtain a token.
It uses OAuth._redirectUri() function to get redirect_uri, and there the Meteor.absoluteUrl() is used (it takes ROOT_URL from env variables, as stated in documentation).
Thus, your redirect_uri becomes http://localhost:7000/_oauth/google and that clearly mismatches with http://41958975.ngrok.io/_oauth/google (step #7).
To fix that you should start your Meteor application like this:
ROOT_URL="http://41958975.ngrok.io" meteor