amplify-js Access Denied when trying to access a resource from S3

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

React Native

Amplify APIs

Storage

Amplify Version

v6

Amplify Categories

storage, api

Backend

Amplify CLI

Environment information

# Put output below this line
System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 316.81 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.7.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.23 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.91
    Safari: 17.3.1
  npmPackages:
    @aws-amplify/react-native: ^1.0.28 => 1.0.28 
    @babel/core: ^7.20.0 => 7.24.4 
    @expo/vector-icons: ^14.0.0 => 14.0.0 
    @hookform/resolvers: ^3.3.4 => 3.3.4 
    @hookform/resolvers/ajv:  1.0.0 
    @hookform/resolvers/arktype:  1.0.0 
    @hookform/resolvers/class-validator:  1.0.0 
    @hookform/resolvers/computed-types:  1.0.0 
    @hookform/resolvers/io-ts:  1.0.0 
    @hookform/resolvers/joi:  1.0.0 
    @hookform/resolvers/nope:  1.0.0 
    @hookform/resolvers/superstruct:  1.0.0 
    @hookform/resolvers/typanion:  1.0.0 
    @hookform/resolvers/typebox:  1.0.0 
    @hookform/resolvers/valibot:  1.0.0 
    @hookform/resolvers/vest:  1.0.0 
    @hookform/resolvers/yup:  1.0.0 
    @hookform/resolvers/zod:  1.0.0 
    @react-native-async-storage/async-storage: 1.21.0 => 1.21.0 
    @react-native-community/netinfo: 11.1.0 => 11.1.0 
    @react-navigation/native: ^6.0.2 => 6.1.17 
    @types/react: ~18.2.45 => 18.2.79 
    HelloWorld:  0.0.1 
    aws-amplify: ^6.0.30 => 6.0.30 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    expo: ~50.0.14 => 50.0.17 
    expo-dev-client: ~3.3.11 => 3.3.11 
    expo-font: ~11.10.3 => 11.10.3 
    expo-image: ~1.10.6 => 1.10.6 
    expo-image-picker: ~14.7.1 => 14.7.1 
    expo-linear-gradient: ~12.7.2 => 12.7.2 
    expo-linking: ~6.2.2 => 6.2.2 
    expo-router: ~3.4.8 => 3.4.8 
    expo-splash-screen: ~0.26.4 => 0.26.4 
    expo-status-bar: ~1.11.1 => 1.11.1 
    expo-system-ui: ~2.9.3 => 2.9.4 
    expo-web-browser: ~12.8.2 => 12.8.2 
    lucide-react-native: ^0.372.0 => 0.372.0 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-hook-form: ^7.51.3 => 7.51.3 
    react-native: 0.73.6 => 0.73.6 
    react-native-get-random-values: ~1.8.0 => 1.8.0 
    react-native-google-places-autocomplete: ^2.5.6 => 2.5.6 
    react-native-mask-input: ^1.2.3 => 1.2.3 
    react-native-otp-entry: ^1.6.1 => 1.6.1 
    react-native-safe-area-context: 4.8.2 => 4.8.2 
    react-native-screens: ~3.29.0 => 3.29.0 
    react-native-svg: 14.1.0 => 14.1.0 
    react-native-svg-transformer: ^1.3.0 => 1.3.0 
    react-native-web: ~0.19.6 => 0.19.10 
    typescript: ^5.1.3 => 5.4.5 
    zod: ^3.23.4 => 3.23.4 
    zustand: ^4.5.2 => 4.5.2 
  npmGlobalPackages:
    corepack: 0.18.0
    npm: 9.6.7

Describe the bug

I'm trying to upload and download a couple of images. I think I uploaded successfully tomy S3 bucket. Because at least I'm able to download the image through the AWS Console. But I'm not able to get it showing up in my React Native app. I can get the following link. but it always throws a 403 error. I followed the documentation here: https://docs.amplify.aws/react-native/build-a-backend/storage/download/#generate-a-download-url But it doesn't work.

Expected behavior

get my images showing up in my app.

Reproduction steps

Install dependencies. Run expo ios Signup Upload a profile photo You won't be able to see your profile photo when signing in

Code Snippet

// Put your code below this line.

UPLOADING:

