8

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

SirBT
  • 1,580
  • 5
  • 22
  • 51
  • Did you try with both http/https? Did you make sure the redirect uri is the full one, *i.e.* `http://localhost:7123/_oauth/google` (no forward slash in the end)? – Max G. Oct 07 '16 at 13:34
  • @ Max G. Yes I tried both. Let me know if they work for you... – SirBT Oct 07 '16 at 17:11
  • That is what I have set on my redirection and it works for me. Out of curiosity, why did you set your port to 7123 and not the default 3000? When using ngrok, did you make sur to put xxx.ngrok.io:7123? – Max G. Oct 07 '16 at 19:28
  • @MaxG. Wow!? Am surprised this works for you! Kindly help me out! To answer your question, I used to port-forward via my router at port 3000 (a while back). I know its not the most secure method, but to restrict access to my app, I changed the port to 7123 by starting my meteor app like this: meteor --port 7123. Starting my app this way just became a habit ever since. Yes I put XXX.ngrok.io:7123 in ngrok, further I am also able to access the app externally using the Ngrok generated link. Am glad you made this work for you. Cant wait to get it to work for me! – SirBT Oct 08 '16 at 15:02

3 Answers3

1

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

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

Ankit
  • 1,118
  • 13
  • 21
  • Thanks Ankit! Following your advice, I used the link generated by ngrok to update my Google credentials, I use the same link to successfully start meteor in the terminal like this: `ROOT_URL="http://xxxxxxxx.ngrok.io" meteor` I say successfully because I see `App running at: http://xxxxxxxx.ngrok.io` – SirBT Oct 20 '16 at 06:35
  • I thing the root url value should be without quotes. Btw did it work. I did the same yesterday and it worked. – Ankit Oct 20 '16 at 07:03
  • Thanks Ankit! Following your advice, I used the link generated by ngrok to update my Google credentials, I use the same link to successfully start meteor in the terminal by typing this: `ROOT_URL="http://xxxxxxxx.ngrok.io" meteor` I say successfully because I see `App running at: http://xxxxxxxx.ngrok.io` in the terminal. However when I browse to link http://xxxxxxxx.ngrok.io` I see `The connection to http://xxxxxxxxx.ngrok.io was successfully tunneled to your ngrok client, but the client failed to establish a connection to the local address localhost:7123.` I fix this by... – SirBT Oct 20 '16 at 08:17
  • starting the app in another terminal by `meteor --port 7123` – SirBT Oct 20 '16 at 08:19
  • I get this error message: `W20161020-11:29:02.475(3) (oauth_server.js:398) Error in OAuth Server: Failed to complete OAuth handshake with Google. failed [400] { "error" : "redirect_uri_mismatch" } I20161020-11:29:04.653(3)? Exception while invoking method 'login' Error: Failed to complete OAuth handshake with Google. failed [400] { "error" : "redirect_uri_mismatch" }....` – SirBT Oct 20 '16 at 08:31
  • I tried `ROOT_URL=http://xxxxxxxx.ngrok.io meteor` without the quotes, but it didnt make a difference. Does it matter that I have this code in my Meteor.isClient: `Meteor.startup(function () { // Client startup method. Meteor.absoluteUrl.defaultOptions.rootUrl = 'http://5ba57b5e.ngrok.io'; }); ` – SirBT Oct 20 '16 at 08:40
  • I have no idea why it is not working with you. I did the same thing and it worked. – Ankit Oct 20 '16 at 09:34
  • http://chat.stackoverflow.com/rooms/124966/discussion-between-ankit-and-sirbt get back to this room – Ankit Oct 20 '16 at 09:35
0

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

jannis
  • 4,843
  • 1
  • 23
  • 53
Sebastian Sastre
  • 2,034
  • 20
  • 21
  • Thanks! Actually in my Meteor client startup i run: `Meteor.startup(function () { // Client startup method. Meteor.absoluteUrl.defaultOptions.rootUrl = 'http://xxxxxxxx.ngrok.io'; });` Subsequently when I then "Configure Google", I am prompted to Set Authorized Javascript Origins to: `http://xxxxxxxx.ngrok.io` and Set Authorized Redirect URI to: `http://xxxxxxxx.ngrok.io/_oauth/google`. – SirBT Oct 10 '16 at 21:29
  • Can you invite me for a chat? – SirBT Oct 10 '16 at 22:11
  • @SirBT sure, you'll find me on https://www.codementor.io/sebastianconcept – Sebastian Sastre Oct 13 '16 at 17:51
0

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.

SirBT
  • 1,580
  • 5
  • 22
  • 51