AWSS3Provider - get signed url error [TypeError: Cannot read property 'byteLength' of undefined]

Before opening, please confirm:

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

JavaScript Framework

React Native

Amplify APIs

Authentication, Analytics, GraphQL API, Storage, Push Notifications

Amplify Categories

No response

Environment information

# Put output below this line


  System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 192.38 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.15 - /opt/homebrew/bin/yarn
    npm: 8.6.0 - /opt/homebrew/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0
  npmPackages:
    @aws-amplify/datastore-storage-adapter: ^1.3.4 => 1.3.4 
    @aws-amplify/pushnotification: ^4.3.25 => 4.3.25 
    @babel/core: ^7.12.9 => 7.18.6 
    @babel/runtime: ^7.12.5 => 7.18.6 
    @react-aria/ssr: ^3.2.0 => 3.2.0 
    @react-native-async-storage/async-storage: ^1.17.7 => 1.17.7 
    @react-native-community/eslint-config: ^2.0.0 => 2.0.0 
    @react-native-community/netinfo: ^9.3.0 => 9.3.0 
    @react-native-community/push-notification-ios: ^1.10.1 => 1.10.1 (1.0.3)
    @react-native-picker/picker: ^2.4.2 => 2.4.2 
    @react-navigation/bottom-tabs: ^6.3.2 => 6.3.3 
    @react-navigation/native: ^6.0.10 => 6.0.10 
    @react-navigation/native-stack: ^6.6.2 => 6.6.2 
    HelloWorld:  0.0.1 
    amazon-cognito-identity-js: ^5.2.9 => 5.2.10 
    aws-amplify: ^4.3.28 => 4.3.28 
    aws-amplify-react-native: ^6.0.5 => 6.0.5 
    babel-jest: ^26.6.3 => 26.6.3 
    babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 
    eslint: ^7.32.0 => 7.32.0 
    hermes-inspector-msggen:  1.0.0 
    jest: ^26.6.3 => 26.6.3 
    metro-react-native-babel-preset: ^0.70.3 => 0.70.3 
    moment: ^2.29.3 => 2.29.4 
    native-base: ^3.4.7 => 3.4.7 
    react: 18.0.0 => 18.0.0 
    react-bootstrap: ^2.4.0 => 2.4.0 
    react-bootstrap/AbstractModalHeader:  undefined ()
    react-bootstrap/Accordion:  undefined ()
    react-bootstrap/AccordionBody:  undefined ()
    react-bootstrap/AccordionButton:  undefined ()
    react-bootstrap/AccordionCollapse:  undefined ()
    react-bootstrap/AccordionContext:  undefined ()
    react-bootstrap/AccordionHeader:  undefined ()
    react-bootstrap/AccordionItem:  undefined ()
    react-bootstrap/AccordionItemContext:  undefined ()
    react-bootstrap/Alert:  undefined ()
    react-bootstrap/Anchor:  undefined ()
    react-bootstrap/Badge:  undefined ()
    react-bootstrap/BootstrapModalManager:  undefined ()
    react-bootstrap/Breadcrumb:  undefined ()
    react-bootstrap/BreadcrumbItem:  undefined ()
    react-bootstrap/Button:  undefined ()
    react-bootstrap/ButtonGroup:  undefined ()
    react-bootstrap/ButtonToolbar:  undefined ()
    react-bootstrap/Card:  undefined ()
    react-bootstrap/CardGroup:  undefined ()
    react-bootstrap/CardHeader:  undefined ()
    react-bootstrap/CardHeaderContext:  undefined ()
    react-bootstrap/CardImg:  undefined ()
    react-bootstrap/Carousel:  undefined ()
    react-bootstrap/CarouselCaption:  undefined ()
    react-bootstrap/CarouselItem:  undefined ()
    react-bootstrap/CloseButton:  undefined ()
    react-bootstrap/Col:  undefined ()
    react-bootstrap/Collapse:  undefined ()
    react-bootstrap/Container:  undefined ()
    react-bootstrap/Dropdown:  undefined ()
    react-bootstrap/DropdownButton:  undefined ()
    react-bootstrap/DropdownContext:  undefined ()
    react-bootstrap/DropdownItem:  undefined ()
    react-bootstrap/DropdownMenu:  undefined ()
    react-bootstrap/DropdownToggle:  undefined ()
    react-bootstrap/ElementChildren:  undefined ()
    react-bootstrap/Fade:  undefined ()
    react-bootstrap/Feedback:  undefined ()
    react-bootstrap/Figure:  undefined ()
    react-bootstrap/FigureCaption:  undefined ()
    react-bootstrap/FigureImage:  undefined ()
    react-bootstrap/FloatingLabel:  undefined ()
    react-bootstrap/Form:  undefined ()
    react-bootstrap/FormCheck:  undefined ()
    react-bootstrap/FormCheckInput:  undefined ()
    react-bootstrap/FormCheckLabel:  undefined ()
    react-bootstrap/FormContext:  undefined ()
    react-bootstrap/FormControl:  undefined ()
    react-bootstrap/FormFloating:  undefined ()
    react-bootstrap/FormGroup:  undefined ()
    react-bootstrap/FormLabel:  undefined ()
    react-bootstrap/FormRange:  undefined ()
    react-bootstrap/FormSelect:  undefined ()
    react-bootstrap/FormText:  undefined ()
    react-bootstrap/Image:  undefined ()
    react-bootstrap/InputGroup:  undefined ()
    react-bootstrap/InputGroupContext:  undefined ()
    react-bootstrap/ListGroup:  undefined ()
    react-bootstrap/ListGroupItem:  undefined ()
    react-bootstrap/Modal:  undefined ()
    react-bootstrap/ModalBody:  undefined ()
    react-bootstrap/ModalContext:  undefined ()
    react-bootstrap/ModalDialog:  undefined ()
    react-bootstrap/ModalFooter:  undefined ()
    react-bootstrap/ModalHeader:  undefined ()
    react-bootstrap/ModalTitle:  undefined ()
    react-bootstrap/Nav:  undefined ()
    react-bootstrap/NavContext:  undefined ()
    react-bootstrap/NavDropdown:  undefined ()
    react-bootstrap/NavItem:  undefined ()
    react-bootstrap/NavLink:  undefined ()
    react-bootstrap/Navbar:  undefined ()
    react-bootstrap/NavbarBrand:  undefined ()
    react-bootstrap/NavbarCollapse:  undefined ()
    react-bootstrap/NavbarContext:  undefined ()
    react-bootstrap/NavbarOffcanvas:  undefined ()
    react-bootstrap/NavbarToggle:  undefined ()
    react-bootstrap/Offcanvas:  undefined ()
    react-bootstrap/OffcanvasBody:  undefined ()
    react-bootstrap/OffcanvasHeader:  undefined ()
    react-bootstrap/OffcanvasTitle:  undefined ()
    react-bootstrap/OffcanvasToggling:  undefined ()
    react-bootstrap/Overlay:  undefined ()
    react-bootstrap/OverlayTrigger:  undefined ()
    react-bootstrap/PageItem:  undefined ()
    react-bootstrap/Pagination:  undefined ()
    react-bootstrap/Placeholder:  undefined ()
    react-bootstrap/PlaceholderButton:  undefined ()
    react-bootstrap/Popover:  undefined ()
    react-bootstrap/PopoverBody:  undefined ()
    react-bootstrap/PopoverHeader:  undefined ()
    react-bootstrap/ProgressBar:  undefined ()
    react-bootstrap/Ratio:  undefined ()
    react-bootstrap/Row:  undefined ()
    react-bootstrap/SSRProvider:  undefined ()
    react-bootstrap/Spinner:  undefined ()
    react-bootstrap/SplitButton:  undefined ()
    react-bootstrap/Stack:  undefined ()
    react-bootstrap/Switch:  undefined ()
    react-bootstrap/Tab:  undefined ()
    react-bootstrap/TabContainer:  undefined ()
    react-bootstrap/TabContent:  undefined ()
    react-bootstrap/TabPane:  undefined ()
    react-bootstrap/Table:  undefined ()
    react-bootstrap/Tabs:  undefined ()
    react-bootstrap/ThemeProvider:  undefined ()
    react-bootstrap/Toast:  undefined ()
    react-bootstrap/ToastBody:  undefined ()
    react-bootstrap/ToastContainer:  undefined ()
    react-bootstrap/ToastContext:  undefined ()
    react-bootstrap/ToastFade:  undefined ()
    react-bootstrap/ToastHeader:  undefined ()
    react-bootstrap/ToggleButton:  undefined ()
    react-bootstrap/ToggleButtonGroup:  undefined ()
    react-bootstrap/Tooltip:  undefined ()
    react-bootstrap/TransitionWrapper:  undefined ()
    react-bootstrap/createChainedFunction:  undefined ()
    react-bootstrap/createUtilityClasses:  undefined ()
    react-bootstrap/createWithBsPrefix:  undefined ()
    react-bootstrap/divWithClassName:  undefined ()
    react-bootstrap/getTabTransitionComponent:  undefined ()
    react-bootstrap/helpers:  undefined ()
    react-bootstrap/safeFindDOMNode:  undefined ()
    react-bootstrap/transitionEndListener:  undefined ()
    react-bootstrap/triggerBrowserReflow:  undefined ()
    react-bootstrap/types:  undefined ()
    react-bootstrap/useOverlayOffset:  undefined ()
    react-bootstrap/usePlaceholder:  undefined ()
    react-bootstrap/useWrappedRefWithWarning:  undefined ()
    react-moment: ^1.1.2 => 1.1.2 
    react-native: 0.69.0 => 0.69.0 
    react-native-autolink: ^4.0.0 => 4.0.0 
    react-native-device-info: ^10.0.2 => 10.0.2 (0.9.9, 8.7.1)
    react-native-fast-image: ^8.6.1 => 8.6.1 
    react-native-image-crop-picker: ^0.38.0 => 0.38.0 
    react-native-image-picker: ^4.10.0 => 4.10.0 
    react-native-popover-view: ^5.1.2 => 5.1.2 
    react-native-popup-menu: ^0.16.0 => 0.16.1 
    react-native-safe-area-context: ^4.3.1 => 4.3.1 
    react-native-screens: ^3.14.0 => 3.14.0 
    react-native-sqlite-storage: ^6.0.1 => 6.0.1 
    react-native-svg: ^12.3.0 => 12.3.0 
    react-native-svg-transformer: ^1.0.0 => 1.0.0 
    react-native-user-avatar: ^1.0.8 => 1.0.8 
    react-test-renderer: 18.0.0 => 18.0.0 
    sp-react-native-in-app-updates: ^1.1.7 => 1.1.7 
  npmGlobalPackages:
    @aws-amplify/cli: 9.0.0
    corepack: 0.10.0
    npm: 8.6.0

