Meteor 2.7.3: simple todo list buttons not tappable?

Hi all,

So I managed to get my simple todo list app installed on my phone, trouble is the login buttons don’t work. I tap them and nothing happens.

When compiling the app I got these warnings:

WARNING: It looks like you are using OAuth2 login in your app. Meteor's OAuth2 implementation does not
         currently work with mobile apps in local development mode, except in the iOS simulator. You can run
         the iOS simulator with 'meteor run ios'. For additional workarounds, see
         https://github.com/meteor/meteor/wiki/OAuth-for-mobile-Meteor-clients.
                                              
WARNING: You are testing your app on a remote device. For the mobile app to be able to connect to the local
         server, make sure your device is on the same network, and that the network configuration allows
         clients to talk to each other (no client isolation).

Port forwarding has failed:

I’m thinking that its a communication issue between my laptop and phone. If so I was thinking I could test it by changing the mongo connection details to use the one that is used on galaxy when I deployed it. I don’t see any mongo connection details in the code though.

It is surprising that even tapping the “Login with Github” button doesn’t do anything at all, not even fail.

Anyone got any ideas? Must be something simple surely.

It seems that Meteor.loginWithPassword() isn’t even being invoked on the app. I’m pretty stumped with this at the moment.

  const submit = e => {
    e.preventDefault();
    Meteor.loginWithPassword(username, password, function(){
      console.log('login failed');
      alert('login failed');

      /*
         The above login failed messages show on the browser console 
         but not in the app when the wrong username/password is submitted
      */

    });

    alert('submitted: ' + username + ' | ' + password);
    /*
     This alert is displayed on the browser and app
   */
  };

Ok, if you put a console.log before Meteor.loginWithPassword just to male sure you get that far.
If you get that far and Meteor.login… does exactly nothing with no message to console, it is likely that you are not talking to your server.

When your android device is connected, your debugger should look like this (photo - check the WebView)

Can you console.log a Meteor.status() and make sure you are connected to your server.

Screen Shot 2022-07-15 at 10.33.20 PM

I added in that line, so my code now looks like this:

  const submit = e => {
    e.preventDefault();
    console.log('attempting login');
    Meteor.loginWithPassword(username, password, function(){
      console.log('login failed');
      alert('login failed');
    });
    alert('submitted: ' + username + ' | ' + password);
  };

This is what I see on the dev tools:

well … that is pretty clear :slight_smile: and explains your “isn’t even being invoked”.

ok, I’d check your script for start.

Step1:
Let’s make sure you start script contains 3 things:
a ROOT, a port and a mobile server.

ROOT_URL=http://192.168.1.72:3000 meteor run --mobile-server 192.168.1.72:3000 android-device --settings settings.json --port=3000

If you already had those, Step 2.

Add some access rules for the app in your mobile-config.js file, such as:

App.accessRule('*')
App.accessRule('*.192.168.1.72:3500/*') or App.accessRule('192.168.1.72:3500')

// this one is for a minimum TLS for your production server connection:

App.accessRule('https://your.mobile.server.com/', {
  'minimum-tls-version': 'TLSv1.2',
  'requires-forward-secrecy': false
})

Ok, didn’t have any of that. Silly question, but should the IP address that’s being set be the IP of the phone? I’ve tried various combinations and I’m only getting the connection refused. Just set it back to the IP you originally used for now.

Is my mobile-config.js file in the correct place?

in my main.jsx file:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '/imports/ui/App';

Meteor.startup(() => {

  ROOT_URL="http://192.168.1.72:3000 meteor run --mobile-server 192.168.1.72:3000 android-device --settings settings.json --port=3000";

  render(<App/>, document.getElementById('react-target'));
});

These have to be you start script in package.json.
Or run it in the console instead of your meteor run (which is contained in that script)

1 Like

I see now, except I’m still not able to connect.

  "scripts": {
    "start": "ROOT_URL=http://192.168.1.101:3000 meteor run --mobile-server 192.168.1.101:3000 android-device --settings settings.json --port=3000",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },

