The goal of this project is to secure game-app
using Keycloak
(with PKCE). game-app
consists of two applications: one is a Spring Boot Rest API called game-api
and another is a ReactJS application called game-web
.
game-app
is a web application to watch, create, update and delete our favorites games and comment these, we have three types of roles:
ADMIN
: They can watch, create, update, and delete games also they can comment on games and watch his profile.USER
: They can watch the games, they can comment on games and watch his profile.NON-REGISTER-USER
: They just can watch the existing games.
-
Spring Boot
Web Java backend application that exposes a REST API to manage games. Its secured endpoints can just be accessed if an access token (JWT) issued byKeycloak
is provided. It's implementinggame-api
is implemented using thehexagonal architecture
game-api
stores its data in aMySQL
database.game-api
has the following endpointsEndpoint Secured Roles GET /api/games
No GET /api/games/{id}
No POST /api/games
Yes ADMIN
PUT /api/games
Yes ADMIN
DELETE /api/games
Yes ADMIN
GET /api/users
Yes ADMIN
andUSER
POST /api/games/*/comments
Yes ADMIN
andUSER
-
ReactJS
frontend application whereusers
can watch and comment on games andadmins
can manage games. In order to access the application,user
/admin
must login using his/her username and password. Those credentials are handled byKeycloak
. All the requests coming fromgame-ui
to secured endpoints ingame-api
have a access token (JWT) that is generated whenuser
/admin
logs in.game-ui
usesSemantic UI React
as CSS-styled framework.
-
If you are using XAMPP, first create a database in
phpMyAdmin
with a nameworld_gamer_db
-
To run docker type this command in a terminal
docker run -p 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin --name keycloak quay.io/keycloak/keycloak:21.0.0 start-dev
-
Once the container is up enter to
keycloak
-
and there create the Realm:
world-game-app
-
in the Realm settings go to Login options and enable the User Registration switch
-
then create Client:
game-app
-
create the Client Roles:
ADMIN
andUSER
-
finally in the Realm roles options set the default roles up with the USER role
Application | ports |
---|---|
movie-api | 9090 |
movie-ui | 3000 |
Keycloak | 8080 |
MySQL | 3306 |
-
game-api
- Run the SpringSecurityApplication.java
-
game-ui
-
Open a terminal and navigate to
game-ui
folder -
Run the command below if you are running the application for the first time
npm install
-
Run the
npm
command below to start the applicationnpm start
-