Securing a web app with Keycloak
Setting up an authentication server
Imagine that you are the lead developer for a popular web-based project management application that is used by companies around the world. Your application has a large number of users, including both employees of the companies using your application and external contractors and partners.
As the number of users and the amount of sensitive data being managed by your application grows, you begin to worry about the security of your application and the need to properly authenticate and authorize access to various resources. You want to find a solution that will allow you to easily manage and secure access to your application, while also providing a seamless experience for your users.
This article will go over what such a solution looks like, how it’s set up and how it is integrated in order to secure your web applications. Let’s dive in!
There are many identity and access management solutions out there, but nothing beats free, open-source, tried-and-true software!
Keycloak is a mature, open-source IAM solution that helps organizations to secure their applications and services. It’s not only open-source, but also sponsored by the world’s enterprise open source leader — RedHat!
It provides a single point of access for users to authenticate themselves and authorize access to various resources, and supports a wide range of authentication mechanisms, such as user name and password, two-factor authentication, and social login.
Keycloak can integrate with a wide range of applications and services, including web, mobile, and single-page applications, as well as APIs and microservices.
This means that you can use Keycloak as a standalone and independent authentication server to secure all of your company’s apps and services, providing your internal and external users with a consistent and secure way to access the resources they need, and all that without requiring your developers to have a PhD in cyber security !
Setting up Keycloak
Keycloak provides a rich set of features for managing and protecting your applications and services. It has support for fine-grained permissions, user federation, and user registration, as well as various customization options.
In this blog post, we will explore how it works and give a high-level overview of the steps required to set it up in a production environment and secure your company’s applications and services.
In order to use Keycloak for use in production, there are quite complete guides out there that I will link to throughout this story. However, to get a general overview of what is required to set it up, these are the steps that would be required:
- Install the Keycloak software — Keycloak is a Java application, so you will need to have a Java runtime environment (JRE) installed on your server. You can download the Keycloak distribution from the official website and extract it to a location of your choice.
- Set up a database — Keycloak requires a database to store its data, such as users, clients, and roles. You can use either an embedded H2 database or an external database, such as MySQL or PostgreSQL. If you choose to use an external database, you will need to create a database and user for Keycloak and configure the Keycloak server to connect to it. For the web applications I build, the more frequent choice is PostgreSQL.
- Create a realm — A realm is a grouping of different users, roles, and clients that you want to secure with Keycloak. In general, the realm will correspond to your organisation or your application and will be a pretty large scope. You can create multiple realms in a Keycloak server, but as a rule of thumb, you’ll only need one per application, maybe one for multiple applications.
- Create users and roles — Keycloak uses the concept of users and roles to manage access to resources. Users represent the individuals who will be accessing your applications and services, and roles represent the permissions that users have.
- Create clients — Clients represent the applications and services that you want to secure with Keycloak. You can create clients in the Keycloak administration console or via the Keycloak REST API. Each client has a set of configuration options, such as the allowed grant types and access scopes.
- Configure authentication mechanisms — Keycloak supports a wide range of authentication mechanisms, such as user name and password, two-factor authentication, and social login.
- Configure user federation (if needed) — Keycloak supports user federation, which allows you to link users from external identity providers, such as LDAP or Active Directory, to your Keycloak realm.
- Deploy your applications — Once you have set up the Keycloak server and configured your clients, you can deploy your applications and configure them to use Keycloak for authentication and authorization. Keycloak supports a wide range of client libraries and integrations to make this process easier
These steps can be quite confusing at first, so I’ve tried to add guides below the steps that will show you how do them in the simplest possible way. But configuring Keycloak is only part of the problem — you also need to secure your backend and frontend applications.
Securing your applications
Let’s take a look at how the authentication server would integrate in a specific architecture. In one of my latest projects, I’ve built a traditional web app architecture as explained below, which is nothing fancy but certainly covers all the bases, and can be used for most low or mid-traffic web apps.
If you want to dive a bit more into this architecture, head over to another one of my articles that explains all the services and their roles in detail!
For a bit more clarity, a typical flow for this application would be:
- A user tries to access the web application by entering the URL in their web browser.
- The request is sent to the Nginx server, which acts as a reverse proxy.
- Nginx receives the request and checks to see if the user is authenticated. If the user is not authenticated, Nginx redirects the user to the Keycloak server for authentication.
- The user is redirected to the Keycloak server, where they are presented with a login page.
- The user enters their credentials and submits the login form.
- Keycloak verifies the user’s credentials and, if they are valid, generates an access token.
- Keycloak redirects the user back to the web application, along with the access token.
- Nginx receives the request and, seeing that the user is now authenticated, routes the request to the React frontend.
- The frontend receives the request and processes it, using the access token to verify that the user is authorized to access the requested resources.
- When the frontend makes calls to the backend, those calls include the JWT and are verified by the Express JS backend to ensure the user is authenticated and that sending a response is secure.
This architecture allows you to use Keycloak as a centralized authentication server and uses Express as a backend framework and React as a frontend framework. If you’re looking for something simple but still secure and up to modern standards in terms of speed, security and maintainability, then you can use a similar base architecture and expand on it!
More concretely, if you’re interested in implementing and configuring Keycloak for your application, and you’re using Java for your backend, check out this amazing article by coMakeIT below.
If you’re using Python with Flask or Django as a backend technology, then the Medium article below also covers the implementation really well.
I hope that this article made things more clear for you and helped you out in your software engineering journey. You should now have a pretty clear overview of what an authentication server offers, how to set it up and how to secure your applications.
I hope you enjoyed the ride and have a great day / night 😊 !
And if you’re interested in reading some more from me, feel free to check out my deep dive into scraping below.
