"Cannot read properties of undefined (reading 'split')" error on auth signin in angular PWA when device is offline

WolfWalter commented 2 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages npx: Installierte 1 in 0.997s System: OS: Linux 5.13 Ubuntu 20.04.3 LTS (Focal Fossa) CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 428.69 MB / 30.82 GB Container: Yes Shell: 5.8 - /usr/bin/zsh Binaries: Node: 14.19.0 - /usr/bin/node Yarn: 1.22.17 - ~/.yarn/bin/yarn npm: 6.14.16 - /usr/bin/npm Browsers: Chrome: 98.0.4758.80 Firefox: 96.0 npmPackages: @angular-builders/custom-webpack: ^13.0.0 => 13.0.0 @angular-devkit/architect: ~0.1302.0 => 0.1302.0 (0.1202.15) @angular-devkit/build-angular: ^13.1.2 => 13.2.0 (12.2.15) @angular-devkit/core: ^13.1.2 => 13.2.0 (12.2.15) @angular-devkit/core/node: undefined () @angular-devkit/schematics: ^13.1.2 => 13.2.0 (12.2.15) @angular-devkit/schematics/tasks: undefined () @angular-devkit/schematics/testing: undefined () @angular-devkit/schematics/tools: undefined () @angular-eslint/builder: ^13.0.1 => 13.0.1 @angular-eslint/eslint-plugin: ^13.0.1 => 13.0.1 @angular-eslint/eslint-plugin-template: ^13.0.1 => 13.0.1 @angular-eslint/schematics: ^13.0.0 => 13.0.1 @angular-eslint/template-parser: ^13.0.1 => 13.0.1 @angular/animations: ^13.1.1 => 13.2.0 @angular/animations/browser: undefined () @angular/animations/browser/testing: undefined () @angular/cdk: ^13.1.1 => 13.2.0 @angular/cdk/a11y: undefined () @angular/cdk/accordion: undefined () @angular/cdk/bidi: undefined () @angular/cdk/clipboard: undefined () @angular/cdk/coercion: undefined () @angular/cdk/collections: undefined () @angular/cdk/drag-drop: undefined () @angular/cdk/keycodes: undefined () @angular/cdk/layout: undefined () @angular/cdk/observers: undefined () @angular/cdk/overlay: undefined () @angular/cdk/platform: undefined () @angular/cdk/portal: undefined () @angular/cdk/scrolling: undefined () @angular/cdk/stepper: undefined () @angular/cdk/table: undefined () @angular/cdk/testing: undefined () @angular/cdk/testing/protractor: undefined () @angular/cdk/testing/selenium-webdriver: undefined () @angular/cdk/testing/testbed: undefined () @angular/cdk/text-field: undefined () @angular/cdk/tree: undefined () @angular/cli: ^13.1.2 => 13.2.0 @angular/common: ^13.1.1 => 13.2.0 @angular/common/http: undefined () @angular/common/http/testing: undefined () @angular/common/testing: undefined () @angular/common/upgrade: undefined () @angular/compiler: ^13.1.1 => 13.2.0 @angular/compiler-cli: ^13.1.1 => 13.2.0 @angular/compiler/testing: undefined () @angular/core: ^13.1.1 => 13.2.0 @angular/core/testing: undefined () @angular/forms: ^13.1.1 => 13.2.0 @angular/language-service: ^13.1.1 => 13.2.0 @angular/material: ^13.1.1 => 13.2.0 @angular/material/autocomplete: undefined () @angular/material/autocomplete/testing: undefined () @angular/material/badge: undefined () @angular/material/badge/testing: undefined () @angular/material/bottom-sheet: undefined () @angular/material/bottom-sheet/testing: undefined () @angular/material/button: undefined () @angular/material/button-toggle: undefined () @angular/material/button-toggle/testing: undefined () @angular/material/button/testing: undefined () @angular/material/card: undefined () @angular/material/card/testing: undefined () @angular/material/checkbox: undefined () @angular/material/checkbox/testing: undefined () @angular/material/chips: undefined () @angular/material/chips/testing: undefined () @angular/material/core: undefined () @angular/material/core/testing: undefined () @angular/material/datepicker: undefined () @angular/material/datepicker/testing: undefined () @angular/material/dialog: undefined () @angular/material/dialog/testing: undefined () @angular/material/divider: undefined () @angular/material/divider/testing: undefined () @angular/material/expansion: undefined () @angular/material/expansion/testing: undefined () @angular/material/form-field: undefined () @angular/material/form-field/testing: undefined () @angular/material/form-field/testing/control: undefined () @angular/material/grid-list: undefined () @angular/material/grid-list/testing: undefined () @angular/material/icon: undefined () @angular/material/icon/testing: undefined () @angular/material/input: undefined () @angular/material/input/testing: undefined () @angular/material/list: undefined () @angular/material/list/testing: undefined () @angular/material/menu: undefined () @angular/material/menu/testing: undefined () @angular/material/paginator: undefined () @angular/material/paginator/testing: undefined () @angular/material/progress-bar: undefined () @angular/material/progress-bar/testing: undefined () @angular/material/progress-spinner: undefined () @angular/material/progress-spinner/testing: undefined () @angular/material/radio: undefined () @angular/material/radio/testing: undefined () @angular/material/select: undefined () @angular/material/select/testing: undefined () @angular/material/sidenav: undefined () @angular/material/sidenav/testing: undefined () @angular/material/slide-toggle: undefined () @angular/material/slide-toggle/testing: undefined () @angular/material/slider: undefined () @angular/material/slider/testing: undefined () @angular/material/snack-bar: undefined () @angular/material/snack-bar/testing: undefined () @angular/material/sort: undefined () @angular/material/sort/testing: undefined () @angular/material/stepper: undefined () @angular/material/stepper/testing: undefined () @angular/material/table: undefined () @angular/material/table/testing: undefined () @angular/material/tabs: undefined () @angular/material/tabs/testing: undefined () @angular/material/toolbar: undefined () @angular/material/toolbar/testing: undefined () @angular/material/tooltip: undefined () @angular/material/tooltip/testing: undefined () @angular/material/tree: undefined () @angular/material/tree/testing: undefined () @angular/platform-browser: ^13.1.1 => 13.2.0 @angular/platform-browser-dynamic: ^13.1.1 => 13.2.0 @angular/platform-browser-dynamic/testing: undefined () @angular/platform-browser/animations: undefined () @angular/platform-browser/testing: undefined () @angular/router: ^13.1.1 => 13.2.0 @angular/router/testing: undefined () @angular/router/upgrade: undefined () @angular/service-worker: ^13.1.1 => 13.2.0 @angular/service-worker/config: undefined () @aws-sdk/client-appsync: ^3.43.0 => 3.48.0 @capacitor-community/barcode-scanner: ^2.0.1 => 2.0.1 @capacitor-community/http: ^1.2.0 => 1.4.1 @capacitor/android: 3.4.0 => 3.4.0 @capacitor/app: ^1.0.3 => 1.1.0 @capacitor/cli: ^3.4.0 => 3.4.0 @capacitor/clipboard: ^1.0.2 => 1.0.7 @capacitor/core: 3.4.0 => 3.4.0 @capacitor/filesystem: ^1.0.2 => 1.1.0 @capacitor/geolocation: ^1.0.2 => 1.3.1 @capacitor/haptics: ^1.0.3 => 1.1.4 @capacitor/ios: 3.4.0 => 3.4.0 @capacitor/keyboard: ^1.0.3 => 1.2.1 @capacitor/push-notifications: ^1.0.7 => 1.0.9 @capacitor/share: ^1.0.2 => 1.1.1 @capacitor/splash-screen: ^1.0.2 => 1.2.1 @capacitor/status-bar: ^1.0.3 => 1.0.7 @ionic/angular: 6.0.8-dev.1644430127.1b9bb92 => 6.0.8-dev.1644430127.1b9bb92 @ionic/angular-toolkit: ^5.0.0 => 5.0.3 @ionic/storage-angular: ^3.0.6 => 3.0.6 @ngx-translate/core: ^14.0.0 => 14.0.0 @robingenz/capacitor-app-update: ^1.0.0 => 1.3.1 @types/file-saver: ^2.0.1 => 2.0.5 @types/fs-extra: ^9.0.0 => 9.0.13 @types/jasmine: ^3.7.6 => 3.10.3 @types/jasminewd2: ^2.0.3 => 2.0.10 @types/lodash-es: ^4.17.3 => 4.17.5 @types/node: 14.x.x => 14.18.9 (17.0.12) @types/zen-observable: ^0.8.1 => 0.8.3 @typescript-eslint/eslint-plugin: ^5.8.1 => 5.10.1 @typescript-eslint/parser: ^5.8.1 => 5.10.1 amplify-graphql-docs-generator: ^2.2.4 => 2.2.4 amplify-graphql-types-generator: ~2.8.3 => 2.8.5 aws-amplify: ^4.3.14 => 4.3.14 capacitor-native-settings: ^0.1.0 => 0.1.0 capacitor-wifi: git://github.com/solvis-bs/capacitor-wifi#c87cf0e => 0.0.2 compare-versions: ^4.0.1 => 4.1.3 cordova-res: ^0.15.2 => 0.15.4 dayjs: ^1.10.5 => 1.10.7 eslint: ^8.6.0 => 8.7.0 eslint-config-prettier: ^8.1.0 => 8.3.0 eslint-plugin-import: ^2.22.1 => 2.25.4 eslint-plugin-jsdoc: ^37.5.1 => 37.7.0 eslint-plugin-prefer-arrow: ^1.2.2 => 1.2.3 eslint-plugin-prettier: ^4.0.0 => 4.0.0 example-typescript: 1.0.0 file-saver: ^2.0.2 => 2.0.5 filesize: ^8.0.6 => 8.0.7 fs-extra: ^10.0.0 => 10.0.0 (9.1.0, 8.1.0) highcharts: ^9.3.1 => 9.3.2 highcharts-angular: ^3.0.0 => 3.0.0 jasmine-core: ~4.0.0 => 4.0.0 (2.8.0, 3.99.0) jasmine-spec-reporter: ~7.0.0 => 7.0.0 karma: ~6.3.2 => 6.3.12 karma-chrome-launcher: ~3.1.0 => 3.1.0 karma-coverage-istanbul-reporter: ~3.0.2 => 3.0.3 karma-jasmine: ~4.0.0 => 4.0.1 karma-jasmine-html-reporter: ^1.6.0 => 1.7.0 lib: undefined (0.0.1) license-webpack-plugin: ^4.0.0 => 4.0.0 (2.3.20) lodash-es: ^4.17.15 => 4.17.21 node-example: 1.0.0 prettier: ^2.3.0 => 2.5.1 (1.19.1) protractor: ~7.0.0 => 7.0.0 protractor-example: 1.0.0 rxjs: ~6.6.3 => 6.6.7 (7.5.2) rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/internal-compatibility: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () sc-ts: ^1.1.48 => 1.1.48 source-map-explorer: ^2.4.2 => 2.5.2 swiper: ^7.4.1 => 7.4.1 swiper_angular: 0.0.1 ts-node: ^10.0.0 => 10.4.0 tslib: ^2.0.0 => 2.3.1 (2.3.0, 1.14.1) typescript: ~4.5.4 => 4.5.5 (4.3.5) typescript-example: 1.0.0 zone-mix: undefined () zone-node: undefined () zone-testing: undefined () zone.js: ~0.11.4 => 0.11.4 zone.js/async-test: undefined () zone.js/async-test.min: undefined () zone.js/fake-async-test: undefined () zone.js/fake-async-test.min: undefined () zone.js/jasmine-patch: undefined () zone.js/jasmine-patch.min: undefined () zone.js/long-stack-trace-zone: undefined () zone.js/long-stack-trace-zone.min: undefined () zone.js/mocha-patch: undefined () zone.js/mocha-patch.min: undefined () zone.js/proxy: undefined () zone.js/proxy.min: undefined () zone.js/sync-test: undefined () zone.js/sync-test.min: undefined () zone.js/task-tracking: undefined () zone.js/task-tracking.min: undefined () zone.js/webapis-media-query: undefined () zone.js/webapis-media-query.min: undefined () zone.js/webapis-notification: undefined () zone.js/webapis-notification.min: undefined () zone.js/webapis-rtc-peer-connection: undefined () zone.js/webapis-rtc-peer-connection.min: undefined () zone.js/webapis-shadydom: undefined () zone.js/webapis-shadydom.min: undefined () zone.js/wtf: undefined () zone.js/wtf.min: undefined () zone.js/zone-bluebird: undefined () zone.js/zone-bluebird.min: undefined () zone.js/zone-error: undefined () zone.js/zone-error.min: undefined () zone.js/zone-legacy: undefined () zone.js/zone-legacy.min: undefined () zone.js/zone-patch-canvas: undefined () zone.js/zone-patch-canvas.min: undefined () zone.js/zone-patch-cordova: undefined () zone.js/zone-patch-cordova.min: undefined () zone.js/zone-patch-electron: undefined () zone.js/zone-patch-electron.min: undefined () zone.js/zone-patch-fetch: undefined () zone.js/zone-patch-fetch.min: undefined () zone.js/zone-patch-jsonp: undefined () zone.js/zone-patch-jsonp.min: undefined () zone.js/zone-patch-message-port: undefined () zone.js/zone-patch-message-port.min: undefined () zone.js/zone-patch-promise-test: undefined () zone.js/zone-patch-promise-test.min: undefined () zone.js/zone-patch-resize-observer: undefined () zone.js/zone-patch-resize-observer.min: undefined () zone.js/zone-patch-rxjs: undefined () zone.js/zone-patch-rxjs-fake-async: undefined () zone.js/zone-patch-rxjs-fake-async.min: undefined () zone.js/zone-patch-rxjs.min: undefined () zone.js/zone-patch-socket-io: undefined () zone.js/zone-patch-socket-io.min: undefined () zone.js/zone-patch-user-media: undefined () zone.js/zone-patch-user-media.min: undefined () npmGlobalPackages: ask-cli: 2.23.0 yarn: 1.22.11 ```

