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.
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.