Describe the bug

I am trying to get Storage.get in IOS Devices. This works on Android devices.

await Storage.get(Res)
  .then(res => {
    console.log('get', res);
    setImageurl(res);
  })
  .catch(error => {
    console.log(error);
  });

I get the following error:

WARN [WARN] 53:15.437 AWSS3Provider - get signed url error [TypeError: Cannot read property ‘byteLength’ of undefined]

Expected behavior

Should return a pre-signed URL.

Reproduction steps

Just try and do a storage.get on a key in IOS.

Code Snippet

// Put your code below this line.
import {Storage, Auth} from 'aws-amplify';



  async function getImage() {
    await Storage.get(Res)
      .then(res => {
        console.log('get', res);
        setImageMessageurl(res);
      })
      .catch(error => {
        console.log(error);
      });
  }

Log output

// Put your logs below this line
 LOG  [DEBUG] 22:12.718 Credentials - getting credentials
 LOG  [DEBUG] 22:12.718 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.718 Credentials - getting new cred promise
 LOG  [DEBUG] 22:12.718 Credentials - checking if credentials exists and not expired
 LOG  [DEBUG] 22:12.719 Credentials - need to get a new credential or refresh the existing one
 LOG  [DEBUG] 22:12.719 Credentials - no credentials for expiration check
 LOG  [DEBUG] 22:12.719 AuthClass - Getting current user credentials
 LOG  [DEBUG] 22:12.720 Credentials - getting credentials
 LOG  [DEBUG] 22:12.720 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.720 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.721 Credentials - getting credentials
 LOG  [DEBUG] 22:12.721 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.721 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.721 Credentials - getting credentials
 LOG  [DEBUG] 22:12.722 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.722 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.722 Credentials - getting credentials
 LOG  [DEBUG] 22:12.722 Credentials - picking up credentials
 LOG  [DEBUG] 22:12.723 Credentials - getting old cred promise
 LOG  [DEBUG] 22:12.723 AuthClass - failed to get or parse item aws-amplify-federatedInfo [SyntaxError: JSON Parse error: Unexpected token: u]
 LOG  [DEBUG] 22:12.724 AuthClass - Getting current session
 LOG  [DEBUG] 22:12.727 AuthClass - Getting the session from this user: XXXXXXXXXXXXXXXXXXX
 LOG  [DEBUG] 22:12.738 Credentials - set credentials from session
 LOG  [DEBUG] 22:12.739 AWSPinpointProvider - updateEndpoint error [TypeError: Cannot read property 'byteLength' of undefined]
 ERROR  [ERROR] 22:12.740 AWSPinpointProvider - updateEndpoint failed [TypeError: Cannot read property 'byteLength' of undefined]
 LOG  [DEBUG] 22:12.742 AnalyticsClass - Failed to update the endpoint [TypeError: Cannot read property 'byteLength' of undefined]
 LOG  [DEBUG] 22:12.998 Credentials - Failed to load credentials {"_h": 1, "_i": 3, "_j": {"_h": 0, "_i": 2, "_j": [TypeError: undefined is not a function], "_k": null, "_o": 3}, "_k": null}
 LOG  [DEBUG] 22:12.999 Credentials - Error loading credentials [TypeError: undefined is not a function]
 LOG  [DEBUG] 22:13.0 AuthClass - getting guest credentials
 LOG  [DEBUG] 22:13.1 Credentials - setting credentials for guest
 LOG  [DEBUG] 22:13.648 Credentials - Failed to load credentials {"_h": 1, "_i": 3, "_j": {"_h": 0, "_i": 2, "_j": [TypeError: undefined is not a function], "_k": null, "_o": 4}, "_k": null}
 LOG  [DEBUG] 22:13.649 Credentials - Error loading credentials [TypeError: undefined is not a function]
 LOG  [DEBUG] 22:13.650 S3ClientUtils - credentials provider get credentials {"accessKeyId": undefined, "authenticated": undefined, "identityId": undefined, "secretAccessKey": undefined, "sessionToken": undefined}

