search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.36k stars 2.1k forks source link

Hub not receiving a Promise in ionic app for android #5959

Open Andyluchina opened 3 years ago

Andyluchina commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Andyluchina commented 3 years ago

@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 commented 3 years ago

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

Andyluchina commented 3 years ago

@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