The goal of this project is to implement an application called book-app
to manage books. For it, we will implement a back-end application called book-api
using Spring Boot
and a font-end application called book-ui
using ReactJS. Besides, we will use Basic Authentication
to secure both applications.
-
Spring Boot
Web Java backend application that exposes a Rest API to create, retrieve and delete books. If a user hasADMIN
role he/she can also retrieve information of other users or delete them.The application secured endpoints can just be just accessed if a user has valid credentials (
username
andpassword
) and has autorization roles for it.book-api
stores its data inMySQL
database.book-api
has the following endpointsEndpoint Secured Roles POST /auth/authenticate -d {"username","password"}
No POST /auth/signup -d {"username","password","name","email"}
No GET /public/numberOfUsers
No GET /public/numberOfBooks
No GET /api/users/me
Yes ADMIN
,USER
GET /api/users
Yes ADMIN
GET /api/users/{username}
Yes ADMIN
DELETE /api/users/{username}
Yes ADMIN
GET /api/books [?text]
Yes ADMIN
,USER
POST /api/books -d {"isbn","title"}
Yes ADMIN
DELETE /api/books/{isbn}
Yes ADMIN
-
ReactJS
frontend application where a user with roleUSER
can retrieve the information of a specific book or a list of books. On the other hand, a user with roleADMIN
has access to all secured endpoints.To login, a
user
oradmin
must provide validusername
andpassword
credentials.book-ui
communicates withbook-api
to getbooks
andusers
data.book-ui
usesSemantic UI React
as CSS-styled framework.
-
Open a terminal and inside
springboot-react-basic-auth
root folder rundocker-compose up -d
-
Wait for
mysql
Docker container to be up and running. To check it, rundocker-compose ps
-
book-api
-
Open a terminal and navigate to
springboot-react-basic-auth/book-api
folder -
Run the following
Maven
command to start the application./mvnw clean spring-boot:run
-
-
book-ui
-
Open another terminal and navigate to
springboot-react-basic-auth/book-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
-
Application | URL | Credentials |
---|---|---|
book-api | http://localhost:8080/swagger-ui.html | |
book-ui | http://localhost:3000 | admin/admin , user/user or signing up a new user |
Note: the credentials shown in the table are the ones already pre-defined. You can signup new users.
-
Manual Endpoints Test using Swagger
-
Open a browser and access http://localhost:8080/swagger-ui.html. All endpoints with the lock sign are secured. In order to access them, you need a valid
username
andpassword
credentials. -
Click
Authorize
button (white/green one, almost at the top of the page, right side) -
In the
Basic authentication
form that will open, provide theadmin
credentials (admin/admin
) oruser
ones (user/user
). Then, clickAuthorize
and, finally, clickClose
button. -
Make some call to the endpoints
-
-
Manual Endpoints Test using curl
-
Open a terminal
-
Call
GET /public/numberOfBooks
curl -i localhost:8080/public/numberOfBooks
It should return
HTTP/1.1 200 70
-
Call
GET /api/books
without credentialscurl -i localhost:8080/api/books
As this endpoint requires authentication, it should return
HTTP/1.1 401 { "timestamp": "...", "status": 401, "error": "Unauthorized", "message": "Unauthorized", "path": "/api/books" }
-
Call again
GET /api/books
but now withuser
credentialscurl -i -u user:user localhost:8080/api/books
It should return
HTTP/1.1 200 [ {"isbn":"978-1-60309-445-0","title":"A Shining Beacon"}, {"isbn":"978-1-891830-85-3","title":"American Elf (Book 2)"}, ... ]
-
Call
POST /api/books
withuser
credentialscurl -i -u user:user -X POST localhost:8080/api/books \ -H "Content-Type: application/json" -d '{"isbn": "9781617292545", "title": "Spring Boot in Action"}'
As
user
doesn't have the roleADMIN
, it should returnHTTP/1.1 403 { "timestamp": "...", "status": 403, "error": "Forbidden", "message": "Forbidden", "path": "/api/books" }
-
Call
POST /api/books
withadmin
credentialscurl -i -u admin:admin -X POST localhost:8080/api/books \ -H "Content-Type: application/json" -d '{"isbn": "9781617292545", "title": "Spring Boot in Action"}'
It should return
HTTP/1.1 201 { "isbn":"9781617292545","title":"Spring Boot in Action" }
-
-
Automatic Endpoints Test
-
Open a terminal and make sure you are in
springboot-react-basic-auth
root folder -
Run the following script
./book-api/test-endpoints.sh
It should return something like the output below, where it shows the http code for different requests
POST auth/authenticate ====================== admin Auth Resp: {"id":1,"name":"Admin","role":"ADMIN"} POST auth/authenticate ====================== user Auth Resp: {"id":2,"name":"User","role":"USER"} POST auth/signup ================ user2 Auth Resp: {"id":3,"name":"User2","role":"USER"} Authorization ============= Endpoints | without creds | user creds | admin creds | ------------------------- + ------------- + ----------- + ------------ | GET public/numberOfUsers | 200 | 200 | 200 | GET public/numberOfBooks | 200 | 200 | 200 | ......................... + ............. + ........... + ............ | GET /api/users/me | 401 | 200 | 200 | GET /api/users | 401 | 403 | 200 | GET /api/users/user2 | 401 | 403 | 200 | DELETE /api/users/user2 | 401 | 403 | 200 | ......................... + ............. + ........... + ............ | GET /api/books | 401 | 200 | 200 | POST /api/books | 401 | 403 | 201 | DELETE /api/books/abc | 401 | 403 | 200 | ------------------------------------------------------------------------ [200] Success - [201] Created - [401] Unauthorized - [403] Forbidden
-
- MySQL
docker exec -it -e MYSQL_PWD=secret mysql mysql -uroot --database bookdb show tables;
-
To stop
book-api
andbook-ui
, go to the terminals where they are running and pressCtrl+C
-
To stop and remove docker-compose containers, network and volumes, go to a terminal and, inside
springboot-react-basic-auth
root folder, run the command belowdocker-compose down -v
-
In a terminal, make sure you are in
springboot-react-basic-auth/book-ui
folder -
Run the following commands
npm upgrade npm i -g npm-check-updates ncu -u npm install