jwt-spring-boot-angular-scaffolding

This project is a multi-module application, using Spring Boot for the backend and Angular for the frontend. The project can be built into a single jar file using Maven. You can also run the modules separately during development.

The backend and frontend are secured with JSON Web Token.

To learn how to set up a project like this one, check out the following posts:

• Securing your Spring Boot and Angular app with JWT #1 – Introduction
• Securing your Spring Boot and Angular app with JWT #2 – Backend
• Securing your Spring Boot and Angular app with JWT #3 – Frontend
• Fix “Invalid CSRF token” error – add the XSRF-TOKEN header in Angular (when you enable csrf protection in SecurityConfig::configure)

Getting Started

To clone the repository, run in the command line:

$ git clone https://github.com/little-pinecone/jwt-spring-boot-angular-scaffolding.git

You can build the application with:

$ mvn clean install

Sign up request

You need to create a test user:

• path: http://localhost:8080/api/users

• body:

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

Add CSRF token to requests from Postman

• Copy this code to the Tests tab for the mutable requests:

var xsrfCookie = postman.getResponseCookie("XSRF-TOKEN");
pm.globals.set('csrftoken', xsrfCookie.value);

• Add the X-XSRF-TOKEN header that will use the {{csrftoken}} variable:

Overview and technical features

• The project currently serves a login page and hard-coded pastry data returned from the API.
• It allows registering new users, handles login requests.
• It serves data from the API to authenticated and authorized users.
• The user experience is enhanced thanks to the AuthGuard implementation.

Running tests

Run all backend tests with the following command in the root directory:

$ mvn test

Run all frontend tests with the following command in the frontend/src/main/angular directory:

$ ng test

Running in production

Set the target url in frontend/src/main/angular/src/proxy.conf.json to the path for the right environment. Add the "changeOrigin": true option if your backend is not running on localhost (Angular proxy documentation).

Override the default TokenProperties values. E.g. to override the expiration time of tokens you can add security.jwt.expiration=your_value to the application.properties file.

Built With

• Java 11
• Spring Boot 2.1.5, updated to Spring Boot 2.2.4
• Angular 6, updated to Angular 10
• Bootstrap 4
• Maven
• frontend-maven-plugin
• npm 6.13.7
• Node.js v12.14.1
• Dummy4j v0.5.0

Screenshots