When your microservices system grows there’s a need to have a common UI to manage many services in a smart way.
The case
A team works with two or more services and has got dedicated applications to manage each. But hey, that misses their needs. They don’t want to authenticate here and there, switch contexts, etc. They want one UI to manage everything. Why not? Let’s do it.
Technology stack
In my case it is one frontend application and two backends which are driven by my favourite technologies:
- Next.js 15 + next-auth package (frontend and our future API Gateway)
- Laravel 11 (backend #1)
- Laravel 12 (backend #2)
Structure and security
See below graph to better understand the concept.
Frontend app - UI and guard
It's the frontend and API gateway in the same application. You may call that proxy or API gateway, but the idea is really as simple as “authenticate once and talk to many back-ends”.
Authentication - use provider
We want to make authentication backend-independent, so we should use an authentication provider. Next-auth library supports several providers out of the box. In such an approach we make the frontend application responsible for talking with a provider and authenticating the user. Thanks to this, we can integrate as many backends as we want.
Json Web Token - your passport
Our frontend application doesn’t have a database, but we need a way to identify the user after he or she has already passed the authentication process. Here comes JWT (Json Web Token) which is a securely encoded user data which we previously retrieved from an OAuth provider. We store it in the user's web browser as a cookie. As long as the cookie hasn’t expired yet, we are able to decode it with next-auth and say “hey, this is John Kowalski, he authenticated this morning, let him in!”.
Internal network - talking inside the cluster
Keeping backends inside the internal network only is an important part of the project. Since Next.js can talk to them with server-to-server calls, we don’t have to expose them to the world. Such a situation brings key security benefits.
💡 I enjoy securing things, so in my case I decided to limit access to backends even more with bearer token. It’s pretty straightforward to set it up with Laravel Sanctum
💡 Rate limiting should not be a responsibility of backend API-s since they receive requests internally always from the same IP address
Summary
When building a microservices system with multiple backends, it's beneficial to have a single user interface to manage them all. This approach allows users to authenticate once and interact with various backend services without having to switch contexts or log in repeatedly. One way to achieve this is by using a Next.js application that serves as both the frontend and an API Gateway. Having API communication inside the cluster’s internal network helps keeping things secure.
