Skip to content

This project aims to explain how Keycloak works and its mechanism, by integrating KeyCloak into a React project.

Notifications You must be signed in to change notification settings

motnip/keycloak-js-login

Repository files navigation

KeyCloak and React

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.

Installation

Install and run the project.

Clone the projet:

  git@github.com:motnip/keycloak-js-login.git
  cd keycloak-js-login

Keycloak server

Run the keycloak server. From the projetc root folder run:

  docker-compose up -d

This 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.

Users and roles

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:

React app

Let us move to the React side. Back on the terminal and run:

From the project root folder run:

  yarn Install

and then

  yarn start

This command will start the application.

Open your browser and go to localhost:3000.

Good learning!

Acknowledgements

License

GPLv3 License

Authors

About

This project aims to explain how Keycloak works and its mechanism, by integrating KeyCloak into a React project.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published