You can use the JSON Web Token standard as a part of your authentication and authorisation solution in a project built with Spring Boot and Angular. Check out this post to learn how to apply Spring Security
, AuthGuard
and JWT
to your apps.
What we are going to build
The goal is to secure a multi-module application, written in Java 11
with Spring Boot
for the backend and Angular
for the frontend. The project can be built into a single jar file using Maven but we can also run the Angular app separately during development with the
$ ng serve command.
The finished project is available in the GitHub repository – little-pinecone/jwt-spring-boot-angular-scaffolding.
Architecture overview
You can see the final directory tree for the project on the image below:
The structure of the backend and frontend modules will be presented in the corresponding sections.
Requirements
I try to keep the project up to date. Visit the releases list to keep track of the current versions of frameworks and libraries used. |
- We are working on a
Spring Boot 2.1.1
project with theWeb
andH2
dependencies. You can read about setting up this project with Spring Initializr in How to create a new Spring Boot Project. - Angular CLI – a command line interface tool that generates a project as well as performs many development tasks.
I’m working onAngular 7
:
1234567891011121314151617$ ng --versionAngular CLI: 7.1.4Node: 10.15.0OS: linux x64Angular:...Package Version------------------------------------------------------@angular-devkit/architect 0.11.4@angular-devkit/core 7.1.4@angular-devkit/schematics 7.1.4@schematics/angular 7.1.4@schematics/update 0.11.4rxjs 6.3.3typescript 3.1.6 Java 11
– In case of problems with building an app, the Debugging the “Fatal error compiling: invalid target release: 11” issue. How to switch your development environment and IntelliJ settings to Java 11 post may help you find the reason.
1234$ java -versionopenjdk version "11" 2018-09-25OpenJDK Runtime Environment 18.9 (build 11+28)OpenJDK 64-Bit Server VM 18.9 (build 11+28, mixed mode)- This project was created on Kubuntu (Ubuntu 18.04 LTS) – remember to adjust commands if you don’t work on Linux OS.
12345$ lsb_release -aDistributor ID: UbuntuDescription: Ubuntu 18.04.1 LTSRelease: 18.04Codename: bionic - For the IDE I recommend IntelliJ IDEA Community Edition.
The starting point
We will start with an application having:
- a login page that is available for all users;
- an API endpoint serving a hardcoded list of cookies;
- a page displaying those cookies – we want to show it only to authorized users.
If you want to learn how to build a similar multi module application, check out the Integrate Angular with a Spring Boot project post.
Our starting point is marked by the 0.1.1 tag in the repository. From here we are beginning our work to secure the application.
This app serves two pages – one for the login form:
the second one for displaying cookies taken from the API:
We don’t want to show our treats to everyone, so we will apply the login/logout functionality to the project. |
Mind the CORS configuration
In our Cookie dispenser
app we have the Cross-Origin Resource Sharing already configured to allow calling the API and obtaining the Authorization header:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// jwt-spring-boot-angular-scaffolding/backend/src/main/java/in/keepgrowing/jwtspringbootangularscaffolding/config/DevCorsConfiguration.java … @Configuration @Profile("development") public class DevCorsConfiguration implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS") .exposedHeaders("Authorization"); } } |
We need this configuration activated only on the development environment
to run frontend on the default http://localhost:4200/
. We don’t want to be forced to rebuild the whole app only to see the changes made solely in the frontend part.
The CORS config is not needed on the production environment as the project is build into a single jar file and the whole app is served from the same origin.
Mind the routing control
In our Cookie dispenser
app Spring Boot already surrenders routing control to Angular:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// in.keepgrowing.jwtspringbootangularscaffolding.config/MvcConfiguration … @Configuration public class MvcConfiguration implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/**") .addResourceLocations("classpath:/static/") .resourceChain(true) .addResolver(new PathResourceResolver() { @Override protected Resource getResource(String resourcePath, Resource location) throws IOException { Resource requestedResource = location.createRelative(resourcePath); return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html"); } }); } … |
If you are building a project on your own, remember to implement this feature. Check out the Make Spring Boot surrender routing control to Angular post to learn more.
Secure the backend module
Check out the Securing your Spring Boot and Angular app with JWT #2 – Backend post to see how to:
- add Spring Security;
- handle creating new users with their credentials;
- create authentication and authorization filters;
- generate JWT tokens;
- implement login functionality;
- configure security.
Secure the frontend module
Check out the Securing your Spring Boot and Angular app with JWT #3 – Frontend post to see how to:
- handle login form;
- acquire and store the JWT token from the API;
- append the token to every API request;
- handle logout functionality;
- prevent an unauthorised user from accessing secured paths with AuthGuard.
If you want to see a similar project build with Spring Boot 2.1.2
, Angular 7
and Java 11
check out the repository of Scrum_ally – an app for project management.
Photo by Dhyamis Kleber on StockSnap
very good
I get 403 response when i try to create a user via Postman.I dont know what i’m doing wrong. I use the latest release:https://github.com/little-pinecone/jwt-spring-boot-angular-scaffolding/releases/tag/v1.2.1Any help is greatly appreciated.
NVM I’m stupid, i didn’t set my profile. Keep up the good work!