Let's encrypt CA websocket fails on Android api < 20

[perrosnk]

Is this a bug report?

Yes

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 9.3.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.1 AI-143.2915827

Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.3 => 0.49.3
Target Platform: iOS (10.3)

Steps to Reproduce

I have a node server which uses Let's Encrypt CA. I try to connect to it using websockets.
On iOS and newer Android versions (API > 20) it connects successfully.
When running on older Android versions (both on simulator and actual devices) it never connects.
I have tried to connect using older Android version to a server that's not using Let's encrypt CA, and it also connects successfully.

The error I get when using this:

    ws.onerror = (e) => {
      // an error occurred
      console.log(e.message);
    };

is Connection closed by peer

and this:

    ws.onclose = (e) => {
      // connection closed
      console.log(e.code, e.reason);
    };

logs undefined, undefined

Expected Behavior

Connect to the server

Actual Behavior

Fails

Reproducible Demo

    var ws = new WebSocket('wss://example.now.sh');

    ws.onerror = (e) => {
      // an error occurred
      console.log(e.message);
    };

    ws.onclose = (e) => {
      // connection closed
      console.log(e.code, e.reason);
    };

[perrosnk]

It seems it is indeed a problem with Okhttp.
Based on this comment I need to set up a custom trust store that trusts LetsEncrypt like this example.

@tuncaulubilge Do you have an idea how can I achieve this in react native?

[tuncaulubilge]

There was a way to instantiate your own OkHttpClient and provide it to react-native, but OkHttpClientProvider has been broken for some time. Here is the issue: #13487

Another option is to fork the react-native repo and add your custom trust store to okhttp

[perrosnk]

@tuncaulubilge Thank you very much for your help!
I changed my files as mentioned in this commit and mentioned in this comment

As far as I understand I also need to change MainReactPackage in MainApplication.java and NetworkingModuleUtils.java as mentioned in this comment

But then how can I instantiate your own OkHttpClient and provide it to react-native in order to provide a custom trust store?

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[perrosnk]

I fixed it based on this comment and this gist.

[svlada]

This issue should be reopened.

[perrosnk]

@svlada From what I understood, it's more a problem with okhttp and android that a problem with react native

[shamilsun]

@perrosnk please provide your solution. Or example please

[perrosnk]

@shamilsun put this into your MainApplication.java file:

  private void upgradeSecurityProvider() {
    ProviderInstaller.installIfNeededAsync(this, new ProviderInstallListener() {
        public void onProviderInstalled() {
          // You can do something here
        }

        public void onProviderInstallFailed(int errorCode, Intent recoveryIntent) {
            GooglePlayServicesUtil.showErrorNotification(errorCode, MainApplication.this);
        }
    });
  }

I hope that helps

EDIT:
Add this too:

  public void onCreate() {
    super.onCreate();
    upgradeSecurityProvider();
  }