aws-exports.js

/* eslint-disable */ // WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = { “aws_project_region”: “us-east-1”, “aws_cognito_identity_pool_id”: “us-east-1:c3199a44-83da-4ec3-91a6-3f17fa52c7be”, “aws_cognito_region”: “us-east-1”, “aws_user_pools_id”: “us-east-1_3jP8B4fd3”, “aws_user_pools_web_client_id”: “39h0kmgv6272ob133sebskl55p”, “oauth”: {}, “aws_cognito_username_attributes”: [ “EMAIL” ], “aws_cognito_social_providers”: [], “aws_cognito_signup_attributes”: [ “EMAIL” ], “aws_cognito_mfa_configuration”: “OFF”, “aws_cognito_mfa_types”: [ “SMS” ], “aws_cognito_password_protection_settings”: { “passwordPolicyMinLength”: 8, “passwordPolicyCharacters”: [] }, “aws_cognito_verification_mechanisms”: [ “EMAIL” ], “aws_appsync_graphqlEndpoint”: “https://uqzlz4lhqzchval73nuv3mcfhi.appsync-api.us-east-1.amazonaws.com/graphql”, “aws_appsync_region”: “us-east-1”, “aws_appsync_authenticationType”: “AMAZON_COGNITO_USER_POOLS”, “aws_appsync_apiKey”: “da2-XXXXXXXXXXXX”, “aws_mobile_analytics_app_id”: “XXXXXXXXXXXXX”, “aws_mobile_analytics_app_region”: “us-east-1”, “aws_user_files_s3_bucket”: “qapp-develop195252-develop”, “aws_user_files_s3_bucket_region”: “us-east-1” };

