AWS Cognito React Native Webview Auth - react-native

Question

In my react native app, I want to pass along a user’s AWS cognito credentials to a WebView inside the app so that it can be used to access files which are stored on a private S3 bucket.
So basically I have the following working:
- log into Cognito (via aws-amplify’s Auth class)
- Security on the S3 bucket allowing only logged in users to have access to its content.
I have tried to send the headers to the Webview
<WebView
source={{
uri: source,
headers: {
Authorization:
"AWS4-HMAC-SHA256 …”
}
}}
But that does not seem to work. Does anyone know how to do this?

Answer 1

Ok, after many emails to AWS entreprise support team members, and many hours of hair pulling; I have found out that S3 does not currently support passing along credentials from Cognito.
What we can do is:
Place CloudFront in front of S3, and use Origin Access Identity (OAI) to protect the data. This works well to securitize the access, HOWEVER it does not allow me to pass along the credentials to S3. This is because the communication between CloudFront and S3 now pas the OAI which means a single identity for all users.
Sign each of the S3 access URLs that you need to access.
I used the latter as I need to restrict user access. The code to sign the URLs that I used was:
In react-native:
import AWS, { Auth, Storage } from "aws-amplify";
Storage.get("image.jpg").then(result => {
console.log(result);
}).catch(err => {
console.log(err);
});
In node.js:
import AWS from "aws-sdk";
AWS.config.update({ accessKeyId, secretAccessKey, region });
const s3 = new AWS.S3();
s3.getSignedUrl("getObject", {
Bucket: "s3-bucket-name",
Key: "my/path/image.jpg",
Expires: 60 * 5 * 1000, // 5 Minutes
});
I hope it can help others.