const profileKey = 'profile-picture/' + user?.sub + '_' + getImageName(profilePicture!);
      const isUploadProfileError = await fetchImage(profilePicture!)
      .then(data => uploadData({
        key: profileKey,
        data,
        options: {
          accessLevel: 'guest'
        }
      }))
      .then(result => result.state === "ERROR");

      if(isUploadProfileError) {
        setStatus('error');

        return;
      }
      
      DOWNLOADING
      
      const result = await getUrl({
      key,
      options: {
        accessLevel: 'guest',
      }
    }).catch(console.log);

    return result?.url ?? null;
    
    SHOWING UP
    
    <Image
        style={styles.image}
        source={{ uri: userProfileImage?.href }}
        contentFit="cover"
        transition={1000}
      />
      
      // it doesn't show the image. And the returned link throws 403 error.
      
      https://paycond81d4cb524d74c6fb8a977206479ef65befe9-dev.s3.us-east-1.amazonaws.com/public/profile-picture/14784418-40e1-703f-6058-37f638350ebf_D8FA24DE-1D34-4929-90D0-137E91F772B7.jpg?x-amz-content-sha256=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAXYKJXPNZF4KCQGWU%2F20240426%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240426T113122Z&X-Amz-SignedHeaders=host&X-Amz-Expires=900&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEHQaCXVzLWVhc3QtMSJHMEUCIB3xHtl2p7hJ%2FAilUvWORUIjRFCG0IdrTxQdEUeq2djkAiEA2XPOi%2F4d8hZC9iRku28DckhbAvu148dHVlCP9zZCuC4qzQQIvf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAAGgw1MzMyNjc0NDY2NDIiDOA%2Fm3yMrudWI3H6XyqhBDb22PLZKcA3POJtIs88zEWwh0NSWy7OM7idmjoEr0F9NWcBhMG51rLHA6WWNkPMGYTrsmZvUayso%2FDy3JOsyQ61LghYI1YYSKM7vo6o%2BSRlN39rA%2B6r%2BbqU%2FfFnfqGIaj%2BmbDYs9DQDHxln5fHs4JX19TXlDCZXirIaR%2F1CBjEninNQQcbAXuRGnJY4oATguoxAyMg7tBWUAkBEIG5zn7WMTttuHigTmIqj3B26HUrJCTXWUuSj4fYGWnfzg%2F8jOdg78O%2FiMKFJjo0c9eJQ%2Fhzzu4mfs9BdMShGnt6Ts4Nz08S8pKC8hPpz%2FVUHT4ccDyliKYoiu47rYaZ%2FemNz2ajc4M8i8w4v3780D86y5DCo3C6B3%2B%2F0OxjhUt7A28o%2F4JaMWBquTgZDaT7CYnXDjY1B0%2FkR%2BxOLor6H1d%2FuQNYw3RLBYWLJds%2BQfz1m%2FO3jSv5SyjN7u47AOPuu6tBnEGV4agdCLRrCZAO9QP2hjTdqhyLAQXRJ8qg1YifkagOJltH3IpuHqaJm4JTYaJzNdEqA3iV6tz65wRUAzCbp9EbbOt6dwRkkYj54d7gI4axIlEXAaETzt3c6Z5ug1wZh1f3GipD%2Bs3k28ltwNhtC4y5EiWT4P38u%2BUQcDOqjeJnij8VFPz6IwnEA60Y7lcq5KKYzycSagjbfEAeNqo98IAmDkjrqX1sA8UFjwdRJbwOnyo4%2BqWOkDP4E6%2FQAzDim6PmCMImhrrEGOoUC7YO2md7dk3X5f%2BDtLgsFxG%2BK%2FIatQbgTPNur2vkJrOBYVYbrB8A1%2Br%2FdvNCS6%2BPTTkLXW6z7ZlUMsjWPDS8SuQBBCNRhp3HeUSqb4n2x54r8Qs2nRO58iik9s6FP5bNbvZEnBDwh0H1qxdjGXf%2FP4XNtlD%2Fe6OhGKJp%2FoGhcLIxf3x7UVTdI2FyvQfV4%2Ftu7XntHyGMgRVwTbEDQql3ril8uVLoXXls2z%2B9oTKes1D7%2F1sL1TSCJn8Ql81zVhW1I6dSF9KhvJJR3PtVEhAhbw9fe6Y9YqBSlZ9oYdJWjJlh9nMXLmbzX3Gqfd9%2BZ1WDbX779XelJpD6HHlM58lkSU5mzfhbW&X-Amz-Signature=92869a824fda821472e889243ae515d3cfe5b647e0830b6a84b51b935bed4fd6

