search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.4k stars 2.11k forks source link

Getting NoCredentials Error while performing List, Upload and Other file actions on S3 bucket from Amplify V6 react application #13184

Open saurabhunde opened 3 months ago

saurabhunde commented 3 months ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Storage

Amplify Version

v6

Amplify Categories

auth, storage

Backend

Amplify CLI

Environment information

``` # Put output below this line System: OS: Windows 10 10.0.17763 CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz Memory: 7.79 GB / 15.74 GB Binaries: Node: 20.11.0 - C:\Program Files\nodejs\node.EXE npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD Browsers: Internet Explorer: 11.0.17763.2989 npmPackages: @aws-amplify/ui-react: ^6.1.6 => 6.1.6 @aws-amplify/ui-react-internal: undefined () @headlessui/react: ^1.7.18 => 1.7.18 @heroicons/react: ^2.1.1 => 2.1.1 @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 @reduxjs/toolkit: ^2.2.1 => 2.2.1 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @reduxjs/toolkit-react: 1.0.0 @types/react: ^18.2.43 => 18.2.48 @types/react-dom: ^18.2.17 => 18.2.18 @vitejs/plugin-react: ^4.2.1 => 4.2.1 @zxing/browser: ^0.1.4 => 0.1.4 @zxing/library: ^0.20.0 => 0.20.0 autoprefixer: ^10.4.17 => 10.4.17 aws-amplify: ^6.0.20 => 6.0.20 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/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 () eslint: ^8.55.0 => 8.56.0 eslint-config-prettier: ^9.1.0 => 9.1.0 eslint-plugin-import: ^2.29.1 => 2.29.1 eslint-plugin-react: ^7.33.2 => 7.33.2 eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 eslint-plugin-react-refresh: ^0.4.5 => 0.4.5 luxon: ^3.4.4 => 3.4.4 moment: ^2.30.1 => 2.30.1 postcss: ^8.4.33 => 8.4.33 prettier: ^3.2.5 => 3.2.5 react: ^18.2.0 => 18.2.0 react-barcode: ^1.4.6 => 1.4.6 react-datepicker: ^6.4.0 => 6.4.0 react-dom: ^18.2.0 => 18.2.0 react-dropzone: ^14.2.3 => 14.2.3 react-hook-form: ^7.50.1 => 7.50.1 react-qr-code: ^2.0.12 => 2.0.12 react-redux: ^9.1.0 => 9.1.0 react-router-dom: ^6.22.1 => 6.22.1 tailwindcss: ^3.4.1 => 3.4.1 vite: ^5.0.8 => 5.0.12 vite-plugin-pwa: ^0.17.5 => 0.17.5 yup: ^1.3.3 => 1.3.3 npmGlobalPackages: @aws-amplify/cli: 12.10.1 corepack: 0.23.0 npm: 10.2.4 ```

Describe the bug

I am trying to perform List, Upload file actions in my amplify react application. But I am getting below error while performing file upload and list files operations. Error : NoCredentials: Credentials should not be empty.

Note- We are using federated usrs from Azure AD and have configured Azure AD ipd using SAML. All of the users will logging through this idp only. And we need to provide S3 file access to logged in users only.

I followed below steps to add and configure storage using Amplify CLI. Please refer below section

Expected behavior

  1. Files should get uploaded to S3 bucket by only authenticated users
  2. Should get list of files from S3 bucket for authenticated users

