How to protect some files/objects in public bucket

I would like to create a public read aws s3 bucket with some files read restricted by a IAM role.

First of all:

I using amplify cli for deploying my «static» website.
The website is a react app
This app have public pages/react components and a admin area
I would like to restrict admin area/admin pages/admin react components with a aws IAM role

More details:

The react app is very big so I splited components using asyncComponent feature like const Dashboard = asyncComponent(() => import('./pages/Dashboard')) So when I build the app instead to have one big file I have several small files. And all these files are on the same bucket.

Now I want to build admin pages. Always using asyncComponent we get a collection of «Admin» files and there are hosted on the same bucket. But for security reason I want to restrict access to authenticated users with a certain IAM role (for ex AdminRole).

I go through lot of doc from amplify config or AWS::S3::Bucket from cloudFormation and I saw different things that tell me it's possible but I'm very lost in this doc.

So finally I ask:

How can I protect some files/objects for reading access in s3 buckets with a IAM role?

And how can I «tag» admin components in the react app? or via amplify? maybe using regex for match files? or a specified folder? In order to apply this read restriction.

Thank you in advance for your reply.

Content in Amazon S3 is private by default.

Therefore, anything you are happy for everyone in the world to view can be made publicly accessible via a Bucket Policy (whole bucket or part of a bucket) or via Access Control Lists (ACLs) on the objects themselves.

To serve content that should be restricted to specific users, take advantage of Pre-Signed URLs. These are time-limited URLs that provide temporary access to private objects in Amazon S3. They are easy to generate (no API calls required).

The way it would work is:

Users would authenticate with your application
When they wish to access restricted content, the application would determine whether they are permitted access
If they are permitted access, the application would generate a pre-signed URL. These can also be used in <a> and <img> tags to refer to pages and images.
Users will receive/view the content just like normal web components
Once the expiry time has passed, the pre-signed URLs will no longer work

See: Share an Object with Others - Amazon Simple Storage Service

(I'm not an Amplify person, so I can't speak to how Amplify would specifically generate/use pre-signed URLs.)