[Question] Accessing S3 bucket from within the SPA?

Hi,

Sorry if this is slightly off topic, but I was wondering if it is possible to access the private S3 bucket hosting the SPA, with a jquery .get function from within the SPA?

Background:

• I’m trying to setup authentication to access a private S3 bucket, and using this open source repository (https://github.com/rufuspollock/s3-bucket-listing) to list all items within the S3 bucket once authenticated. (I have also opened a ticket there https://github.com/rufuspollock/s3-bucket-listing/issues/101, where I go through some of the steps I’ve done).

• I’ve run the cloudformation template, and replaced the react SPA, with the index.html mentioned in the above ticket, and logging in works great, and I can nearly see the entire index.html page, but it doesn’t display anything in the S3 bucket itself.

I have some theories about this, but wasn’t sure who to ask, so hoping someone could point me in the right direction.

• In the list.js, it uses a $.get(s3_rest_url), however this returns an empty string (from what I can tell), and I think this is due to the list.js not passing in the authentication tokens required to access the S3 bucket (in the same way the user needed to sign in to access the index.html).

If this is the case, would a solution be to download the cookies from the browser post logging by the user, in the list.js file and pass one of the auth tokens in the $.get(s3_rest_url) so that it can access the S3 bucket?

Please let me know if you need any more information, and any advice would be greatly appreciated!

Thank you.

[rpattcorner]

An index.html might be part of an app, but it’s just HTML, not executable code. You’d be doing the identity assumption in the javascript code components in the REACT or Angular app.

This AWS Doc gives a decent overview of the bits and pieces. The javascript section (scroll down) in this article was the best quick example I could find.

You’ll need to google around for more examples though. AWS seems very big on promoting their Amplify framework for this purpose, but the projects I work on access the identity pool directly for authorization without Amplify.

A very quick look turned up the very last paragraph in this article and its associated repo, which illustrates in a cursory way how you’d bring an identity pool into an app that is already using a user pool. It’s a pre-amplify example, or you could bite the bullet and go down the AWS-favored amplify path, which seems to be better documented.

[ottokruse]

This really is a question to the author of https://github.com/rufuspollock/s3-bucket-listing: to support S3 bucket access via CloudFront, instead of to S3 directly.

Accessing an S3 bucket via CloudFront is a whole different thing than accessing an S3 bucket directly. CloudFront in front of S3 is supposed to abstract S3, so that the client does not even know the origin is S3.

A call like Bucket.ListObjectsV2 can be done directly against the S3 bucket, but not against CloudFront in front of S3.

@rpattcorner is right that what you need to make direct S3 access work with the solution here, is a Cognito Identity Pool. With that you need to create a web app that uses the JWTs that this solution places in the cookies, and trades them in for AWS credentials using the Cognito Identity Pool. With those credentials you can then use eg the s3-bucket-listing solution you mention.

Since this question comes by more often, it would be great to document in this repo how to setup an identity pool, and do direct bucket access. Maybe even add a parameter “CreateIdentityPool” to make it more easy. That’s a fair amount of work though.