Fine-grained IP Address Filtering with Next.js
Single page applications have been the de facto standard for a while now. SPAs allow developers to build snappy, responsive experiences for their end-users by eliminating the need for a full server round-trip on each page change. However, there are certain requirements that are more difficult to fulfill when all navigation is client-side.
We encountered such a requirement with one of our clients. We were building a new application to modernize a portion of their business, and they wanted to restrict access to the application based on source IP address. At first, this seemed simple enough, but after further discussions we learned that they wanted these IP address rules to be applied on both a user and page level. For example: administrative users should be able to access any page from any location, but users with lower permissions should only be able to access certain parts of the application from the central office location.
Restricting access to a SPA via source IP address is no way novel. We would easily accomplish this at the network layer using one of the firewall/access control solutions offered by many of the major cloud providers, but fine-grained access like the kind requested would require a different approach.
Enter Next.js
To fulfill our client’s requirements, we decided to leverage Next.js. For those that who are unfamiliar, Next.js is framework that leverages React to provide static and server-side rendering for application development. With Next.js we can still produce a SPA, but we can also use it to produce something akin to a traditional server-side application where page changes result in a request to the server, and the server returns the requested page.
Next.js provides an optional method for each page that can be executed before performing server-side rendering and returning the page to the client called getServerSideProps. This method can be used to execute logic on page request to determine if a user should be allowed to access a page based on their role and source IP address. Within getServerSideProps for a given page we are able to determine the user via the JWT provided in the request, determine their source IP address via the x-forwarded-for header, query the database for configuration for the requesting user, and either return the requested page or a 403 if access should not be granted.
Here’s an example of what that looks like:
Implementation of this logic will vary based on where the application is hosted and what type of DB you’re using, but this is the basic flow.
Further Applications
The great thing about the flexibility of getServerSideProps is that we could restrict access or redirect on a variety of conditions. Do you need to redirect a user to login page if their session has expired? Do you need to restrict access to a page to a specified time range? Do you want to restrict access to a page to only certain browsers/devices? All of these could be implemented via getServerSideProps.
Think of any other cool ways to use getServerSideProps or Next.js in general? Feel free to throw them in the comments!
Work With Us
SLATE is an engineering company with a focus on modern approaches to data architecture and software development, and delivers custom solutions that allow organizations to gain insights to drive effective decision making. If you have a problem that you’d like us to help you with, then you can contact us via our website!
