{"id":18048054,"url":"https://github.com/ivangfr/springboot-react-jwt-token","last_synced_at":"2025-04-04T13:09:06.434Z","repository":{"id":38314162,"uuid":"254624701","full_name":"ivangfr/springboot-react-jwt-token","owner":"ivangfr","description":"The goal of this project is to implement an application called order-app to manage orders. For it, we will implement a back-end Spring Boot application called order-api and a font-end React application called order-ui. Besides, we will use JWT Authentication to secure both applications.","archived":false,"fork":false,"pushed_at":"2025-03-10T16:21:19.000Z","size":8070,"stargazers_count":168,"open_issues_count":0,"forks_count":54,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-28T12:06:17.287Z","etag":null,"topics":["docker","java","javascript","jsonwebtoken","jtw","jwt-authentication","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-10T12:04:48.000Z","updated_at":"2025-03-15T10:25:05.000Z","dependencies_parsed_at":"2024-12-21T06:07:49.265Z","dependency_job_id":"0ccb3d17-59cc-4536-8b6b-d23cddbd68a7","html_url":"https://github.com/ivangfr/springboot-react-jwt-token","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-jwt-token","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-jwt-token/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-jwt-token/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Fspringboot-react-jwt-token/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivangfr","download_url":"https://codeload.github.com/ivangfr/springboot-react-jwt-token/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182338,"owners_count":20897379,"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":["docker","java","javascript","jsonwebtoken","jtw","jwt-authentication","postgresql","react","semantic-ui-react","spring-boot","spring-data-jpa","spring-security","spring-web-mvc","springdoc-openapi"],"created_at":"2024-10-30T20:11:06.670Z","updated_at":"2025-04-04T13:09:06.417Z","avatar_url":"https://github.com/ivangfr.png","language":"Java","funding_links":["https://github.com/sponsors/ivangfr"],"categories":[],"sub_categories":[],"readme":"# springboot-react-jwt-token\n\nThe goal of this project is to implement an application called `order-app` to manage orders. For it, we will implement a back-end [`Spring Boot`](https://docs.spring.io/spring-boot/index.html) application called `order-api` and a font-end [React](https://react.dev/) application called `order-ui`. Besides, we will use [`JWT Authentication`](https://en.wikipedia.org/wiki/JSON_Web_Token) 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- ### order-api\n\n  `Spring Boot` Web Java backend application that exposes a Rest API to create, retrieve, and delete orders. If a user has the `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 valid JWT access token is provided.\n  \n  `order-api` stores its data in [`Postgres`](https://www.postgresql.org/) database.\n\n  `order-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/numberOfOrders`                                  | 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/orders [?text]`                                     | Yes     | `ADMIN`         |\n  | `POST /api/orders -d {\"description\"}`                         | Yes     | `ADMIN`, `USER` |\n  | `DELETE /api/orders/{id}`                                     | Yes     | `ADMIN`         |\n\n- ### order-ui\n\n  `React` frontend application where a user with role `USER` can create an order and retrieve a specific order. On the other hand, a user with role `ADMIN` as access to all secured endpoints.\n  \n  In order to access the application, a `user` or `admin` must log in using his/her `username` and `password`. All the requests coming from `order-ui` to secured endpoints in `order-api` include the JWT access token. This token is generated when the `user` or `admin` logs in.\n  \n  `order-ui` uses [`Semantic UI React`](https://react.semantic-ui.com/) as a 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)\n- Some containerization tool [`Docker`](https://www.docker.com/), [`Podman`](https://podman.io/), etc.\n- [`jq`](https://jqlang.github.io/jq/)\n\n## Start Environment\n\n- In a terminal, make sure you are inside the `springboot-react-jwt-token` root folder;\n\n- Run the following command to start Docker Compose containers:\n  ```\n  docker compose up -d\n  ```\n\n## Running order-app using Maven \u0026 Npm\n\n- **order-api**\n\n  - Open a terminal and navigate to the `springboot-react-jwt-token/order-api` folder;\n\n  - Run the following `Maven` command to start the application:\n    ```\n    ./mvnw clean spring-boot:run\n    ```\n\n- **order-ui**\n\n  - Open another terminal and navigate to the `springboot-react-jwt-token/order-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| order-api   | http://localhost:8080/swagger-ui.html |                                                     |\n| order-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` loging in:\n\n  ![user-login](documentation/user-login.gif)\n\n- The gif below shows an `admin` loging in:\n\n  ![admin-login](documentation/admin-login.gif)\n\n## Testing order-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 JWT access token;\n\n  - Click `POST /auth/authenticate` and then, click `Try it out` button;\n  \n  - Provide the `user` credentials `username` and `password`:\n    ```\n    { \"password\": \"user\", \"username\": \"user\" }\n    ```\n  \n  - Click the `Execute` button. It should return something like:\n    ```\n    Code: 200\n    { \"accessToken\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9...\" }\n    ```\n    \u003e **Note 1**: You can use the `admin` credentials to access more secured endpoints.\n    \u003e\n    \u003e **Note 2**: The token will expire in **10 minutes**.\n\n  - Copy the `accessToken` value (**without** the double quotes);\n  \n  - Click the `Authorize` button at the top of the page;\n  \n  - In `Value` input field, paste the copied token;\n  \n  - Click the `Authorize` button and then, click the `Close` button;\n  \n  - To create an order, click `POST /api/orders` and then, click the `Try it out` button;\n\n  - Provide the `description` of the order:\n    ```\n    { \"description\": \"Buy two iPhones\" }\n    ```\n\n  - Click the `Execute` button. It should return something like:\n    ```\n    Code: 200\n    {\n      \"id\": \"718c9f40-5c06-4571-bc3e-3f888c52eff2\",\n      \"description\": \"Buy two iPhones\",\n      \"user\": { \"username\": \"user\" },\n      \"createdAt\": \"...\"\n    }\n    ```\n\n- **Manual Endpoints Test using curl**\n\n  - Open a terminal;\n  \n  - Call `GET /public/numberOfUsers`:\n    ```\n    curl -i localhost:8080/public/numberOfUsers\n    ```\n    It should return:\n    ```\n    HTTP/1.1 200\n    2\n    ```\n\n  - Call `GET /api/orders` without JWT access token:\n    ```\n    curl -i localhost:8080/api/orders\n    ```\n    As for this endpoint a valid JWT access token is required, it should return:\n    ```\n    HTTP/1.1 401\n    ```\n\n  - Call `POST /auth/authenticate` to get the `admin` JWT access token:\n    ```\n    ADMIN_ACCESS_TOKEN=\"$(curl -s -X POST http://localhost:8080/auth/authenticate \\\n      -H 'Content-Type: application/json' \\\n      -d '{\"username\": \"admin\", \"password\": \"admin\"}' | jq -r .accessToken)\"\n    echo $ADMIN_ACCESS_TOKEN\n    ```\n\n  - Call `GET /api/orders` again, now with the `admin` JWT access token:\n    ```\n    curl -i -H \"Authorization: Bearer $ADMIN_ACCESS_TOKEN\" localhost:8080/api/orders\n    ```\n    It should return an empty array or an array with orders:\n    ```\n    HTTP/1.1 200\n    [ ... ]\n    ```\n\n  - Call `GET /api/users/me` to get more information about the `admin`:\n    ```\n    curl -i -H \"Authorization: Bearer $ADMIN_ACCESS_TOKEN\" localhost:8080/api/users/me\n    ```\n    It should return:\n    ```\n    HTTP/1.1 200\n    {\n      \"id\": 1, \"username\": \"admin\", \"name\": \"Admin\", \"email\": \"admin@mycompany.com\", \"role\": \"ADMIN\",\n      \"orders\": []\n    }\n    ```\n\n- **Automatic Endpoints Test**\n\n  - Open a terminal and make sure you are in the `springboot-react-jwt-token` root folder;\n\n  - Run the following script:\n    ```\n    ./order-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 access token\n    ------------------\n    eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImlhdCI6MTU4Nj..._ha2pM4LSSG3_d4exgA\n    \n    user access token\n    -----------------\n    eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImlhdCIyOSwian...Y3z9uwhuW_nwaGX3cc5A\n    \n    POST auth/signup\n    ================\n    user2 access token\n    ------------------\n    eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJleHAiOjE1ODY2MjM1MjksImanRpIjoiYTMw...KvhQbsMGAlFov1Q480qg\n    \n    Authorization\n    =============\n                    Endpoints | without token |  user token |  admin token |\n    ------------------------- + ------------- + ----------- + ------------ |\n     GET public/numberOfUsers |           200 |         200 |          200 |\n    GET public/numberOfOrders |           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/orders |           401 |         403 |          200 |\n             POST /api/orders |           401 |         201 |          201 |\n      DELETE /api/orders/{id} |           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 orderdb\n  \\dt\n  ```\n\n- **jwt.io**\n\n  With [jwt.io](https://jwt.io), you can input the JWT token, and the online tool decodes the token, showing its header and payload.\n\n## Shutdown\n\n- To stop `order-api` and `order-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-jwt-token` root folder, run the command below:\n  ```\n  docker compose down -v\n  ```\n\n## How to upgrade order-ui dependencies to latest version\n\n- In a terminal, make sure you are in the `springboot-react-jwt-token/order-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.callicoder.com/spring-boot-security-oauth2-social-login-part-2/#jwt-token-provider-authentication-filter-authentication-error-handler-and-userprincipal\n- https://bezkoder.com/spring-boot-jwt-authentication/\n- https://dev.to/keysh/spring-security-with-jwt-3j76\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Fspringboot-react-jwt-token","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivangfr%2Fspringboot-react-jwt-token","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Fspringboot-react-jwt-token/lists"}