How can I secure a backend with two micro frontends: one publicly accessible and the other restricted to a static IP?

Frontend and Backend Development
1

I have two micro frontends hosted on AWS Amplify:

  1. The first frontend, referred to as FE-A, needs to be accessible solely from a designated static IP.
  2. The second frontend, FE-B, should be available to the public from any location.

The challenge arises when I set the Security Group of my EC2 instance to 0.0.0.0, as this configuration allows access to both frontends from the public.
If I restrict access to only the static IP, it means both frontends must be accessed from that single point, making FE-B unavailable publicly.
I attempted to launch a Lambda function that would retrieve the IP range for my region and update the EC2 security group daily, but that solution is far from optimal.
For FE-A, everything operates smoothly when I set the static IP in the Security Group.
Currently, I can’t achieve the goal of closing off FE-A while keeping FE-B accessible.
I’m looking for a cost-effective strategy to fulfill these requirements. Any suggestions for a viable solution would be greatly appreciated.

2

hey Ryan! Have you considere using AWS Cognito or OAuth services to handle access management for your micro frontends? You can configure user login requirements for FE-A, allowing only specific IPs or credentials, while FE-B remains open. This way, you control access through user authentication rather than restricting at the IP level only.

3

Another approach could be to leverage AWS API Gateway as an intermediary layer between your backends and frontends. You can set up separate routes for each micro frontend via the API Gateway. For the publicly accessible FE-B, configure a route accessible to all, while for FE-A, specify an IP restriction on its route using AWS WAF or similar tools. This method maintains security at the application layer while keeping infrastructure adjustments minimal and avoiding the need for frequent manual updates.