Describe the bug

When calling await this.auth.signIn(this.loginDetails.email, this.loginDetails.password); in a offline Angular 13 PWA. An error with the name Type Error and with the message Cannot read properties of undefined (reading 'split')is thrown. I tracked it down to this line: https://github.com/aws-amplify/amplify-js/blob/e8c905b46c325ff6e50d69e10f3491409ca9e921/packages/amazon-cognito-identity-js/src/Client.js#L114

I can only reproduce the error when it is deployed as an PWA on S3. When I ran the app locally an NetworError is thrown.

Expected behavior

Should throw a error with err.code === NetworkError.

Reproduction steps

create a Angular PWA with ampliy auth
deploy the PWA
run the PWA
disconnect from the internet
try to signin and check the thrown error

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

oemer-aran commented 1 year ago

I had the same error, but not in a PWA. I was using nuxt and while migrating from nuxt 2 to nuxt 3 changed the port from 8081 to 3000. Changing the port back to 8081 fixed it. Probably a CORS issue is not handled correctly by amplify. Oddly enough, Auth.signIn sometimes still worked, while other times it didn't.

The error was caused at the exact same location in Client.js.

I am using "aws-amplify": "^5.3.1",

cwomack commented 10 months ago

With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved! Please refer to our release announcement, migration guide, and documentation for more information.

aws-amplify / amplify-js