CODEWITHSUNDEEP
meteorgoogle-oauthngrok
SirBT
SirBT

Reputation: 1698

How do use ngrok in conjunction with Google Oauth?

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: [email protected]

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

Upvotes: 8

Views: 7194

Answers (3)

SirBT
SirBT

Reputation: 1698

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.

Upvotes: 0

Ankit
Ankit

Reputation: 1128

Use ngrok and change the Root URL to the one supplied by ngrok.

ROOT_URL=http:XXXXXXXX.ngrok.io meteor to start meteor.

Upvotes: 1

Sebastian Sastre
Sebastian Sastre

Reputation: 2192

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

Upvotes: 0

Related Questions