amplify storage returns 403

[ShehryarKh]

Describe the bug
Retrieving images using amplify-s3-image returns 403 forbidden.

I have no issue adding to s3 bucket via amplify-s3-image-picker retrieving throws a 403. I've tried adding files to public folder directly and trying to retrieve, returns 403 .

To Reproduce
Steps to reproduce the behavior:

1. setup auth amplify add auth
2. setup api amplify add api
3. setup storage amplify add storage
   -> auth users can create
   -> unauth/guest users can read.

Expected behavior
display the image on app

Code Snippet

                <div class="my-8">
                  <amplify-s3-image-picker
                    button-text="yes"
                    header-title="Campaign Photo"
                    track="true"
                    :path="imgpath"
                  ></amplify-s3-image-picker>
                </div>
                <div>
                  <amplify-s3-image level="public" track="true" img-key="ball.png" />  //image uploaded directly to /public
                </div>

What is Configured?
If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.
• Which resources do you have configured?
  • If applicable, please provide your aws-exports file:

  const awsmobile = {
      "aws_project_region": "us-east-1",
      "aws_cognito_identity_pool_id": "us-east-1:xxx-xxxx-xxxx-xxxx-xxxxxxxx",
      "aws_cognito_region": "us-east-1",
      "aws_user_pools_id": "us-east-1_xxx",
      "aws_user_pools_web_client_id": "xxxx",
      "oauth": {}
     "aws_appsync_graphqlEndpoint": "xx",
   "aws_appsync_region": "us-east-1",
   "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
   "aws_user_files_s3_bucket": "xx",
   "aws_user_files_s3_bucket_region": "us-east-1"
  };
  

[harrysolovay]

@ShehryarKh can you please provide the complete error message. Is there a user currently logged in?

Please try the following as well:

Retrieve the logged-in user's identityId:

// inside an async-friendly closure...
try {
  const { identityId } = await Auth.currentCredentials();
  // set the identityId in state
} catch(e) {}
// ... 

Then, in your component, specify the identity-id attributes:

<div class="my-8">
  <amplify-s3-image-picker
    button-text="yes"
    header-title="Campaign Photo"
    track="true"
    :path="imgpath"
+   identity-id={identityId}
  ></amplify-s3-image-picker>
</div>
<div>
- <amplify-s3-image level="public" track="true" img-key="ball.png" />
+ <amplify-s3-image
+   level="public"
+   track="true"
+   img-key="ball.png"
+   identity-id={identityId}
+ />
</div>

[ShehryarKh]

@harrysolovay I followed your advice and I am still getting 403.

Yes, there is an authenticated user logged in. Also, I will need the ability to show non authenticated users photos from storage.

Full error below:

Request URL: https://website184148-dev.s3.amazonaws.com/public/ball.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIASJJ4F3OVU3FDXJRU%2F20200911%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20200911T181828Z&X-Amz-Expires=900&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEHMaCXVzLWVhc3QtMSJHMEUCIQCDzab53EfyrokH%2FVaX25i56H%2B6cWSHj%2FQM0O0fwV5WtAIgb6TjlX2%2BibWi%2F0%2BM2GsvwcoMeFqtL4I685RDDCgv%2Fo4qxAQIexABGgwxNTc0MjkzOTAyNTEiDMbP1J1v0R1Q9R4YLSqhBLghYOZ0o2XdYDA0C8LYrgzcyCQX0es90HuDbsN6NqEYK5qFq6kD9Dl%2FqR253OJIB%2BGeotoLK2vCzR6ySmh3IzhWcvBPGvBXKfPCC728h8cb2cMEz8EuC44tnqf8ikARKelRXJwRikBZ%2B41UTQzYZhzAgoXv60koJA0QRrOaV2EX4K7TVsDAeRhdaX0YsIFt9SsXR2%2BojY55JngUvJzbeb%2FMYwzpOQOSdfzp8uEE4z0LaaVo23d9CYd6%2B5Or5317m%2B33tWgrzZPX%2F5gbehTyqeBFGk%2BuAkVf2h6h0CB2GjBc9R9rEocIFcue9AcwnFClXyuTOxEnRJ735Wz2v%2Bkl%2BkdkdD1oMMX4hS9fM10JhKmx6Ipa6QCVhpCWr%2Bb1PBoZThC1hmLpRmv6ju1y1U8KIuJO%2BscF6U85zNjvZ69rB3V8jq%2Bolne2zMhVWNB4bT6rn9H10tggaZCIoxjjV3scaU3zP56CanOpePRW%2Bk03LhREvxyAZxAXgAC8rw%2BD%2B%2B50u2b7GC3WXS81yx43HVNhsQqYpvxu18cLEtbojCq0rHj5%2BVOcOc1GSasfd367SWT5pGsAWhnei%2Bb1l444Cv%2FTsm4GFbEaGkscuyY8yjDj%2F4rOKwRK7Wmp%2Bn6A%2BhN9rjkN9c5hET5%2BQ4djWDkbn%2BRuh9%2BCv1vPYLn13m96CASGivz1hd1EjQbQ5NLXl2aaH%2F%2Bs8HJjUVDd7Qh2nOOzg%2Fn4pRdVMOz%2B7voFOoUCjD2NeXDtXYyVzZoy3ABbr7qnrt5%2FkIQlX5WN7hOhvP2nBrfnMgrFToPOohzgn2vS3RfGJFpb6Wp9LaOzY34f8J8ZWM0XmHUooxGdcqubnc7DzXM8jf3WTK3VL0qd91i%2FHRwlwNn6FhSF2pdnIPemQOP%2BwwP%2FAisnEaGfnIr2YEdMlMpEuuU7m4vm%2FTcYd0X9r0iihDo5aO8u%2FX8H4CbBqPrSsReu00v%2Br6hLbsr9sBRRtES%2BNu0wUXma9qS7mWtQVk6hJ3qvH8zromIb6JYLBMKD8AFekPzKZ2c6CNAgktYCDVkX%2Frm7%2B8Oi7Ilhv8tVAzgWU6zFlNU9uuUA5xMwHZb6Olkl&X-Amz-Signature=3912b3ab5c17c8f6df37f5fb1a8a33124e9874d7838f2e316fee06668486db78&X-Amz-SignedHeaders=host&x-amz-user-agent=aws-sdk-js-v3-%40aws-sdk%2Fclient-s3%2F1.0.0-gamma.4%20Mozilla%2F5.0%20%28Macintosh%3B%20Intel%20Mac%20OS%20X%2010_15_4%29%20AppleWebKit%2F537.36%20%28KHTML%2C%20like%20Gecko%29%20Chrome%2F84.0.4147.135%20Safari%2F537.36%20aws-amplify%2F3.5.0%20js&x-id=GetObject

