Hub not receiving a Promise in ionic app for android

[Andyluchina]

I am working on an ionic app that uses amplify and cognito to do federated sigin.
sign in code as follows:

  doLoginGoogle() {
    this.ngZone.run(async () => {
      try {
        await Auth.federatedSignIn({
          customProvider: "google"
        });
      } catch (error) {
        console.log(error);
      }
    });
  }

and then it opens up the broswer and goes back, and then I use deeplinking to open my app again where I do

  this.deeplinks
    .route({
      "/login/": {}
    })
    .subscribe(
      match => {
        console.log("match here");
        console.log(match.$args);
        console.log(match.$link);
        console.log(match.$route);
        document.location.href =
          "http://localhost/login/#" + match.$link.fragment;
      },
      nomatch => {
        console.log("no match here andy", document.URL, nomatch);
      }
    );

This recreates the request, and I have a hub listening which is

Hub.listen("auth", async data => {
  console.log(data);
  switch (data.payload.event) {
    case "signIn":
      console.log("SIGN IN");
      // this.state.authState = 'signedIn';
      this.state.user = data.payload.data;
      console.log(data);
      await this.dataSvc.updateUserInfoGoogle(data.payload.data);
      this.navCtrl.navigateRoot("/tabs/home");
      break;
    case "signIn_failure":
      // this.state.authState = 'signIn';
      this.state.user = null;
      this.state.authError = data.payload.data;
      break;
    case "signOut":
      this.state.user = null;
      this.state.authError = null;
      break;
    case "customOAuthState":
      this.state.customState = null;
      this.state.authError = null;
      break;
    default:
      break;
  }
});

However the hub always gets soemthing like this
event type: sigin_failure
data:
TypeError: the given value is not a Promise
at Object.push../node_modules/@aws-sdk/stream-collector-browser/build/index.js.exports.streamCollector (http://localhost/vendor.js:232048:10)
at collectBody (http://localhost/vendor.js:117186:21)
at collectBodyString (http://localhost/vendor.js:117190:12)
at parseBody (http://localhost/vendor.js:117205:12)
at http://localhost/vendor.js:114513:42
at step (http://localhost/polyfills.js:3223:23)
at Object.next (http://localhost/polyfills.js:3204:53)
at http://localhost/polyfills.js:3197:71
at new ZoneAwarePromise (http://localhost/polyfills.js:4261:29)
at __awaiter (http://localhost/polyfills.js:3193:12)

The ionic app works fine in the web browser but fails in android......
not sure what to do here. Can someone please offer some insights on this issue?

[Andyluchina]

not sure if this issue is with the auth publishing a bad event or the hub not being able to parse events as promise

[Andyluchina]

the issue is really with the stream-collector-browser
Solution: go into node_modules>>@AWS-SDK>>stream-collector-browser>>build>>index.js
Change the existing code to

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.streamCollector = function(stream) {
var reader = stream.getReader();
return reader.read().then(({ done, value }) => {
return value;
});
};

not sure if I need to do a pull request or anything

[Andyluchina]

related article here
https://medium.com/@tobinc/create-a-multi-platform-app-using-ionic-4-aws-amplify-in-app-oauth-with-social-idp-deep-linking-6b8de9bc6878

[oliverandersencox]

@Andyluchina I don't have this folder and I'm on the most recent amplify?

[Andyluchina]

@oliverandersencox
"@ionic/angular": "^4.11.10",
"aws-amplify": "^3.0.10",
"aws-amplify-angular": "^5.0.10"

This is really under @AWS-SDK
Here are my relevant dependencies.

https://www.npmjs.com/package/@aws-sdk/stream-collector-browser

[oliverandersencox]

odd, after i install those into npm, the package is still no there

[Andyluchina]

@oliverandersencox
"dependencies": {
"@angular/common": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@aws-amplify/ui-angular": "^0.2.4",
"@ionic-native/camera": "^5.19.1",
"@ionic-native/clipboard": "^5.19.1",
"@ionic-native/core": "^5.0.0",
"@ionic-native/deeplinks": "^5.26.0",
"@ionic-native/http": "^5.19.1",
"@ionic-native/mobile-accessibility": "^5.22.0",
"@ionic-native/nfc": "^5.19.1",
"@ionic-native/qr-scanner": "^5.19.1",
"@ionic-native/screenshot": "^5.19.1",
"@ionic-native/social-sharing": "^5.19.1",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic-native/toast": "^5.19.1",
"@ionic/angular": "^4.11.10",
"@ionic/storage": "^2.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"aws-amplify": "^3.0.10",
"aws-amplify-angular": "^5.0.10",
"axios": "^0.19.2",
"com.darktalker.cordova.screenshot": "^0.1.6",
"cordova-android": "^8.1.0",
"cordova-clipboard": "^1.3.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-advanced-http": "^2.3.1",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-network-information": "git+https://github.com/apache/cordova-plugin-network-information.git",
"cordova-plugin-qrscanner": "^3.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.6.3",
"cordova-plugin-x-toast": "^2.7.2",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"hammerjs": "^2.0.8",
"paulstelzer-ionic-angular-toolkit": "^2.0.0",
"phonegap-nfc": "^1.0.4",
"phonegap-plugin-mobile-accessibility": "^1.0.5",
"rxjs": "~6.5.5",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},

Here is a list of all the dependencies. This, I believe, is a utilty dependency under @AWS-SDK (if you just install @AWS-SDK you should definitely see it).
As the oauth flow will extract the acess token from the url string, stream-collector-browser basically does that. I think setting up basic amplify cognito with ionic and angular with give you this issue.

This is the article I followed.
https://medium.com/@tobinc/create-a-multi-platform-app-using-ionic-4-aws-amplify-in-app-oauth-with-social-idp-deep-linking-6b8de9bc6878

I personally believe that it was because the a lot of versions of android webview does not support Response, thus not working, and what I did is to use a alternative way to read the stream as mentioend in the previous comments.
https://developer.mozilla.org/en-US/docs/Web/API/Response