AWS s3 / React: Password protecting site

Question

I have a react application deployed successfully to a S3 bucket. I need to find a way to password protect access to the s3 url, for example if you open the url in your browser some kind of popup asks for username/password before progressing. I was recommended .htaccess and .htpasswd ?

IS there a better solution, i.e using Cloudfront? I am unable to block all access, except to 1 ip address, as multiple IP addresses need to access the site.

Any suggestions would be greatly appreciated. Thanks

Stack:

React router for routing... s3 for hosting/Cloudfront for CDN... Firestore for DB... google authenticator for auth

Answer 1

AWS Amplify will be your best friend here. This guide from AWS clearly explains how to do it all. There area other guides out there that will help guide you though using AWS Amplify to host your S3 bucket. https://docs.aws.amazon.com/amplify/latest/userguide/access-control.html