AWSAccessKeyId set as undefined from Android platform but works correctly on iOS or browser

[alex-iancu]

Describe the bug

We developed an app using the MEAN stack. We integrated it with AWS S3 for data storage using Amplify by following this tutorial. We also enabled Auth in this step. We are not signing in the user, and we are only using the unauthenticated user in the app at this point.

When running the application on the iOS emulator or in the browser, the integration works fine, we can add files, list the files in the bucket and download the files. However, on android, in the result from Storage.get('filename'), the AWS access key ID is set to undefined. For example:
"https://bucketname.s3.eu-west-2.amazonaws.com/public/test.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=**undefined**%2F20200408%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200408T151352Z&X-Amz-Expires=900&X-Amz-Signature=bbad7466c769f40d6378d93ea86f77215b8ae011c30d3cc89a6ea2a452791c06&X-Amz-SignedHeaders=host&x-amz-user-agent=aws-sdk-js-v3-%40aws-sdk%2Fclient-s3%2F1.0.0-beta.3%20Mozilla%2F5.0%20%28Linux%3B%20Android%209%3B%20AOSP%20on%20IA%20Emulator%20Build%2FPSR1.180720.117%3B%20wv%29%20AppleWebKit%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Version%2F4.0%20Chrome%2F69.0.3497.100%20Mobile%20Safari%2F537.36%20aws-amplify%2F3.2.0%20js&x-id=GetObject"

As a result, when we try to download the file, the download fails and we receive the following error message:

[console.log]: "download failed: {\"code\":1,\"source\":\"https://bucketname.s3.eu-west-2.amazonaws.com/public/test.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=undefined%2F20200408%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200408T154640Z&X-Amz-Expires=900&X-Amz-Signature=f07580def29f83577f66b34128f7978763591af8c01a71d67fbc93af0b4f4ec5&X-Amz-SignedHeaders=host&x-amz-user-agent=aws-sdk-js-v3-%40aws-sdk%2Fclient-s3%2F1.0.0-beta.3%20Mozilla%2F5.0%20%28Linux%3B%20Android%209%3B%20AOSP%20on%20IA%20Emulator%20Build%2FPSR1.180720.117%3B%20wv%29%20AppleWebKit%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Version%2F4.0%20Chrome%2F69.0.3497.100%20Mobile%20Safari%2F537.36%20aws-amplify%2F3.2.0%20js&x-id=GetObject\",\"target\":\"file:///data/user/0/io.ionic.starter/files/\",\"http_status\":403,\"body\":\"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?>\\n<Error><Code>InvalidAccessKeyId</Code><Message>**The AWS Access Key Id you provided does not exist in our records.**</Message><AWSAccessKeyId>undefined</AWSAccessKeyId><RequestId>E9925386223F5ACB</RequestId><HostId>BtCj7yyGeCkArqPyAx7ksOuMb2G91XmKQpSGTwjW8O05IEJuPSZIhBEwOgZfYHH+ypr56qkH8/Y=</HostId></Error>\",\"exception\":\"https://bucketname.s3.eu-west-2.amazonaws.com/public/test.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=undefined%2F20200408%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200408T154640Z&X-Amz-Expires=900&X-Amz-Signature=f07580def29f83577f66b34128f7978763591af8c01a71d67fbc93af0b4f4ec5&X-Amz-SignedHeaders=host&x-amz-user-agent=aws-sdk-js-v3-%40aws-sdk%2Fclient-s3%2F1.0.0-beta.3%20Mozilla%2F5.0%20%28Linux%3B%20Android%209%3B%20AOSP%20on%20IA%20Emulator%20Build%2FPSR1.180720.117%3B%20wv%29%20AppleWebKit%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Version%2F4.0%20Chrome%2F69.0.3497.100%20Mobile%20Safari%2F537.36%20aws-amplify%2F3.2.0%20js&x-id=GetObject\"}"

We turned on the window log level to debug and this is the output from the android emulator:

[ng] [console.log]: "[DEBUG] 46:40.366 Credentials - getting credentials" [ng] [console.log]: "[DEBUG] 46:40.366 Credentials - picking up credentials" [ng] [console.log]: "[DEBUG] 46:40.367 Credentials - getting new cred promise" [ng] [console.log]: "[DEBUG] 46:40.367 Credentials - checking if credentials exists and not expired" [ng] [console.log]: "[DEBUG] 46:40.368 Credentials - need to get a new credential or refresh the existing one" [ng] [console.log]: "[DEBUG] 46:40.372 AuthClass - Getting current user credentials" [ng] [console.log]: "[DEBUG] 46:40.384 AuthClass - Getting current session" [ng] [console.log]: "[DEBUG] 46:40.391 AuthClass - Failed to get user from user pool" [ng] [console.log]: "[DEBUG] 46:40.397 AuthClass - Failed to get the current user" "No current user" [ng] [console.log]: "[DEBUG] 46:40.400 AuthClass - getting session failed" "No current user" [ng] [console.log]: "[DEBUG] 46:40.404 Credentials - setting credentials for guest" [ng] [console.log]: "[DEBUG] 46:40.841 Credentials - Failed to load credentials" { [ng] "__zone_symbol__state": false, [ng] "__zone_symbol__value": { [ng] "$metadata": { [ng] "retries": 0, [ng] "totalRetryDelay": 0 [ng] } [ng] } [ng] } [ng] [console.log]: "[DEBUG] 46:40.849 AWSS3Provider - set credentials for storage" {} [ng] [console.log]: "[DEBUG] 46:40.868 AWSS3Provider - get test.png from public/test.png"

