I am building a social network in react-native / nodejs and using the S3 amazon service to handle the users personal photos (upload, serve)

But I can't seem to wrap my head around how to serve those images, my question is how do I serve those uploaded images to only the application users and not the whole world ?

At first I tried to explicitly fetch the image myself, this allowed me to directly put the S3 credentials, but it doesn't seem practical.

Is there a way to make every GET call made by an app authorized to fetch from my bucket ?

I am building a social network in react-native / nodejs and using the S3 amazon service to handle the users personal photos (upload, serve)

But I can't seem to wrap my head around how to serve those images, my question is how do I serve those uploaded images to only the application users and not the whole world ?

At first I tried to explicitly fetch the image myself, this allowed me to directly put the S3 credentials, but it doesn't seem practical.

Is there a way to make every GET call made by an app authorized to fetch from my bucket ?

• javascript
• react-native
• amazon-s3
• fetch
• aws-sdk-js

3 Answers 3

What you need is S3 signed URLs http://docs.aws.amazon./AmazonS3/latest/dev/ShareObjectPreSignedURL.html

Instead of fetching images, create unique signed URLs to this images (with a custom expiration time, say 1 week) and pass those to your application. This way you can close your S3 bucket to the world, but your application will be able to obtain the images with these private links.

Thanks to @sergey I made it to what fits my needs the 'getSignedUrl' method.

Here is the code that worked for me :

import AWS from 'aws-sdk/dist/aws-sdk-react-native';
const credentials = new AWS.Crendentials({ accessKeyId: '', secretAccessKey: ''})
const s3 = new AWS.S3({ credentials, signatureVersion: 'v4', region: ''});
// and there it is.
const url = s3.getSignedUrl('getObject', { Bucket: 'your bucket name', Key: 'the filename'}).

And now each time I loop through an array containing multiple references to my photos, during each loop I create for an item a single pre-signed url that I put in my ponent.

You can use the new AWS Amplify library to acplish this: https://github./aws/aws-amplify

There is an Auth for getting user credentials and establishing identities, both in an Authenticated and UnAuthenticated state, as well as a Storage ponent which has public and private access profiles.

Install via npm:

npm install --save aws-amplify-react-native

You will need to link the project if using Cognito User Pools:

react-native link amazon-cognito-identity-js

More info here: https://github./aws/aws-amplify/blob/master/media/quick_start.md#react-native-development

Then pull in the modules:

import Amplify, {Auth, Storage} from 'aws-amplify-react-native'
Amplify.configure('your_config_file');
Storage.configure({level: 'private'});
Storage.get('myfile');