Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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.

Notifications You must be signed in to change notification settings

ivangfr/springboot-react-basic-auth

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

107 Commits

Repository files navigation

springboot-react-basic-auth

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.

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

Project Diagram

project-diagram

Applications

  • 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 Semantic UI React as CSS-styled framework.

Prerequisites

Start Environment

  • 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

Running book-app using Maven & Npm

  • 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

Applications URLs

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.

Demo

Testing book-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 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 | 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
      

Util Commands

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

Shutdown

  • 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

How to upgrade book-ui dependencies to latest version

  • 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

References

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /