Change login page for Keycloak on Docker ASAP
Every single time that’s a have a “🤑🤑 1 billion dollar 🤑 🤑” app idea I start to code and need setup a security stuffs at my project. Until there, a lost the faith on. 😴
Keycloak come to my world as a rapid solution for these ideas AND for every microservice thats i had create. It’s complete, secure and quick to deploy. But it’s a pain in the ass to customize a login page. So I decide to create this tutorial to teach how a do that ASAP!
All source code it’s on:
Let’s start creating a folder that’s we will put as a volume into de Keycloak container to show up as login theme at realm settings. At shell:
- mkdir keycloak-theme
- cd keycloak-theme
- mkdir medium-theme (this is the name that’s show up into ream settings)
- code . (let’s use VSCode)
Into the “medium-theme” folder, create a login folder with a file “theme.properties”, a folder resources, into it, css and img folders, into the css “styles.css” file and finally at img folder, put your logo there.
Edit the theme.properties with:
parent=keycloak
import=common/keycloak
styles=css/login.css css/tile.css css/styles.css
(Im using the default theme as a parent to try not lose my faith ��. But you can use a base parent and build from scratch)
This last line tell to template engine to keep the Keycloak css of keycloack default theme and load our css file replacing that we want.
It’s look like:
Ok.. Let’s throw the folder into docker to see it. The docker compose file looks like:
Line 29: I put my theme into the container’s right place.
Then… “docker-container up -d”. Open you browser, logon Keycloak and the our theme show up:
Select and save. Open a new anonymous tab, and see the theme:
Yep, it’s the same of default. It’s was our objective until here.
So, open the css file and let’s change the theme, finally.
And… voila.
Our Medium login. (Maybe it’s necessary do “docker-compose down” and “up” again, cache and this stuffs…)
As I said, this is an ASAP tutorial. There are many many things that you can do with this volume on docker like customize account, admin, common, email, welcome pages. I focused on my pain.
Thats it, hope could help!
