Willing to pay: err_connection_refused android

Capacitor
#1

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);
      }
    );
#2

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! :grinning_face_with_smiling_eyes:

#3

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.

#4

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!

#5

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

#6

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

Screen Shot 2022-04-07 at 12.44.05 AM
Screen Shot 2022-04-07 at 12.44.05 AM841×1722 104 KB

I have attached a screenshot showing this issue.

#7

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

#8

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

#9

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

#10

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

#11

In your AndroidManifest.xml add

cleartextTrafficPermitted="true"

in your application tag.