Reproduction steps

  1. amplify add storage

  2. Answered questions like below

    • Please select from one of the below mentioned services: -Content (Images, audio, video, etc.)
    • You need to add auth (Amazon Cognito) to your project in order to add storage for user files. Do you want to add auth now?- Yes
    • Do you want to use the default authentication and security configuration?- Default configuration
    • Do you want to configure advanced settings?- No, I am done.
    • Please provide a friendly name for your resource that will be used to label this category in the project: -testS3
    • Please provide bucket name:testS3bucket
    • Who should have access:Auth users
    • What kind of access do you want for Authenticated users? - create/update, read, delete
    • Do you want to add a Lambda Trigger for your S3 Bucket? - No

  3. Configured- Amplify.configure({ .... //added S3 config Storage: { S3: { bucket: "testS3bucket", region: "us-east-1", } } })

  4. Refer File upload and List files code from below code snippets

Code Snippet

// Put your code below this line.
//Upload file code
import { uploadData } from 'aws-amplify/storage';
try {
  const result = await uploadData({
    key: filename,
    data: file,
    options: {
      accessLevel: 'private'
    }
  }).result;
  console.log('Succeeded: ', result);
} catch (error) {
  console.log('Error : ', error);

//List files code
import { list } from 'aws-amplify/storage';
try {
  const result = await list();
} catch (error) {
  console.log(error);
}

Log output

Console Error while listing files

``` Error: NoCredentials: Credentials should not be empty. at assertValidationError (http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:462:11) at resolveS3ConfigAndInput (http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:644:3) at async list (http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:1984:51) at async listAllBuckets (http://localhost:5173/src/components/ ```

Console error while upload

``` Error : NoCredentials: Credentials should not be empty. at assertValidationError (http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:462:11) at resolveS3ConfigAndInput (http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:644:3) at async http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:1450:64 at async http://localhost:5173/node_modules/.vite/deps/chunk-57IZAOBQ.js?v=1d4e4029:502:22 at async handleFileChange (http://localhost:5173/ ```

aws-exports.js

No response

Manual configuration

Amplify.configure({
    Auth: {
        Cognito: {
            userPoolClientId: 'xxxxxxxxxxxxxxxxxx',
            userPoolId: 'xxxxxxxxxxxxx',
            loginWith: {
                oauth: {
                    domain: 'xxxxxxxx.amazoncognito.com',
                    scopes: ['openid email aws.cognito.signin.user.admin'],
                    redirectSignIn: ['http://localhost:5173'],
                    redirectSignOut: ['http://localhost:5173'],
                    responseType: 'code',
                },
            },
        },
    },
    API: {
        GraphQL: {
            endpoint:
                'https://xxxxxxxxxamazonaws.com/graphql',
            region: 'xxxx',
            defaultAuthMode: 'userPool',
        },
    },
    Storage: {
        S3: {
            bucket: "testS3Bucket",
            region: "xxxxx", 
        }
    }
});

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

sumitsahoo commented 3 months ago

Amplify documentation really needs a revamp. A lot of things are either not documented or fail to work :(

saurabhunde commented 3 months ago

@nadetastic Please assist us with this issue.

If it helps, I am mentioning below links of previously riased issues of same project by our team. https://github.com.mcas.ms/aws-amplify/amplify-cli/issues/13240 https://github.com.mcas.ms/aws-amplify/amplify-js/issues/13119

cwomack commented 3 months ago

Hello, @saurabhunde 👋. It looks like you're missing the identityPoolId in your scoped Auth config. See an example of what the shape should look like here (click on existing resources block switcher). Can you add that in and see if you still get the error?

@sumitsahoo, that's valid feedback and we would love to hear how we can make it better! Feel free to open up a docs issue here or let me know via a reply back if there's something specific you're looking for. I think we could make the scoped examples for configs a little easier to find (rather than buried inside that last option of the block switcher).

sumitsahoo commented 3 months ago

@cwomack I have added identityPoolId in the scoped Auth config and now the error has changed.

Updated Auth config:

Amplify.configure({
    Auth: {
        mandatorySignIn: false,
        Cognito: {
            userPoolClientId: amplifyconfig.aws_user_pools_web_client_id,
            userPoolId: amplifyconfig.aws_user_pools_id,
            loginWith: {
                oauth: {
                    domain: amplifyconfig.oauth.domain,
                    scopes: ['openid email aws.cognito.signin.user.admin'],
                    redirectSignIn: ['http://localhost:5173'],
                    redirectSignOut: ['http://localhost:5173'],
                    responseType: 'code',
                },
            },
            identityPoolId: amplifyconfig.aws_cognito_identity_pool_id,
        },
    },
    API: {
        GraphQL: {
            endpoint:
                xyz.aws_appsync_graphqlEndpoint,
            region: 'eu-west-1',
            // Set the default auth mode to "userPool"
            defaultAuthMode: 'userPool',
        },
    },
    Storage: {
        S3: {
            bucket: "xyz-dev",
            region: "eu-west-1", 
        },
    }
});

Here is error message:

InvalidIdentityPoolConfigurationException: Invalid identity pool configuration. Check assigned IAM roles for this pool.
    at parseJsonError (http://localhost:5173/node_modules/.vite/deps/chunk-IFRJ7B24.js?v=ca1ab44f:2871:17)
    at async getCredentialsForIdentityDeserializer (http://localhost:5173/node_modules/.vite/deps/chunk-IFRJ7B24.js?v=ca1ab44f:4387:19)
    at async CognitoAWSCredentialsAndIdentityIdProvider.credsForOIDCTokens (http://localhost:5173/node_modules/.vite/deps/chunk-S5WU6PHE.js?v=ca1ab44f:4865:26)
    at async AuthClass.fetchAuthSession (http://localhost:5173/node_modules/.vite/deps/chunk-IFRJ7B24.js?v=ca1ab44f:1010:34)
    at async resolveS3ConfigAndInput (http://localhost:5173/node_modules/.vite/deps/chunk-K4YCOUCR.js?v=ca1ab44f:641:39)
    at async list (http://localhost:5173/node_modules/.vite/deps/chunk-K4YCOUCR.js?v=ca1ab44f:1984:51)
    at async listAllBuckets (http://localhost:5173/src/components/PAVManagement/PAVForm.jsx:68:22)
saurabhunde commented 3 months ago

Hi @cwomack , Thank you for your reponse on my issue. Could you please provide an exmaple IAM role and its policies that we can add to Cognito Identity Pool which allows CRUD operations on S3 for authenticated Cognito users? As menioned by @sumitsahoo, we are facing above error even after adding identity pool id in Amplify configuration