Error: “The request signature we calculated does not match the signature you provided. Check your key and signing method”

Explanation of the problem

express:
app.use('/s3', require('react-s3-uploader/s3router')({
bucket: "my-queue-name",
region: 'us-east-1',
signatureVersion: 'v4',
headers: {'Access-Control-Allow-Origin': '*'},
ACL: 'private',
}));
react:
const style = {
    className: "uploadNew"
}

const uploaderProps = {
    style, 
    server: 'http://localhost:3000', 
    s3Url: 'https://dotbc-queue.s3.amazonaws.com/', 
    signingUrl: "/s3/sign",
    uploadRequestHeaders: { 'x-amz-acl': 'public-read' },
    contentDisposition: "auto",
}

return (
    <div className="filesDocs">
        <label>Files & Documents</label>
        <div className="uploaded">
            <ul className="unstyled">
                
            </ul>
        </div>
        <DropzoneS3Uploader {...uploaderProps}>
);

The CanonicalRequest is labeled as UNSIGNED-PAYLOAD in the error message. It is unclear if this is relevant to the issue.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Error: “The request signature we calculated does not match the signature you provided. Check your key and signing method”

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>Your-Base-Domain-Here</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::bucket_name/*"
        }
    ]
}

Solution:

To address this issue, you can use a third-party library such as react-s3-uploader or implement your own solution using the aws-sdk library. The react-s3-uploader library provides a pre-built React component that handles the file upload and progress tracking for you, while the aws-sdk library allows you to implement your own solution using the S3.upload() method and tracking the progress using the onProgress event handler.

import AWS from 'aws-sdk';

const s3 = new AWS.S3({
  accessKeyId: '<your-access-key>',
  secretAccessKey: '<your-secret-key>'
});

const params = {
  Bucket: '<your-bucket-name>',
  Key: '<your-file-key>',
  Body: '<your-file-content>',
};

const options = {
  partSize: 10 * 1024 * 1024, // 10 MB
  queueSize: 1,
};

s3.upload(params, options, (err, data) => {
  if (err) {
    console.log('Error uploading file:', err);
  } else {
    console.log('File uploaded successfully:', data.Location);
  }
}).on('httpUploadProgress', (progress) => {
  console.log('Upload progress:', progress.loaded, '/', progress.total);
});

Most popular use cases for React-S3

S3.putACL(
  'my-bucket',
  'path/to/my-file',
  'public-read',
  (err, data) => {
    if (err) {
      console.log(err);
    } else {
      console.log('ACL set successfully!');
    }
  }
);