The goal of this project is to implement an application called book-app to manage books. For it, we will implement a back-end Spring Boot application called book-api and a front-end React application called book-ui. Besides, we will use Basic Authentication to secure both applications.

On ivangfr.github.io, I have compiled my Proof-of-Concepts (PoCs) and articles. You can easily search for the technology you are interested in by using the filter. Who knows, perhaps I have already implemented a PoC or written an article about what you are looking for.

• [Medium] Implementing A Full Stack Web App Using Spring-Boot and React
• [Medium] Implementing Social Login in a Spring Boot and React App
• [Medium] Building a Web Chat with Social Login using Spring Boot: Introduction
• [Medium] Building a Single Spring Boot App with Keycloak or Okta as IdP: Introduction

• book-api

  Spring Boot Web Java backend application that exposes a Rest API to create, retrieve and delete books. If a user has ADMIN role he/she can also retrieve information of other users or delete them.

  The application's secured endpoints can only be accessed if a user has valid credentials (username and password) and has authorization roles for it.

  book-api stores its data in a Postgres database.

  book-api has the following endpoints:

  Endpoint 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

• book-ui

  React frontend application where a user with role USER can retrieve the information of a specific book or a list of books. On the other hand, a user with role ADMIN has access to all secured endpoints.

  To log in, a user or admin must provide valid username and password credentials. book-ui communicates with book-api to get books and users data.

  book-ui uses Mantine as a UI component library, with Tabler Icons for icons.

• npm
• Java 25 or higher;
• A containerization tool (e.g., Docker, Podman, etc.)
• Bash 4.0 or higher (macOS ships with Bash 3.2; install via brew install bash)

• In a terminal, make sure you are inside the springboot-react-basic-auth root folder;

• Run the following command to start docker compose containers:

  docker compose up -d

• book-api

  • Open a terminal and navigate to the 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 the 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 application:

    npm start

Note: the credentials shown in the table are the ones already pre-defined. You can signup new users.

• The gif below shows a user logging in:

• The gif below shows an admin logging in:

• 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 and password 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 the admin credentials (admin/admin) or user ones (user/user). Then, click Authorize and, finally, click Close button;

  • Make some calls 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 credentials:

    curl -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 with user credentials:

    curl -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 with user credentials:

    curl -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 role ADMIN, it should return:

    HTTP/1.1 403 { "timestamp": "...", "status": 403, "error": "Forbidden", "message": "Forbidden", "path": "/api/books" }

  • Call POST /api/books with admin credentials:

    curl -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 the 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 | 204 | ......................... + ............. + ........... + ............ | GET /api/books | 401 | 200 | 200 | POST /api/books | 401 | 403 | 201 | DELETE /api/books/abc | 401 | 403 | 204 | ------------------------------------------------------------------------ [200] Success - [201] Created - [204] No Content - [401] Unauthorized - [403] Forbidden

• Postgres
  docker exec -it postgres psql -U postgres -d bookdb \dt

• To stop book-api and book-ui, go to the terminals where they are running and press Ctrl+C;

• To stop and remove Docker Compose containers, network, and volumes, go to a terminal and, inside the springboot-react-basic-auth root folder, run the command below:

  docker compose down -v

• book-api

  • Open a terminal and navigate to the springboot-react-basic-auth/book-api folder;

  • Run all tests:

    ./mvnw clean test

• book-ui

  • Open a terminal and navigate to the springboot-react-basic-auth/book-ui folder;

  • Run all tests:

    npm test

• In a terminal, make sure you are in the springboot-react-basic-auth/book-ui folder;

• Run the following commands:

  npm upgrade npm i -g npm-check-updates ncu -u npm install

• Spring Boot module (book-api): Code is formatted using Spotless with Google Java Format.

  To check or apply formatting, make sure you are inside the module folder and run the following command:

  • Check formatting:

    ./mvnw spotless:check

  • Auto-fix formatting:

    ./mvnw spotless:apply

• React module (book-ui): Code is formatted using Prettier with rules aligned to the project's style guide (2-space indentation, single quotes, no trailing semicolons). ESLint conflicts are resolved via eslint-config-prettier. Configuration is defined in .prettierrc (formatting rules) and .editorconfig (editor consistency).

  To check or apply formatting, make sure you are inside the book-ui folder and run the following commands:

  • Check formatting:

    npm run format:check

  • Auto-fix formatting:

    npm run format

[Medium]: How I Reduce GIF and Screenshot Sizes for My Technical Articles on macOS

If you find this useful, consider buying me a coffee:

This project is licensed under the MIT License.

• https://www.taniarascia.com/using-context-api-in-react/
• https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71
• https://jasonwatmore.com/post/2018/09/11/react-basic-http-authentication-tutorial-example