Log output

// Put your logs below this line
Can't reproduce in React Native

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_appsync_graphqlEndpoint": "", "aws_appsync_region": "us-east-1", "aws_appsync_authenticationType": "API_KEY", "aws_appsync_apiKey": "", "aws_cognito_identity_pool_id": "", "aws_cognito_region": "us-east-1", "aws_user_pools_id": "us-east-1_s9MyA77nH", "aws_user_pools_web_client_id": "", "oauth": {}, "aws_cognito_username_attributes": [ "EMAIL", "PHONE_NUMBER" ], "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_user_files_s3_bucket": "***", "aws_user_files_s3_bucket_region": "us-east-1" };

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

Iphone 15 pro Simulator

Mobile Operating System

IOS 17.4

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

Apr 26 '24 11:04 fimbres

Now I'm able to get the image but I needed to update permissions for both the bucket and the file manually. do you know if is there a way to upload a file using uploadData method from aws amplify with the correct permissions? at least I want the images showing up with public permissions. @cwomack

Apr 26 '24 21:04 fimbres

COuld i understand your case case a little bit more. Like the folder structure u are trying to upload to and how you want the permission to work between the folders.

With Amplify Gen2, you can now do more flexible folder permissioning refer docs https://docs.amplify.aws/gen2/build-a-backend/storage/

Apr 27 '24 04:04 ashika112

Hey @ashika112, basically I want to store cover images for some records in the database. I think they can have public access. But following the Amplify Docs: https://docs.amplify.aws/react-native/build-a-backend/storage/upload/, I'm able to upload images to s3, but they always upload with no public access, even after assigning accessLevel: 'guest', which is supposed to give public access to the file. So I'm just wondering how can I assign public access with 'aws-amplify/storage'.

I will take a look at the docs you shared tho, thanks for your response.

Apr 27 '24 06:04 fimbres

Thanks @fimbres . On your network tab can you check if both upload/download calls are made to the same place in s3 bucket?

Apr 29 '24 17:04 ashika112

Yes I see the calls @ashika112, but they returned the 403 access denied error.

Apr 29 '24 18:04 fimbres

Hey, any thought on this one? @ashika112 @cwomack

May 01 '24 21:05 fimbres

Can u post screenshot of ur network call it will help us debug faster. Make sure to redact sensitive info. This can only happen when there is a mismatch with the two below.

That said , things i would check is

If ur IAM policies associated has the right permission set
The request URL for upload and download hits the right folders

May 02 '24 17:05 ashika112

Also another thing in ur code, is to Make sure to either pass in the same profileKey to both uploadData and getUrl. Or store the return key from uploadCall and pass that to getUrl

May 02 '24 17:05 ashika112

@fimbres, we've officially launched the Gen 2 Developer Experience for Amplify as of 5/06/24. Check out our launch blog post for more information, but can you let us know if you're still experiencing this blocker in Gen 2 now that it's generally available?

Also, when you say that you're looking for "public" access on the bucket... do you mean a truly public URL/bucket access that anyone can access outside of the unauth/auth roles for your app?

May 08 '24 21:05 cwomack

hey @cwomack @ashika112, thank you for your response. I was debugging a couple days ago. I deleted my old bucket and created a new one using amplify cli. And suddenly my issue was solved. Now I'm able to see all the files from my console and more important from my app. Thanks for the help and your time!

May 11 '24 23:05 fimbres

@fimbres Happy to hear things worked out for you. Let us know if there is anything else. I will close this issue since the issue seems to be resolved.

May 13 '24 04:05 ashika112

amplify-js amplify-js copied to clipboard

Access Denied when trying to access a resource from S3

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Version

Amplify Categories

Backend

Environment information

Describe the bug

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

amplify-js
amplify-js copied to clipboard