Thanks for the continuous help.

[ashika01]

@ShehryarKh So when you try to retrieve image as both auth and unauth user you get 403?

[ShehryarKh]

@ashika01 Yes. I am not sure why. I can put to the s3 bucket fine.

<amplify-s3-image-picker
                    button-text="yes"
                    header-title="Campaign Photo"
                    track="true"
                    :path="imgpath"
                    :identity-id="identityId"
                  ></amplify-s3-image-picker>

but 403 on

<amplify-s3-image
                    level="public"
                    track="true"
                    img-key="ball.png"
                    :identity-id="identityId"
                  />

[ashika01]

Couple of thing:

1. I see you set your permission create only for auth and read only for un-auth. Can you confirm if thats the case?
2. s3-image-picker actually takes does both put and get. So can you check if that works without any error remove any s3-image code to test this?
3. Do you actually see the file in the s3 bucket? Looking at your code, s3-image should automatically put the code in public folder, is that happening.

Sorry for the prior comment about identityId you shouldn't need that if you are using just public.

[ashika01]

Also, I notice you save in path imgpath but when you trying to retrieve you are not using it. So you need to call with something like this,

<amplify-s3-image
                    level="public"
                    track="true"
                    img-key="imgpath/ball.png"
                  />

[ShehryarKh]

@ashika01 I am not sure what you mean by s3-image-picker take both get and put How and what does the code look like? I'm sorry for the confusion there, but I added a ball.png manually into the public folder in s3 and tried to retrieve it via
amplify-s3-image
Yes I have seen photos being added to s3 from the <amplify-s3-image-picker> and that works perfectly.

How can I confirm permission for auth on the s3 bucket? if there a command? Or somewhere where amplify stores that?

{
    "bucketName": "x",
    "authPolicyName": "xx",
    "unauthPolicyName": "xx",
    "authRoleName": {
        "Ref": "AuthRoleName"
    },
    "unauthRoleName": {
        "Ref": "UnauthRoleName"
    },
    "selectedGuestPermissions": [
        "s3:GetObject",
        "s3:ListBucket"
    ],
    "selectedAuthenticatedPermissions": [
        "s3:PutObject"
    ],
    "s3PermissionsAuthenticatedPublic": "s3:PutObject",
    "s3PublicPolicy": "xx",
    "s3PermissionsAuthenticatedUploads": "s3:PutObject",
    "s3UploadsPolicy": "Uploads_policy_x",
    "s3PermissionsAuthenticatedProtected": "s3:PutObject",
    "s3ProtectedPolicy": "Protected_policy_x",
    "s3PermissionsAuthenticatedPrivate": "s3:PutObject",
    "s3PrivatePolicy": "Private_policy_x",
    "AuthenticatedAllowList": "DISALLOW",
    "s3ReadPolicy": "read_policy_x",
    "s3PermissionsGuestPublic": "s3:GetObject",
    "s3PermissionsGuestUploads": "DISALLOW",
    "GuestAllowList": "ALLOW",
    "triggerFunction": "NONE"
}

[ashika01]

Right here,

   "selectedGuestPermissions": [
        "s3:GetObject",
        "s3:ListBucket"
    ],
    "selectedAuthenticatedPermissions": [
        "s3:PutObject"
    ],

So in theselectedAuthenticatedPermissions, it says you have only given put permission. Can you try updating the storage to give get permissions there,

try amplify update storage and make sure to select both get and put for auth users. And lets see if that does the job.

[ShehryarKh]

@ashika01 Thank you. That was the issue. I'm not sure why it got set up that way. I got it to work by upgrading the storage to those permissions.
Closing Issue.

[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.