When doing the same thing on the ios app, the download succeeds and the result of the logger is:

[ng] [console.log]: "[DEBUG] 53:44.730 Credentials - getting credentials" [ng] [console.log]: "[DEBUG] 53:44.730 Credentials - picking up credentials" [ng] [console.log]: "[DEBUG] 53:44.731 Credentials - getting new cred promise" [ng] [console.log]: "[DEBUG] 53:44.731 Credentials - checking if credentials exists and not expired" [ng] [console.log]: "[DEBUG] 53:44.731 Credentials - need to get a new credential or refresh the existing one" [ng] [console.log]: "[DEBUG] 53:44.732 AuthClass - Getting current user credentials" [ng] [console.log]: "[DEBUG] 53:44.735 AuthClass - Getting current session" [ng] [console.log]: "[DEBUG] 53:44.741 AuthClass - Failed to get user from user pool" [ng] [console.log]: "[DEBUG] 53:44.741 AuthClass - Failed to get the current user" "No current user" [ng] [console.log]: "[DEBUG] 53:44.742 AuthClass - getting session failed" "No current user" [ng] [console.log]: "[DEBUG] 53:44.743 Credentials - setting credentials for guest" [ng] [console.log]: "[DEBUG] 53:45.31 Credentials - Load credentials successfully" { [ng] "accessKeyId": "ASIA....", [ng] "secretAccessKey": "XXXX", [ng] "sessionToken": "IQoJb3....", [ng] "expiration": "2020-04-08T16:53:44.000Z" [ng] } [ng] [console.log]: "[DEBUG] 53:45.33 AWSS3Provider - set credentials for storage" { [ng] "accessKeyId": "ASIA....", [ng] "sessionToken": "IQoJb3...", [ng] "secretAccessKey": "XXXX", [ng] "identityId": "eu-west-2:bd0a0c9f-d8fd-4ea2-a405-c4a75b8d95c3", [ng] "authenticated": false [ng] } [ng] [console.log]: "[DEBUG] 53:45.34 AWSS3Provider - get test.png from public/test.png"

Expected behavior
Expect the result fron Storage.get function call to be the same on iOS and android.

Environment

