In this chapter, you will learn how to secure your first application with Keycloak. To make things a bit more interesting, the sample application you will be running consists of two parts, a frontend web application and a backend REST API. This will show you how a user can authenticate to the frontend, and also how the frontend is able to securely invoke the backend.
By the end of this chapter, you will have a basic understanding of how applications can be secured by Keycloak by leveraging OpenID Connect.
In this chapter, we're going to cover the following main topics:
- Understanding the sample application
- Running the application
- Understanding how to log in to the application
- Securely invoking the backend REST API
To run the sample application included in this chapter, you need to have Node.js (https://nodejs.org/) installed on your workstation.
You also need to have a local copy of the GitHub repository associated with the book. If you have Git installed, you can clone the repository by running this command in a terminal:
$ git clone https://github.com/PacktPublishing/Keycloak-Identity-and-Access-Management-for-Modern-Applications.git
Alternatively, you can download a ZIP of the repository from
Check out the following link to see the Code in Action video:
Understanding the sample application
- Login with Keycloak.
- It displays the user's name.
- It displays the user's profile picture, if available.
- It shows the ID token.
- It shows the Access token.
- It refreshes the tokens.
- It invokes the secured endpoint provided by the backend.
/public: A publicly available endpoint with no security
/secured: A secured endpoint requiring an access token with the
Running the application
If you don't already have Node.js installed on your workstation, go to https://nodejs.org/ for instructions on how to install it.
$ cd Keycloak-Identity-and-Access-Management-for-Modern-Applications/ch2/frontend/ $ npm install $ npm start
$ cd Keycloak-Identity-and-Access-Management-for-Modern-Applications/ch2/backend/ $ npm install $ npm start
Now that you have the sample application running with Node.js, you can register it with Keycloak, which we will cover in the next section.
Understanding how to log in to the application
In the previous chapter, covering how to get started with Keycloak, you learned how to run Keycloak, as well as how to create your first realm. Prior to continuing this section, you should have Keycloak running with the realm created as covered in the previous chapter. In summary, what you require before continuing is the following:
- Keycloak up and running
- A realm named
- A global role named
- A user with the preceding role
Before an application can log in with Keycloak, it has to be registered as a client with Keycloak.
Before registering the frontend, let's see what happens if an unregistered application tries to authenticate with Keycloak. Open
http://localhost:8000 and then click on the Login button.
You will see an error page from Keycloak with the message Client not found. This error is telling you that the application is not registered with Keycloak.
To register the frontend with...
Securely invoking the backend REST API
http://localhost:3000/ and click on the Public endpoint link. You will see a message saying Public message!. The public endpoint is not secured by Keycloak, and can be invoked without an access token.
Next, let's try the secured endpoint that is protected by Keycloak. Open
http://localhost:3000/ again. This time, click on the Secured endpoint link. Now you will see a message saying Access denied. The Keycloak Node.js adapter is denying requests to this endpoint as it requires a valid access token to invoke the endpoint.
Let's now try to invoke the secured endpoint from the frontend. Open
http://localhost:8000/ and click on Invoke Service. You will now see a message displayed saying Secret message!. If instead you get the message Access Denied, this is most likely caused by the user not having the
When you click Invoke Service, the frontend sends an AJAX request to the backend service, including the access...
In this chapter, you learned how to secure your first application, consisting of a frontend web application and a backend REST API with Keycloak. You also gained a basic understanding of how Keycloak leverages OpenID Connect to make this all happen in a standard and secure way. Together with what you learned in the first chapter of the book, you now have a solid foundation to start learning more about Keycloak.
In the next chapter, we will dive deeper into securing applications with Keycloak, giving you a better understanding of how it all works.
- How does an application authenticate with Keycloak?
- What do you need to configure in the Keycloak admin console in order to allow an application to authenticate with Keycloak?
- How does an application securely invoke a protected backend service?