Willing to pay: err_connection_refused android

[tharrington0]

I am using the cordova in-app-browser plugin to oauth into salesforce. This used to work fine for both android and iOS but it seems to be broken now that I have updated capacitor and android to API 31 I am getting a variety of errors depending on my configuration. The original error was net::ERR_CLEARTEXT_NOT_PERMITTED

Which was solved by adding cleartext: true to my capacitor.config.ts file. But now I am getting ERR_CONNECTION_REFUSED.

Here is my capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'org.myapp.app',
  appName: 'MyApp',
  webDir: 'www',
  bundledWebRuntime: false,
  server: {
    // url: 'http://localhost',
    cleartext: true,
    hostname: '127.0.0.1'
  }
};

export default config;

Here is my ionic info:

Ionic:

   Ionic CLI                     : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.9
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.1
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.1
   @capacitor/ios     : 3.4.1

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v16.13.2 (/usr/local/bin/node)
   npm    : 8.1.2
   OS     : macOS Monterey

And finally the code that creates the browser:

const clientId = this.myDataService.getAppId();
    const redirectUri = 'http://localhost/callback';
    const loginUrl  = 'https://mysforg.force.com/services/oauth2/authorize?display=touch' +
          '&response_type=token&client_id=' + clientId +
          '&redirect_uri=' + redirectUri;
    console.log('### loading login url: ' + loginUrl);
    const options = 'location=no,toolbarposition=top,enableViewportScale=yes,closebuttoncaption=Cancel,' +
      'clearsessioncache=yes,clearcache=yes';
    console.log('### loginUrl: ' + loginUrl);
    const browser = this.iab.create(loginUrl, '_blank', options);

    console.log('### loaded');
    browser.on('loadstart').subscribe(
      (event) => {
        console.log('### got uri: ' + redirectUri);
        // if(event.url.substr(0, redirectUri.length) === redirectUri) {
        //   this.handleLoginEvent(event.url, browser);
        // }
      }, err => {
        console.log('### got an error: ', err);
      }
    );

[thomasvidas]

It looks like you’re running both the Android emulator and your API on the same network, correct? Android emulator’s localhost is the emulator’s localhost, not your computer. This is unlike the iOS simulator where localhost on the sim is localhost for your computer.

In your Capacitor code, to reach your local API, try replacing http://localhost/callback with http://10.0.2.2/callback. On the default Android emulator, 10.0.2.2 will forward requests to your computer’s localhost.

For more info, check out the Android emulator networking guide and this StackOverflow post.

I only accept thanks and high fives as payment!

[tharrington0]

@thomasvidas

It looks like you’re running both the Android emulator and your API on the same network, correct? Android emulator’s localhost is the emulator’s localhost , not your computer. This is unlike the iOS simulator where localhost on the sim is localhost for your computer.

No, I am not running it on the same network. The way it works is there is a login website that is opened in in app browser. This is not being run locally, it is on the Salesforce.com platform. When the user enters their credentials within salesforce, the in app browser parses out the token and then they are authenticated in the app. But the callback here does not open. In the past, I had used the cordova whitelist plugin.

[thomasvidas]

What is the URL for the ERR_CONNECTION_REFUSED? Is it for force.com or for 127.0.0.1? The Salesforce URL is using https which wouldn’t have triggered the ERR_CLEARTEXT_NOT_PERMITTED error; which led me to believe that your error was happening during callback, due to the localhost issue. My mistake!

[tharrington0]

Do you have any other thoughts? Please let me know if you’re willing to do a phone call!

[tharrington0]

The connection refused is the localhost connection, IE the redirect URI

I have attached a screenshot showing this issue.

[tharrington0]

@thomasvidas If you go here and scroll down, you will see people facing a similiar issue as well:

bug: setting anything in "allowNavigation" capacitor.config.json will provoke ERR_CONNECTION_REFUSED

[dvtopiya]

@tharrington0 I am facing the same issue. Can you please let me know whether you got any solution yet?

[michaelkariv]

Same here. I have created a minimalistic Angular 14 app. I use Capacitor, Android only, Trapeze for configuration. Trapeze allows me to wipe the android folder and rebuild it from scratch each time I make a change.

I have placed this into a public repository. I’d be grateful if anyone could try it and see if it works for you, or tell me what I am doing wrong. I incorporated all the advice I found on the StackOverflow, to no good result

The repo: Remote Debugging of Angular 14 + Capacitor 4 Hybrid App on Android - Fails Remote Debugging - Source Maps access

[Jean-PierreScholtz]

Any update on this error? I had been testing an Ionic App just fine an hour ago. Got the cleartext error resolved, then got hit with the connection refused?

[mani0011]

In your AndroidManifest.xml add

cleartextTrafficPermitted="true"

in your application tag.

[Johanson]

Did you mean to say to add android:usesCleartextTraffic=“true”? Because there is no such attribute named android:cleartextTrafficPermitted (not sure where you got that from).

In any case, it still doesn’t work. Same error.

This project has worked for years. Now suddenly completely broken. No idea how to fix it.

[mvaljento0]

Have you tried running with --external argument?

For example I’m running in emulator with the following command:

ionic cap run android --external --livereload --port=8010 --target=Pixel_4_API_Tiramisu

[PURUSHOTHAM-REDDY-N]

step-1 : Run the emulator before serving the project

Navigate to the Android SDK Tools directory: Use the cd command to navigate to the directory where the Android SDK tools are located. By default, it is usually located at C:\Users\YourUsername\AppData\Local\Android\Sdk\emulator . Replace YourUsername with your actual Windows username.

List available emulators: Run the following command to see a list of available emulators:
command => emulator -list-avds

1. This command will display the names of the Android Virtual Devices (AVDs) that you have created.
2. Launch the emulator: To launch an emulator, use the following command, replacing avd_name with the name of the emulator you want to start:

command => emulator -avd avd_name

step 2 : run the capacitor serve

use this command

ionic cap run android --external --livereload --port=8010 --target=Pixel_4_API_33

you can use any target that you have