export default awsmobile;

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

[cshfang]

I was able to reproduce this issue, and as @Qruiser pointed out, this issue does seem to be isolated to iOS with the new architecture enabled. I dug into this and, unfortunately, I think the fix may have to come from React Native - I will try to open an issue there to learn more. In the meantime, my findings:

1. Amplify relies pretty heavily on Credentials - Storage is no exception
2. Under the hood, we are communicating with Cognito via the AWS SDK for JavaScript v3
3. More specifically, and as @Qruiser pointed out, the @aws-sdk/client-cognito-identity package provides us with the APIs needed for resolving credentials.
4. To facilitate the actual network request on non-node environments the @aws-sdk/fetch-http-handler wraps but ultimately delegates the call to the fetch API.
5. The fetch response does come back successfully from the service but does not contain a body and thus is considered a buffered body by the handler and the blob() method is automatically invoked (link to code).
6. Unfortunately, with the new architecture enabled on iOS, it seems the blob() method is missing from the response and, as such, when the handler attempts to invoke it, we run into undefined is not a function error.

Having root caused this, I tried to better understand why the blob() method would be missing from the response…

1. In React Native, fetch is polyfilled via whatwg-fetch
2. One of the first things this module does it to try and determine the environment support for various functions, including trying to instantiate a Blob.
3. With the new architecture enabled on iOS, the new Blob() fails to instantiate, and as a result, the blob() method is not made available to the polyfilled fetch

This is where my investigation has brought me thus far. As to why the global Blob fails to construct, it seems to have something to do with React Native’s NativeBlobModule as the construction error thrown can be traced back to the BlobManager

Edit: Opened issued against React Native repo here

[tannerabread]

Update to this issue: The fix to the underlying blob issue will be released to react native v0.71 which is scheduled to come out in a few weeks. Read more in this comment.

This should allow us to verify if there is anything we need to do from the Amplify library side to resolve this error