Getting a No Credentials error when trying to use Storage.put()

Question

I'm getting a No credentials error when I try to put a file on my Storage. I followed this guide: https://medium.com/@anjanava.biswas/uploading-files-to-aws-s3-from-react-app-using-aws-amplify-b286dbad2dd7.

import Storage from '@aws-amplify/storage';

export const uploadFile = async () => {
    SetS3Config('site-nocas-bucket-amplify', 'protected');

    try {
        await Storage.put('text.txt', 'Hello');
    } catch (err) {
        console.error(err);
    }
};

I'm using this code to test things out.

This is my manual configuration of Amplify and Storage:

import Storage from '@aws-amplify/storage';

export function configureAmplify() {
    Amplify.configure({
        Auth: {
            identityPoolId: process.env.REACT_APP_identityPoolId,
            region: process.env.REACT_APP_region,
            userPoolId: process.env.REACT_APP_userPoolId,
            userPoolWebClientId: process.env.REACT_APP_userPoolWebClientId
        },
        Storage: {
            bucket: process.env.REACT_APP_bucket_name,
            region: process.env.REACT_APP_region,
            identityPoolId: process.env.REACT_APP_identityPoolId
        }
    });
}

export function SetS3Config(bucket, level) {
    Storage.configure({
        bucket: bucket,
        level: level,
        region: 'eu-west-1',
        identityPoolId: process.env.REACT_APP_identityPoolId
    });
}

Answer 1

So, I am putting it here the steps to solve this problem,

Step 1:

If you are trying to upload the file without signing in to the web app, then your manual configuration of Amplify and Storage should be like:

import Storage from '@aws-amplify/storage';

export function configureAmplify() {
    Amplify.configure({
        Auth: {
            identityPoolId: process.env.REACT_APP_identityPoolId,
            region: process.env.REACT_APP_region,
            userPoolId: process.env.REACT_APP_userPoolId,
            mandatorySignIn: false,
            userPoolWebClientId: process.env.REACT_APP_userPoolWebClientId
        },
        Storage: {
            bucket: process.env.REACT_APP_bucket_name,
            region: process.env.REACT_APP_region,
            identityPoolId: process.env.REACT_APP_identityPoolId
        }
    });
}

This line:

mandatorySignIn: false

This prevents the mandatory user authentication into your app by which your Cognito identity is going to recognize you and provide you access to AWS resources.

If still getting the error, try this:

Step 2:

1. npm update
2. Delete the @aws-amplify folder in your node modules folder
3. npm install.

I hope this would work.