I don’t have a settings.json file so I removed that part and ran from the command line, no success. Also tried the IP and PORT of my phone and got failed: Connection closed before receiving a handshake response

Everything I’ve tried doesn’t connect. My firewall is currently disabled, not sure what else I can do.

Any ideas?

I’m thinking the problem could be related to this:

Can’t create a websocket connection.

Your mobile config file is in the right place but beyond this there is not much I can say here. The communication is too fragmented. Let me give you my WhatsApp and we can try a 1:1 see if we get anywhere: +971 55 6036403.

Awesome, thank you very much. I think its an IP address/networking issue, I’ll do a little more research first.

This is what I’ve found. Could this be an adb reverse issue of some sort?

I’ve installed a network analysis app on my phone and I can ping my Ubuntu IP address 192.168.115.214 but port 3000 is blocked. If I open a browser on my win 11 laptop and go to 192.168.115.214:3000 my app appears.

I’m getting nowhere fast, so if you fancy a challenge on whatsapp that would be awesome. Here’s where I’m currently at:

I’ve tried:

`$ adb reverse tcp:3000 tcp:3000

3000`

I’ve also tried ngrok, but wouldn’t work anyway because of the default page that ngrok displays:
https://a008-92-40-194-117.eu.ngrok.io/

I can access the the simple todo list via the web on my laptop and mobile but not via the app.

Can access via local IP address:

If I switch off Ngrok:

Switching on Ngrok again and trying to access at 127.0.0.1:3000

My start script:
"start": "ROOT_URL=https://a008-92-40-194-117.eu.ngrok.io meteor run --mobile-server https://a008-92-40-194-117.eu.ngrok.io android-device --port=3000",

Also tried adding the following to my manifest file, still no success:

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
    <application android:networkSecurityConfig="@xml/network_security_config" android:usesCleartextTraffic="true">
    </application>

and in xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">a008-92-40-194-117.eu.ngrok.io</domain>
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>

@paulishca Thank you again for your time earlier, much appreciated. Also made a little progress!

Ran these commands:

netsh interface portproxy delete v4tov4 listenport=3000
netsh advfirewall firewall delete rule name=3000

netsh interface portproxy add v4tov4 listenport=3000 connectport=3000 connectaddress=172.18.11.70
netsh advfirewall firewall add rule name=3000 dir=in action=allow protocol=TCP localport=3000

Now see this:

image

I can now access the app via the web on mobile using the IP:PORT:
192.168.1.105:3000

I still get the error when running the app though, its still trying to create a socket using IP:
172.18.11.70

I searched through all the files in the project and found the IP in this file:

~/simple-todos-react2/.meteor/local/cordova-build/platforms/android/app/build/intermediates/merged_assets/debug/out/www/application/index.html

Looks like this is generated at the time when the project is run, I tried manually changing it but that didn’t work, wasn’t really expecting it to.

Is it possible something is being cached somewhere?

Thank you again :slight_smile:

just delete your app/.meteor/local/cordova-build folder and start over

I tried that, also tried deleting the bundler-cache folder, also tried creating a new project and copying the project files to it and I got the same result.

I was thinking of hard coding my 192.168.1.105 IP address in the hot-module-replacement.js script just to see if that works. I had a search for it and there’s loads of them and it seems that it gets overwritten when generating the app. Do you know where the script lives so that I can modify it just to test if the hard coded IP works?

Wonder if this issue could be a Meteor bug too :thinking:

You can try hard coding it at meteor/client.js at 9c379f7b4b5061e9e97e2558a32840f1da50e29f · meteor/meteor · GitHub. You probably will want to first copy the hot-module-replacement package into your app’s packages folder first.

There was an issue opened yesterday that looks similar: Websocket/HMR issue App doesn't connect to device · Issue #12096 · meteor/meteor · GitHub