Originally published on my Medium blog »
A beta customer once approached us because he was unable to login in to our Angular web application. The page was loading but any HTTP requests to our API failed. After talking to the customer we found that their company is using IP restrictions. Therefore, he wanted to know if we could provide static IPs which they could add on their side to allow using our application in their company.
Unfortunately, our cloud platform of choice (Render) did not directly support this feature yet at that point of time. Hence, we could not provide a definite list of IPs that would never change. That’s why we had to look for a product which could provide static IPs. Changing our cloud platform was off the table as we are quite happy with it even to this day. As this was the first customer requesting this, we also did not want to spend a lot of money for this right now.
Luckily, I stumbled over a solution which seemed to provide everything I’d need for now. QuotaGuard is a service which describes itself as “the world’s leading Static IP solution provider for distributed networks and cloud-based applications”. They support multiple cloud platforms including the one we use and the pricing is fair in my opinion.
In our case we only needed an inbound proxy which allows us to access our application from a static IP. Outbound would be necessary if we want to route traffic from our application to an external service via a static IP.
Keep in mind that aside from the account registration, the following steps are rather general so they should work with alternative solutions as well.
How to create an inbound proxy to use static IPs with QuotaGuard Static
Create an account
Create an inbound proxy. This requires you to provide the URL of your API.
Make sure to allow your application to use the inbound proxy
Make sure to use the domain URL instead of directly calling your API
Provide all the static IPs to your customers
Optional: only use the inbound proxy for certain requests or customers to not exceed your quota 🤓
After creating the inbound proxy we see the static IPs as well as the domain URL. We should provide interested customers the static IPs we can see here.
In our case, our Angular web application uses JWT for authentication. Pay attention to whitelistedDomains which includes the new domain URL of our inbound proxy.
// called on every request to retrieve the token
export function jwtOptionsFactory(tokenService: MyTokenService) {
return {
tokenGetter: () => tokenService.getToken(),
whitelistedDomains: ['some-api.com', 'some-api.gestatica.com']
};
}
// the actual module imports (simplified)
@NgModule({
...,
imports: [JwtModule.forRoot({
jwtOptionsProvider: {
provide: JWT_OPTIONS,
useFactory: jwtOptionsFactory,
deps: [MyTokenService]
}
}),
...
}
The only thing left to do: use the correct URL for HTTP requests. In our case we created a feature flag for this. Hence, only customers which require this feature will use the inbound proxy while the rest will directly use the API as usual. However, we don’t know this information until the user is logged in so we always use the proxy for login requests.
getApiUrl(route: string, useStaticIps: boolean): string {
if (!environment.production) {
return 'https://some-api.com';
} else {
return useStaticIps || route.includes('authentication/login') ?
'https://some-api.gestatica.com' :
'https://some-api.com';
}
}
Conclusion
Thanks for reading this short post about using QuotaGuard as a solution for static IPs. As you can see the setup is done in a few minutes and everyone can access our application again. How do use static IPs in your products? Let me know in the comments.
Top comments (0)