SignatureDoesNotMatch Error in S3 PUT Object in React Native

[waleedshkt]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

The issue is stemming when I upload an base64-encoded JPEG image to S3 in React Native. I possible reasons were checked but to no avail. There is no issue with credentials (they aren't expired or mistyped as they work successfully in putting record to Aurora) nor with the request headers. In fact, the same logic works okay in web app.

I also tested different versions of the S3 client. Initially installed v3.556.0 and v.503.1 (installed in web app). But the same error is popping repeatedly.

SDK version number

@aws-sdk/client-s3@3.556.0

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

node v20.10.0 and react-native v0.69.10

Reproduction Steps

import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import { ReadableStream } from "web-streams-polyfill";
globalThis.ReadableStream = ReadableStream;

import "@aws-sdk/util-endpoints";
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
const Buffer = require("buffer").Buffer;

const uploadImage = async (creds, imgUri) => {
  try {
    const client = new S3Client({
      region: AWS_REGION,
      credentials: {
        accessKeyId: creds.AccessKeyId,
        secretAccessKey: creds.SecretKey,
        sessionToken: creds.SessionToken,
      },
    });

    const respose = await client.send(
      new PutObjectCommand({
        Bucket: BUCKET_NAME,
        Key: TARGET_KEY,
        Body: new Buffer.from(
          imgUri.replace(/^data:image\/\w+;base64,/, ""),
          "base64",
        ),
        ContentType: `image/jpeg`,
        ContentEncoding: "base64",
        ServerSideEncryption: "AES256",
      }),
    );

    return response;
  } catch (error) {
    console.error(error);
    return -1;
  }
};

Observed Behavior

The above mentioned comes up as been mentioned earlier

Expected Behavior

Image should be uploading successfully

Possible Solution

Workaround for now is to use Amplify Storage to upload image

Additional Information/Context

No response

[aBurmeseDev]

Hi @waleedshkt - thanks for reaching out.

Here are a couple things I'd like to point out before further debugging:

• ContentType should be string, as I've seen this can cause Signature Mismatch in some cases. See docs
• React-native version you're on seems to be archived, I'm not sure if this's the culprit but wanted to point it out.

A few questions:

• Are you able to run other S3 operations? For example, try getObjectCommand.
• Can you paste the the logs/error here?

Let me know if issue persists and I'll be happy to further investigate.
Best,
John

[waleedshkt]

Thanks for the response.

Yes, I double checked the content type. This property is a string. I also made it lowercase as there was a similar mismatch issue raised earlier. But that didn't work either. Error kept popping up

I'm deliberately clinging to RN v0.69 owing to compatibility issues in newer versions with many node packages

Yes, other s3 commands are successfully executing

[aBurmeseDev]

Thank you for your response and apology for the wait. Are you still running into the issue? If so, can you please add this middleware stack to your code and share the output with us?

s3Client.middlewareStack.add(next => async (args) => {
 console.log(args.request)
 const response = await next(args);
 console.log(response);
 return next(args);
}, {step: 'finalizeRequest'})

[github-actions]

This issue has not received a response in 1 week. If you still think there is a problem, please leave a comment to avoid the issue from automatically closing.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.