This project aims to explain how Keycloak works and its mechanism, using a simple ReactJS code.
The React application is a sample website with four pages:
- Welcome: it is a welcome page that doesn't require any login
- Public page: it is a page that does not require any log in
- Manager: Only users who have the role "manager" can access it. This page contains a simple HTML table with a list of employees
- User Details: Only users who have the role "manager" or "user" can access it. That page shows some information about the logged user. The page gets the user's data from the KeyCloak token.
A docker-compose file runs an instance of the KeyCloak server used by the React component application.
Moreover, there is a JSON file named realm-keycloak-tutorial.json. You can import this configuration file into the running Keycloak server, which recovers the setting I used to run the project or set the configuration up on your own.
Install and run the project.
Clone the projet:
git@github.com:motnip/keycloak-js-login.git
cd keycloak-js-loginRun the keycloak server. From the projetc root folder run:
docker-compose up -dThis command will run the Keycloak server. Now we need to import the configuration which set the application's client up.
Open the browser and go to localhost:8080 Click on "Administration console". Log in with user admin and password admin. (Don not use this in production! :D)
Now it is time to add a Realm for our application.
From "Administration console" page:
- On the left side menu click on master.
- A drop-down menu is open, then click on "Add realm".
- Import the configuration. Click on "select file" and pick, from the project root folder, the file named realm-keycloak-tutorial.json. Kyelcoak will import the setting for our project.
You can to import the configuration or you can set it up on your own following the link in the Acknowledgements section on the bottom.
Now we need to add two users to our application:
To do that:
- On the left side, select "Users".
- Click on "Add user", fill down the form and click save.
- Now set the password up. Click on the menu above "Credentials."
- Set the password and confirm it.
- Set temporary to off. This operation will not ask you to change the password. Click on "set password".
Now you need to assign a role to each user:
- Assign the role "user" to user@acme.com
- Assign the role "manager" to manager@acme.com.
Let us move to the React side. Back on the terminal and run:
From the project root folder run:
yarn Installand then
yarn startThis command will start the application.
Open your browser and go to localhost:3000.
Good learning!
