StorageImage Component can't access the content of protected level other user created

[sasssssssa]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Storage (Storage Manager)

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Package version

"@aws-amplify/ui-react-storage": "^3.0.12"

Please describe your bug.

Hi,

I think I found a bug about the StorageImage Component in Amplify UI Library.
Could you check and fix this bug?

Storage Image
https://ui.docs.amplify.aws/react/connected-components/storage/storageimage

Bug Description

We can specify identityId as arguments in StorageImage Component. But this identityId argument doesn't seem to apply to the url to access to S3.
I believe if I specify "ap-northeast-1:abcdefghijk" in identityId and "protected" in accessLevel, the url to access should be https://<Storage Bucket Name>-<env>.s3.ap-northeast-1.amazonaws.com/protected/ap-northeast-1%3Aabcdefgh/<imagekey>.

<StorageImage alt="dog" identityId="ap-northeast-1:abcdefghijk" imgKey="imagekey" accessLevel="protected" />

But, the url StorageImage Component access seems to be https://<Storage Bucket Name>-<env>.s3.ap-northeast-1.amazonaws.com/protected/ap-northeast-1%3A<user_identity_id about login user >/<imagekey> when I checked the HAR file. Even if the identityId argument is specified, this argument is never used.

I think the content of protected level should be able to read by all user. So, I believe we can read theses content of protected if I specify correct identityId.

File access levels
https://docs.amplify.aws/javascript/build-a-backend/storage/configure-access/

Protected: Readable by all users, but writable only by the creating user.

My Investigation

It seems StorageImage Component use getUrl method in aws-amplify/storage for creating url to access to S3. Also, the arguments(options) pass to getUrl() method are same arguments about StorageImage Component.[1][2]

But, the identityId argument does not seem to be correct as an argument for getUrl() method. The argument named targetIdentityId seems to be correct.[3]

Could you fix identityId argument[4] to targetIdentityId argument?

[1] packages/react-storage/src/components/StorageImage/StorageImage.tsx

amplify-ui/packages/react-storage/src/components/StorageImage/StorageImage.tsx

Line 11 in ef95e35

export const StorageImage = ({

export const StorageImage = ({
  accessLevel,
  className,
  fallbackSrc,
  identityId,
  imgKey,
  onStorageGetError,
  validateObjectExistence,
  ...rest
}: StorageImageProps): JSX.Element => {
  ...
  const options = React.useMemo(
    () => ({
      accessLevel,
      identityId,
      validateObjectExistence: resolvedValidateObjectExistence,
    }),
    [accessLevel, identityId, resolvedValidateObjectExistence]
  );
  ...
    const url = useStorageURL({
    key: imgKey,
    options,
    fallbackURL: fallbackSrc,
    onStorageGetError,
  });
...

[2] packages/react/src/hooks/useStorageURL.ts

amplify-ui/packages/react/src/hooks/useStorageURL.ts

Line 15 in ef95e35

export const useStorageURL = ({

export const useStorageURL = ({
  key,
  options,
  fallbackURL,
  onStorageGetError,
}: UseStorageURLParams): string | undefined => {
  ...
    const input: Storage.GetUrlInput = { key, options };

    Storage.getUrl(input)
      .then(({ url }) => {
        if (ignore) {
          return;
        }

        setURL(url.toString());
      })
	  ...

[3] Generate a download URL
https://docs.amplify.aws/javascript/build-a-backend/storage/download/#generate-a-download-url

import { getUrl } from 'aws-amplify/storage';

const getUrlResult = await getUrl({
  key: filename,
  options: {
    ...
    targetIdentityId?: 'XXXXXXX', // id of another user, if `accessLevel` is `guest`
    ...
  },
});

[4] Storage Image - Props
https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props

identityId? The unique Amazon Cognito Identity ID of the image owner. Required when loading a protected image.
string

What's the expected behaviour?

We can read theses content of protected if I specify correct identityId.

Help us reproduce the bug!

N/A

Code Snippet

No response

Console log output

No response

Additional information and screenshots

No response

[hbuchel]

Hi @sasssssssa Thanks for your detailed issue report! I reproduced your findings and we'll work on a fix.

[reesscot]

@sasssssssa This has been fixed in the latest version of the storage package:

npm install @aws-amplify/ui-react-storage@latest