{"id":18048039,"url":"https://github.com/ivangfr/springboot-react-basic-auth","last_synced_at":"2025-04-06T13:09:21.497Z","repository":{"id":38314573,"uuid":"254604486","full_name":"ivangfr/springboot-react-basic-auth","owner":"ivangfr","description":"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 font-end React application called book-ui. Besides, we will use Basic Authentication to secure both applications.","archived":false,"fork":false,"pushed_at":"2025-03-10T15:33:59.000Z","size":15097,"stargazers_count":96,"open_issues_count":0,"forks_count":26,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T12:06:48.295Z","etag":null,"topics":["basic-authentication","docker","java","javascript","npm","postgresql","react","semantic-ui-react","spring-boot","spring-data-jpa","spring-security","spring-web-mvc","springdoc-openapi"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivangfr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ivangfr"}},"created_at":"2020-04-10T10:12:50.000Z","updated_at":"2025-03-24T19:15:52.000Z","dependencies_parsed_at":"2024-01-12T00:04:49.219Z","dependency_job_id":"3ad27850-afae-4cf4-90e7-e21d330c082e","html_url":"https://github.com/ivangfr/springboot-react-basic-auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-basic-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-basic-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-basic-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-basic-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivangfr","download_url":"https://codeload.github.com/ivangfr/springboot-react-basic-auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485287,"owners_count":20946398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["basic-authentication","docker","java","javascript","npm","postgresql","react","semantic-ui-react","spring-boot","spring-data-jpa","spring-security","spring-web-mvc","springdoc-openapi"],"created_at":"2024-10-30T20:11:04.370Z","updated_at":"2025-04-06T13:09:21.478Z","avatar_url":"https://github.com/ivangfr.png","language":"Java","readme":"# springboot-react-basic-auth\n\nThe 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`](https://docs.spring.io/spring-boot/index.html) application called `book-api` and a font-end [React](https://react.dev/) application called `book-ui`. Besides, we will use [`Basic Authentication`](https://en.wikipedia.org/wiki/Basic_access_authentication) to secure both applications.\n\n## Proof-of-Concepts \u0026 Articles\n\nOn [ivangfr.github.io](https://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.\n\n## Additional Readings\n\n- \\[**Medium**\\] [**Implementing A Full Stack Web App Using Spring-Boot and React**](https://medium.com/@ivangfr/implementing-a-full-stack-web-app-using-spring-boot-and-react-7db598df4452)\n- \\[**Medium**\\] [**Implementing Social Login in a Spring Boot and React App**](https://medium.com/@ivangfr/implementing-social-login-in-a-spring-boot-and-react-app-6ce073c9983c)\n- \\[**Medium**\\] [**Building a Web Chat with Social Login using Spring Boot: Introduction**](https://medium.com/@ivangfr/building-a-web-chat-with-social-login-using-spring-boot-introduction-644702e6be8e)\n- \\[**Medium**\\] [**Building a Single Spring Boot App with Keycloak or Okta as IdP: Introduction**](https://medium.com/@ivangfr/building-a-single-spring-boot-app-with-keycloak-or-okta-as-idp-introduction-2814a4829aed)\n\n## Project Diagram\n\n![project-diagram](documentation/project-diagram.jpeg)\n\n## Applications\n\n- ### book-api\n\n  `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.\n  \n  The application's secured endpoints can only be accessed if a user has valid credentials (`username` and `password`) and has authorization roles for it.\n  \n  `book-api` stores its data in a [`Postgres`](https://www.postgresql.org/) database.\n\n  `book-api` has the following endpoints:\n\n  | Endpoint                                                      | Secured | Roles           |\n  | ------------------------------------------------------------- | ------- | --------------- |\n  | `POST /auth/authenticate -d {\"username\",\"password\"}`          | No      |                 |\n  | `POST /auth/signup -d {\"username\",\"password\",\"name\",\"email\"}` | No      |                 |\n  | `GET /public/numberOfUsers`                                   | No      |                 |\n  | `GET /public/numberOfBooks`                                   | No      |                 |\n  | `GET /api/users/me`                                           | Yes     | `ADMIN`, `USER` |\n  | `GET /api/users`                                              | Yes     | `ADMIN`         |\n  | `GET /api/users/{username}`                                   | Yes     | `ADMIN`         |\n  | `DELETE /api/users/{username}`                                | Yes     | `ADMIN`         |\n  | `GET /api/books [?text]`                                      | Yes     | `ADMIN`, `USER` |\n  | `POST /api/books -d {\"isbn\",\"title\"}`                         | Yes     | `ADMIN`         |\n  | `DELETE /api/books/{isbn}`                                    | Yes     | `ADMIN`         |\n\n- ### book-ui\n\n  `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.\n  \n  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.\n  \n  `book-ui` uses [`Semantic UI React`](https://react.semantic-ui.com/) as CSS-styled framework.\n\n## Prerequisites\n\n- [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [`Java 21`](https://www.oracle.com/java/technologies/downloads/#java21) or higher;\n- A containerization tool (e.g., [`Docker`](https://www.docker.com), [`Podman`](https://podman.io), etc.)\n\n## Start Environment\n\n- In a terminal, make sure you are inside the `springboot-react-basic-auth` root folder;\n\n- Run the following command to start docker compose containers:\n  ```\n  docker compose up -d\n  ```\n\n## Running book-app using Maven \u0026 Npm\n\n- **book-api**\n\n  - Open a terminal and navigate to the `springboot-react-basic-auth/book-api` folder;\n\n  - Run the following `Maven` command to start the application:\n    ```\n    ./mvnw clean spring-boot:run\n    ```\n\n- **book-ui**\n\n  - Open another terminal and navigate to the `springboot-react-basic-auth/book-ui` folder;\n\n  - Run the command below if you are running the application for the first time:\n    ```\n    npm install\n    ```\n\n  - Run the `npm` command below to start the application:\n    ```\n    npm start\n    ```\n\n## Applications URLs\n\n| Application | URL                                   | Credentials                                         |\n| ----------- | ------------------------------------- | --------------------------------------------------- |\n| book-api    | http://localhost:8080/swagger-ui.html |                                                     |\n| book-ui     | http://localhost:3000                 | `admin/admin`, `user/user` or signing up a new user |\n\n\u003e **Note**: the credentials shown in the table are the ones already pre-defined. You can signup new users.\n\n## Demo\n\n- The gif below shows a `user` logging in:\n\n  ![user-login](documentation/user-login.gif)\n\n- The gif below shows an `admin` logging in:\n\n  ![admin-login](documentation/admin-login.gif)\n\n## Testing book-api Endpoints\n\n- **Manual Endpoints Test using Swagger**\n\n  - 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;\n\n  - Click `Authorize` button (white/green one, almost at the top of the page, right side);\n\n  - 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;\n\n  - Make some calls to the endpoints.\n\n- **Manual Endpoints Test using curl**\n\n  - Open a terminal:\n\n  - Call `GET /public/numberOfBooks`:\n    ```\n    curl -i localhost:8080/public/numberOfBooks\n    ```\n    It should return\n    ```\n    HTTP/1.1 200\n    70\n    ```\n    \n  - Call `GET /api/books` without credentials:\n    ```\n    curl -i localhost:8080/api/books\n    ```\n    As this endpoint requires authentication, it should return:\n    ```\n    HTTP/1.1 401\n    { \"timestamp\": \"...\", \"status\": 401, \"error\": \"Unauthorized\", \"message\": \"Unauthorized\", \"path\": \"/api/books\" }\n    ```\n    \n  - Call again `GET /api/books` but now with `user` credentials:\n    ```\n    curl -i -u user:user localhost:8080/api/books\n    ```\n    It should return:\n    ```\n    HTTP/1.1 200\n    [\n      {\"isbn\":\"978-1-60309-445-0\",\"title\":\"A Shining Beacon\"},\n      {\"isbn\":\"978-1-891830-85-3\",\"title\":\"American Elf (Book 2)\"},\n      ...\n    ]\n    ```\n    \n  - Call `POST /api/books` with `user` credentials:\n    ```\n    curl -i -u user:user -X POST localhost:8080/api/books \\\n    -H \"Content-Type: application/json\" -d '{\"isbn\": \"9781617292545\", \"title\": \"Spring Boot in Action\"}'\n    ```\n    As `user` doesn't have the role `ADMIN`, it should return:\n    ```\n    HTTP/1.1 403\n    { \"timestamp\": \"...\", \"status\": 403, \"error\": \"Forbidden\", \"message\": \"Forbidden\", \"path\": \"/api/books\" }\n    ```\n    \n  - Call `POST /api/books` with `admin` credentials:\n    ```\n    curl -i -u admin:admin -X POST localhost:8080/api/books \\\n    -H \"Content-Type: application/json\" -d '{\"isbn\": \"9781617292545\", \"title\": \"Spring Boot in Action\"}'\n    ```\n    It should return:\n    ```\n    HTTP/1.1 201\n    { \"isbn\":\"9781617292545\",\"title\":\"Spring Boot in Action\" }\n    ```\n\n- **Automatic Endpoints Test**\n\n  - Open a terminal and make sure you are in the `springboot-react-basic-auth` root folder;\n  \n  - Run the following script:\n    ```\n    ./book-api/test-endpoints.sh\n    ```\n    It should return something like the output below, where it shows the http code for different requests:\n    ```\n    POST auth/authenticate\n    ======================\n    admin Auth Resp: {\"id\":1,\"name\":\"Admin\",\"role\":\"ADMIN\"}\n    \n    POST auth/authenticate\n    ======================\n    user Auth Resp: {\"id\":2,\"name\":\"User\",\"role\":\"USER\"}\n    \n    POST auth/signup\n    ================\n    user2 Auth Resp: {\"id\":3,\"name\":\"User2\",\"role\":\"USER\"}\n    \n    Authorization\n    =============\n                    Endpoints | without creds |  user creds |  admin creds |\n    ------------------------- + ------------- + ----------- + ------------ |\n     GET public/numberOfUsers |           200 |         200 |          200 |\n     GET public/numberOfBooks |           200 |         200 |          200 |\n    ......................... + ............. + ........... + ............ |\n            GET /api/users/me |           401 |         200 |          200 |\n               GET /api/users |           401 |         403 |          200 |\n         GET /api/users/user2 |           401 |         403 |          200 |\n      DELETE /api/users/user2 |           401 |         403 |          200 |\n    ......................... + ............. + ........... + ............ |\n               GET /api/books |           401 |         200 |          200 |\n              POST /api/books |           401 |         403 |          201 |\n        DELETE /api/books/abc |           401 |         403 |          200 |\n    ------------------------------------------------------------------------\n     [200] Success -  [201] Created -  [401] Unauthorized -  [403] Forbidden\n    ```\n\n## Util Commands\n\n- **Postgres**\n  ```\n  docker exec -it postgres psql -U postgres -d bookdb\n  \\dt\n  ```\n\n## Shutdown\n\n- To stop `book-api` and `book-ui`, go to the terminals where they are running and press `Ctrl+C`;\n\n- 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:\n  ```\n  docker compose down -v\n  ```\n\n## How to upgrade book-ui dependencies to latest version\n\n- In a terminal, make sure you are in the `springboot-react-basic-auth/book-ui` folder;\n\n- Run the following commands:\n  ```\n  npm upgrade\n  npm i -g npm-check-updates\n  ncu -u\n  npm install\n  ```\n\n## References\n\n- https://www.taniarascia.com/using-context-api-in-react/\n- https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71\n- https://jasonwatmore.com/post/2018/09/11/react-basic-http-authentication-tutorial-example\n","funding_links":["https://github.com/sponsors/ivangfr"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Fspringboot-react-basic-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivangfr%2Fspringboot-react-basic-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Fspringboot-react-basic-auth/lists"}