How do use ngrok in conjunction with Google Oauth? - meteor

Question

I recently installed Ngrok in order to test my localhost meteor App on my phone.
I am successful in accessing the meteor app via a tunnel by ngrok.
However when I try to login using I get this error message:
The login process shows the following error message:
400. That’s an error.
Error: redirect_uri_mismatch
Application: AppName
You can email the developer of this application at: my#emailadress.com
The redirect URI in the request, http://localhost:7123/_oauth/google,
does not match the ones authorized for the OAuth client.
Updating the Authorized JavaScript origins & redirect URIs to the Ngrok forwarding addresses, doesn't have an effect.
How do I correctly use ngrok in conjuction with Google Oauth?
Any help would be greatly appreciated

Answer 1

Use ngrok and change the Root URL to the one supplied by ngrok.
ROOT_URL=http:XXXXXXXX.ngrok.io meteor to start meteor.

Answer 2

It's trying to use http://localhost:7123/_oauth/google instead of a more ngrok-like url that could be, for example: https://fd4fdbbb.ngrok.io/_oauth/google
You can check the parameters that you are using to run the app and the environment variables too.
For example, I typically use
ServiceConfiguration.configurations.upsert(
{ service: 'facebook' },
{
$set: {
appId: process.env.facebookConsumerKey,
secret: process.env.facebookConsumerSecret,
loginStyle: 'popup'
}
}
);
And run meteor using a bash script that looks like:
#!/bin/bash
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
nvm install 4.4.7
IP_ADDRESS=`ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | grep -v '10.0.0.1'` echo "Starting app on: $IP_ADDRESS:3000"
# NODE_DEBUG=request \
# facebookOAuthRedirectURL=http://$IP_ADDRESS:3000/_oauth/facebook \
facebookAppName="BlahApp - local dev" \
facebookConsumerKey=12345 \
facebookConsumerSecret=xxxxxx \
facebookOAuthRedirectURL=http://$IP_ADDRESS:3000/_oauth/facebook \
MONGO_URL=mongodb://$IP_ADDRESS:27017/staging-blah-app \
ROOT_URL=http://$IP_ADDRESS:3000 \
BIND_IP=$IP_ADDRESS \
MOBILE_DDP_URL=http://$IP_ADDRESS \
MOBILE_ROOT_URL=http://$IP_ADDRESS \
meteor --port $IP_ADDRESS:3000 --settings development-settings.json
So you can, instead of using googleOAuthRedirectURL=http://$IP_ADDRESS:3000/_oauth/google could use https://fd4fdbbb.ngrok.io/_oauth/google

Answer 3

The issue was that the environment variable were not read by meteor, and even though it was overwritten on the client side, somehow the server connected to google with a wrong callback url.
Now for the solution... I started by ensuring that the settings in the google service configuration were reset by running this in the terminal after killing the app:
meteor reset
In a separate terminal, I then started ngrok to generate a tunnel link:
./ngrok http 7123
Yielding the tunnel link:
http://adba9b9f.ngrok.io/
In a separate terminal I start my app by assigning it to "port 7123" and setting "http://adba9b9f.ngrok.io" as the absoluteUrl like this:
ROOT_URL=http://adba9b9f.ngrok.io meteor --port 7123
To confirm that this command has been carried out, I typed this into the browser console
Meteor.absoluteUrl()
The response:
"http://adba9b9f.ngrok.io"
Indicates that the Meteor.absoluteUrl() command was successful.
Next, I accessed my app via the "http://adba9b9f.ngrok.io" tunnel and clicked on the "Configure google button", where GLADLY noticed that the Authorized JavaScript origins were preset to:
http://adba9b9f.ngrok.io and
Authorized redirect URIs preset to: http://adba9b9f.ngrok.io/_oauth/google
I then filled in the Client ID and Client Secret part with details from the google credentials, and updated the google credentials with the details from the configure google button details and saved.
Am happy to say... Everything works desirably now.