Nginx conditionally allow all to react sub-route based on IP - nginx

Question

I'm setting up an NGINX server and need to configure it to allow only certain IPs access to the root of a react application, but allow all to a certain subfolder (react route). Basically I need to allow all traffic to /sub/ but only a handful of IPs to the home directory /.
I tried
location /sub/* { allow all;}
location / {
allow x.x.x.x;
deny all;}
but was getting a 403 error when using any other IP address except the 'x.x.x.x'.
What's the correct way to achieve this?
Thanks.

Answer 1

Here is what you can try to do:
map $uri $disallow_by_route {
~^/subroute/ ""; # allow /subroute/... for all
default 1;
}
map $remote_addr $disallow {
x.x.x.x ""; # some allowed IP
y.y.y.y ""; # another allowed IP
default $disallow_by_route;
}
server {
...
location / {
if ($disallow) { return 403; }
...
}
}
However if your allowed pages used some assets (js, css, images etc.) from some other path than /subroute/... this config won't let them to load on restricted IPs. You can try to allow them checking the value of HTTP Referer header with a more complex map blocks chain:
map $http_referer $disallow_by_referer {
# use a regex for your actual domain here
~^https?://example\.com/subroute/ "";
default 1;
}
map $uri $disallow_by_route {
~^/subroute/ "";
# list all the other possible assets extensions (png, gif, svg, webp etc.) here
~\.(?:js|css)$ $disallow_by_referer;
default 1;
}
map $remote_addr $disallow {
x.x.x.x ""; # some allowed IP
y.y.y.y ""; # another allowed IP
default $disallow_by_route;
}
server {
...
location / {
if ($disallow) { return 403; }
...
}
}
Please note that this solution won't work if your server configuration (or react app itself) sets the referer policy to no-referer.