Access Denied when trying to access a resource from S3

[fimbres]

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

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

[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

[ashika112]

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/

[fimbres]

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.

[ashika112]

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

[fimbres]

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

[fimbres]

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

[ashika112]

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

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

[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

[cwomack]

@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?