springboot-react-jwt-token

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 front-end React application called order-ui. Besides, we will use JWT Authentication to secure both applications.

Proof-of-Concepts & Articles

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.

Additional Readings

• [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

Project Overview

Applications

• order-api

  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.

  The application's secured endpoints can only be accessed if a valid JWT access token is provided.

  order-api stores its data in Postgres database.

  order-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/numberOfOrders	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/orders [?text]	Yes	ADMIN
  POST /api/orders -d {"description"}	Yes	ADMIN, USER
  DELETE /api/orders/{id}	Yes	ADMIN

• order-ui

  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.

  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 or logs in.

Prerequisites

• 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)
• jq

Start Environment

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

• Run the following command to start Docker Compose containers:

  docker compose up -d
  

Running order-app using Maven & Npm

• order-api

  • Open a terminal and navigate to the springboot-react-jwt-token/order-api folder;

  • Run the following Maven command to start the application:

    ./mvnw clean spring-boot:run
    

• order-ui

  • Open another terminal and navigate to the springboot-react-jwt-token/order-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
    

Running Tests

• order-api

  • Open a terminal and navigate to the springboot-react-jwt-token/order-api folder;

  • Run all tests:

    ./mvnw clean test
    

• order-ui

  • Open a terminal and navigate to the springboot-react-jwt-token/order-ui folder;

  • Run all tests:

    npm test
    

Applications URLs

Application	URL	Credentials
order-api	http://localhost:8080/swagger-ui.html
order-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.

Demo

• The gif below shows a user loging in:

• The gif below shows an admin loging in:

Testing order-api Endpoints

• 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 JWT access token;

  • Click POST /auth/authenticate and then, click Try it out button;

  • Provide the user credentials username and password:

    { "password": "user", "username": "user" }
    

  • Click the Execute button. It should return something like:

    Code: 200
    { "accessToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9..." }
    

    Note 1: You can use the admin credentials to access more secured endpoints.

    Note 2: The token will expire in 10 minutes.

  • Copy the accessToken value (without the double quotes);

  • Click the Authorize button at the top of the page;

  • In Value input field, paste the copied token;

  • Click the Authorize button and then, click the Close button;

  • To create an order, click POST /api/orders and then, click the Try it out button;

  • Provide the description of the order:

    { "description": "Buy two iPhones" }
    

  • Click the Execute button. It should return something like:

    Code: 200
    {
      "id": "718c9f40-5c06-4571-bc3e-3f888c52eff2",
      "description": "Buy two iPhones",
      "user": { "username": "user" },
      "createdAt": "..."
    }
    

• Manual Endpoints Test using curl

  • Open a terminal;

  • Call GET /public/numberOfUsers:

    curl -i localhost:8080/public/numberOfUsers
    

    It should return:

    HTTP/1.1 200
    2
    

Util Commands

• Postgres

  docker exec -it postgres psql -U postgres -d orderdb
  \dt
  

• jwt.io

  With jwt.io, you can input the JWT token, and the online tool decodes the token, showing its header and payload.

Shutdown

• To stop order-api and order-ui, go t