The request signature calculated does not match the provided signature
  • 25-Apr-2023
Lightrun Team
Author Lightrun Team
The request signature calculated does not match the provided signature

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

Lightrun Team
Lightrun Team

Explanation of the problem

The following error is being received when trying to submit files to AWS: “The request signature we calculated does not match the signature you provided. Check your key and signing method.” The version being used is “react-s3-uploader”: “^3.3.0”. The code used for the setup is as follows:

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',
const style = {
    className: "uploadNew"

const uploaderProps = {
    server: 'http://localhost:3000', 
    s3Url: '', 
    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">
        <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”

When uploading files to an S3 bucket, a common issue that can arise is the 403 forbidden error. This error typically occurs when the user attempting to upload the file does not have the necessary permissions to write to the bucket. One solution to this problem involves updating the CORS configuration of the bucket. The CORS configuration specifies which domains are allowed to access the resources in the bucket, as well as which HTTP methods are allowed. In order to resolve the 403 error, the AllowedOrigin and AllowedMethod parameters of the CORSRule must be set appropriately to allow the desired origin and method for the PUT request.

Here’s an example of how to add a CORS rule to the S3 bucket:


In some cases, updating the CORS configuration may not solve the issue. In these situations, creating a new user with the same policy as the original user that was experiencing the issue may resolve the problem. The policy should grant permissions for the s3:PutObject and s3:PutObjectAcl actions, as these are the actions required for uploading objects to the bucket.

Here’s an example of a policy that grants permissions for s3:PutObject and s3:PutObjectAcl:

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

It is important to note that the solution that works may vary depending on the specific circumstances and configuration of the S3 bucket. It is recommended to thoroughly investigate the root cause of the issue before attempting to implement a solution. Additionally, it is important to ensure that the user has the appropriate credentials and authentication to access and modify the S3 bucket.

Other popular problems with React-S3


Problem: Signature errors when uploading files to S3

Another issue that can occur when using react-s3 to upload files to an S3 bucket is signature errors. This error typically occurs when the signature generated by the client-side code using your AWS access key and secret key does not match the signature expected by AWS.


To resolve this issue, you need to ensure that your AWS access key and secret key are correct and that the date and time used to generate the signature are in sync with AWS’s servers. You can also check that the permissions for your AWS credentials include the s3:PutObject and s3:PutObjectAcl actions for the specified bucket.

Problem: Uploading large files to S3 with progress tracking

Another common problem faced when using react-s3 is uploading large files to an S3 bucket while tracking progress. By default, react-s3 does not provide a way to track the progress of a large file upload, which can be frustrating for users who want to know how much longer the upload will take.


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, '/',;

A brief introduction of React-S3

React-s3 is a library that provides an easy-to-use interface for uploading files to Amazon S3 (Simple Storage Service) using React components. It abstracts away many of the complexities of interacting with the AWS SDK and provides a streamlined way to integrate S3 file uploads into a React application. The library supports a range of S3 features, such as setting object metadata, specifying ACLs, and signing uploads with pre-signed URLs.

Under the hood, react-s3 uses the AWS SDK for JavaScript to interact with S3. It provides a higher-level interface that simplifies the process of uploading files to S3. The library abstracts away many of the technical details involved in making API requests, such as managing credentials and signing requests. React-s3 also offers an event-based interface that enables developers to hook into different stages of the upload process, such as onUploadStart and onProgress. Overall, react-s3 offers a convenient way to handle file uploads to S3 within a React application.


Most popular use cases for React-S3

  1. One of the main use cases for react-s3 is to enable users to upload files directly to an S3 bucket from a React front-end, without the need for a backend server to handle the upload. This can be useful for a wide range of applications, such as photo sharing sites or document management systems, where users need to upload large files or batches of files.
  2. Another common use case for react-s3 is to retrieve and display files from an S3 bucket within a React application. This can be done using the getObject function provided by the library, which allows you to fetch the contents of a file from S3 and then render it within your React application. For example, you could use this functionality to build a file browser that allows users to view and download files stored in an S3 bucket.
  3. React-s3 can also be used to manage the permissions and access controls for files stored in an S3 bucket. For example, you could use the putACL function provided by the library to set the access control list for a specific file in your bucket, ensuring that only authorized users have access to the file. The following code block demonstrates how to set the ACL for a file using react-s3:
  (err, data) => {
    if (err) {
    } else {
      console.log('ACL set successfully!');

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.