React and Spring Boot Security
There are a lot of online resources on Spring Boot, Spring Security and React. Still, building an application with a React frontend and a Spring Boot backend, I did not find one resource that provided all the information I wanted. So in this article, I’ll tell you how I built my application and show you the links you may need.
My goal was and is the following. I have inherited the correspondence of an artist family in Amsterdam, the Schwartze family. I am not related to them, my dad bought the letters for the stamps, I inherited them when he died in 2014.
The painter Thérèse Schwartze was the first woman in the Netherlands who could make a living as a portrait painter. Her best known work is a painting of the young queen Wilhelmina. Her niece, Lizzy Ansingh, was one of the Amsterdamse Joffers, a group of female painters at the beginning of the 20th century. I am writing a book about the family, using the 566 letters in the collection. In order to make my work easier, I scanned and transcribed all letters, I stored the scan images and text files, and I recorded meta information in a postgres database. Then I created a web site containing all letters and meta info. The front-end is in Reactjs, the backend in Spring Boot. The full project is available here.
I am an entrepreneur and a Java developer. I have some experience with React and javascript. I started with a flat one-table postgres database into which I manually entered the letters (date, sender, recipient, etc) while I was doing the scanning and transcribing. I then created a model in Java (JPA) and imported the flat database into that. There are plenty of resources online about Spring Boot, I personally like Baeldung. This is an introduction to React Router, and I used React Table which gave me a browsable html table for the hundreds of letters out of the box.
When you have a javascript frontend using an api that may be on a different server or different url, you need CORS, Cross Origin Resource Sharing. For security reasons, browser-based applications are not allowed to load resources from other sites than the site your browser is pointing at. Because your React application wants to load data from your API, you need an exception to this security rule. CORS provides a way to create such an exception. Fortunately, Spring Boot supports CORS out of the box with an @CrossOrigin annotation. You put “@CrossOrigin” in your controller:
I use basic authentication, I won’t have a lot of users (only myself, in fact) that will need to update or edit the web site. This is an example of basic auth in React I borrowed from. The front-end does a simple login to the server, the response contains the privileges that the user has, and sets the visibility of UI elements where applicable. Currently there are two roles: ADMIN, and everything else. If admin is logged in, there are EDIT and UPDATE buttons on most pages. The security is in the backend: only a user logged in as ADMIN can update data. With my limited knowledge of React and javascript, this is what I did:
For authenticating a user, I use a database via dao’s, which is different from the Spring repositories that most people seem to use. There is a UserDetailsService that you need to implement, with a method “loadUserByUsername(String userName)” via which Spring accesses the user to authenticate.
Most examples use the email address as the identifier, I use the username because I am not interested in an email address at this stage. This is my WebSecurityConfig
Here it is explained what antMatchers do (section 11.4). I put in httpBasic for basic authentication, one line to permit all for “HttpMethod.OPTIONS” to allow for preflight (CORS) requests, a line to limit the access to /admin to admin users, and a line to permit everything else to everyone else. When I was testing with a rest client, it turned out I had to switch on “preemptive auth” to make it work. React publishes the site on pengu.christine.nl:3000 (my dev server), I decided not to implement SSL in React but rather use a proxy. Via Apache proxypass the url “https://pengu.christine.nl” is proxied to http://pengu.christine.nl:3000.
I was having an issue with the main page not loading after login, it turned out that Spring could not decode the basic authentication header I sent, when I set it to this it worked:
After I implemented Spring Security, my MockMvc unit tests failed with a 403 error. Here it is explained what you need to do to allow Spring Security in your unit tests. You need to add a csrf token to your mockMvc to make it work.
You add a mock user to your test:
I use @SpringRunner and @WebMvcTest annotations, and a “test” profile that determines I use the right implementations when testing and exclude beans I don’t want during testing.
One more thing is that I don’t want to have passwords for databases and keystores in my project, so for those I use a properties file that is loaded at server startup.
Having finished this first version of my application, I will now start writing the book. I will use the site to save all documentation for the book and I will publish the site when the book somes out.
The book will be titled “Het nichtje van tante Thérèse” (“The niece of aunt Thérèse”), referencing the main subjects of my story: Thérèse Schwartze and her niece Lizzy Ansingh.