System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.01 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    npm: 6.13.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Safari: 13.0.5
  npmPackages:
    @angular-devkit/build-angular: ~0.803.20 => 0.803.25 
    @angular/cli: ~8.3.23 => 8.3.25 
    @angular/common: ~8.2.14 => 8.2.14 
    @angular/compiler: ~8.2.14 => 8.2.14 
    @angular/compiler-cli: ~8.2.14 => 8.2.14 
    @angular/core: ~8.2.14 => 8.2.14 
    @angular/forms: ~8.2.14 => 8.2.14 
    @angular/http: ^7.2.16 => 7.2.16 
    @angular/language-service: ~8.2.14 => 8.2.14 
    @angular/platform-browser: ~8.2.14 => 8.2.14 
    @angular/platform-browser-dynamic: ~8.2.14 => 8.2.14 
    @angular/router: ~8.2.14 => 8.2.14 
    @capacitor/cli: 1.5.0 => 1.5.0 
    @capacitor/core: 1.5.0 => 1.5.0 
    @capacitor/ios: ^1.5.0 => 1.5.0 
    @ionic-native/core: ^5.0.0 => 5.21.6 
    @ionic-native/document-viewer: ^5.23.0 => 5.23.0 
    @ionic-native/file: ^5.22.0-beta-1 => 5.22.0-beta-1 
    @ionic-native/file-opener: ^5.23.0 => 5.23.0 
    @ionic-native/file-transfer: ^5.22.0-beta-1 => 5.22.0-beta-1 
    @ionic-native/ionic-webview: ^5.23.0 => 5.23.0 
    @ionic-native/media: ^5.23.0 => 5.23.0 
    @ionic-native/network: ^5.22.0-beta-1 => 5.22.0-beta-1 
    @ionic-native/splash-screen: ^5.0.0 => 5.21.6 
    @ionic-native/status-bar: ^5.0.0 => 5.21.6 
    @ionic-native/youtube-video-player: ^5.23.0 => 5.23.0 
    @ionic/angular: ^5.0.0 => 5.0.4 
    @ionic/angular-toolkit: ^2.1.1 => 2.2.0 
    @ionic/storage: ^2.2.0 => 2.2.0 
    @types/jasmine: ~3.3.8 => 3.3.16 
    @types/jasminewd2: ~2.0.3 => 2.0.8 
    @types/node: ~8.9.4 => 8.9.5 
    aws-amplify: ^3.0.5 => 3.0.5 
    aws-amplify-angular: ^5.0.5 => 5.0.5 
    codelyzer: ^5.0.0 => 5.2.1 
    cordova-android: 8.1.0 => 8.1.0 
    cordova-ios: 5.1.1 => 5.1.1 
    cordova-plugin-device: ^2.0.2 => 2.0.2 
    cordova-plugin-document-viewer: ^0.9.13 => 0.9.13 
    cordova-plugin-file: ^6.0.2 => 6.0.2 
    cordova-plugin-file-opener2: ^3.0.0 => 3.0.0 
    cordova-plugin-file-transfer: ^1.7.1 => 1.7.1 
    cordova-plugin-ionic-keyboard: ^2.2.0 => 2.2.0 
    cordova-plugin-ionic-webview: ^4.1.3 => 4.1.3 
    cordova-plugin-media: ^5.0.3 => 5.0.3 
    cordova-plugin-network-information: ^2.0.2 => 2.0.2 
    cordova-plugin-splashscreen: ^5.0.2 => 5.0.2 
    cordova-plugin-statusbar: ^2.4.2 => 2.4.2 
    cordova-plugin-whitelist: ^1.3.3 => 1.3.3 
    cordova-plugin-youtube-video-player: ^2.4.0 => 2.4.0 
    core-js: ^2.5.4 => 2.6.11 
    howler: ^2.1.3 => 2.1.3 
    ionic: 5.4.16 => 5.4.16 
    jasmine-core: ~3.4.0 => 3.4.0 
    jasmine-spec-reporter: ~4.2.1 => 4.2.1 
    karma: ~4.1.0 => 4.1.0 
    karma-chrome-launcher: ~2.2.0 => 2.2.0 
    karma-coverage-istanbul-reporter: ~2.0.1 => 2.0.6 
    karma-jasmine: ~2.0.1 => 2.0.1 
    karma-jasmine-html-reporter: ^1.4.0 => 1.5.2 
    protractor: ~5.4.0 => 5.4.3 
    rxjs: ~6.5.1 => 6.5.4 
    ts-node: ~7.0.0 => 7.0.1 
    tslib: ^1.9.0 => 1.11.1 
    tslint: ~5.15.0 => 5.15.0 
    typescript: ~3.4.3 => 3.4.5 
    zone.js: ~0.9.1 => 0.9.1 
  npmGlobalPackages:
    @angular/cli: 9.0.5
    @aws-amplify/cli: 4.17.2
    cordova: 9.0.0
    ionic: 5.4.16
    native-run: 1.0.0
    nodemon: 2.0.2
    npm: 6.13.6
    typescript: 3.7.5

Smartphone (please complete the following information):

• Device: emulator iPhone 8 and Pixel 2
• OS: iOS13.4 and Android 9.0 API 28

Additional context
There is a lot more info in the debug from the console, but not sure which of it is relevant, so please let me know if I should provide any more.

[Amplifiyer]

Logs to notice are

Credentials - Failed to load credentials" { [ng] "__zone_symbol__state": false, [ng] "__zone_symbol__value": { [ng] "$metadata": { [ng] "retries": 0, [ng] "totalRetryDelay": 0 [ng] } [ng] } [ng] } [ng]

Can you try reinstalling the app or completely clearing your android's app state and try again?

[alex-iancu]

Thank you for your answer.

I tried deleting the app from the emulator, wiping data and doing a cold boot but that did not work.
I also tried doing ionic cordova platform remove android and ionic cordova prepare android, followed by ionic cordova run android -l --consolelogs and this did not help either, I am seeing the same error logs.

Is there anything else I could try?

Many thanks!

[trevcor]

I'm able to see this exact same behavior when i run my deployed React app in IE or edge. The same app works fine in all other browsers. But in IE the X-Amz-Credential query param is undefined.
The React app uses the Storage api like this:

import { Storage } from "aws-amplify"

export const fetchBankData = () => {
  return Storage.get("filename.json").then(url =>
    fetch(url).then(response => response.json())
  )
}

[alex-iancu]

I managed to get around my issue by using the aws sdk and getting the signed URLs that way which worked on both Android and iOS but I would prefer to use amplify if possible, if anyone could get to the bottom of this problem.

[russell-dot-js]

+1, I am also seeing this issue in IE and Edge

[russell-dot-js]

I've detailed the issue here, your feedback is appreciated aws/aws-sdk-js-v3#1107

[Amplifiyer]

@russell-dot-js, fantastic debugging the issue and arriving at the root cause. And thank you for creating the issue with aws-sdk repository!

[russell-dot-js]

@Amplifiyer for sure! I have a concern that the amplify-js and aws-sdk-js-v3 teams might have conflicting goals - see aws/aws-sdk-js-v3#1095

[Amplifiyer]

@alex-iancu, @russell-dot-js, can you confirm that the issue is fixed with the new amplify release?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.