Use React and Spring Boot to Build a Simple CRUD App

Raju N

One question, following this approach we cannot scale an application by having many backend instances with a load balancer in the front. Because in this case we might need the load balancer to implement some sort of sticky session with a database.

Matt Raible

Have you tried distributing the session with Spring Session and Redis? That’s what I recommend. We’ll publish a blog post on how to do it in the coming months.

satish rao

When I am connected to the corporate network, I get the below error:

Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘clientRegistrationRepository’ defined in class path resource [org/springframework/boot/autoconfigure/security/oauth2/client/servlet/OAuth2ClientRegistrationRepositoryConfiguration.class]: Bean instantiation via factory method failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.springframework.security.oauth2.client.registration.InMemoryClientRegistrationRepository]: Factory method ‘clientRegistrationRepository’ threw exception; nested exception is java.lang.IllegalArgumentException: Unable to resolve Configuration with the provided Issuer of “<corporate.issuer.okta.com>”
Caused by: org.springframework.web.client.ResourceAccessException: I/O error on GET request for “https://amex.okta.com/.well… Operation timed out (Connection timed out); nested exception is java.net.ConnectException: Operation timed out (Connection timed out)

The application won’t even start up because of this connection issue. I have tried passing the corporate proxy in the VM Args

-Dhttp.proxyHost=proxy.corp.com -Dhttp.proxyPort=8080 -Dhttps.proxyHost=proxy.corp.com -Dhttps.proxyPort=8080

But it does not seem to take the proxy. When I am not connected to my corporate network, I am able to start the application and I am able to see the UI redirect to the okta login, etc.

How can I have spring security talk to Okta issuer through proxy?

Phillip Nguyen

Hi Matt,

I’m running into a CORS issue when attempting to logout from the Home page.

Access to fetch at ‘http://localhost:8080/api/logout’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

I already annotated the logout post mapping with @CrossOrigin but I am still receiving the same error as above. I also, just to be sure, added localhost:3000 to Trusted Origin in Okta, but, again, receiving the same error above.

Thanks again in advance!

Matt Raible

Once you add Spring Security to the mix, @CrossOrigin won’t work anymore. In my experience, you have to use a filter to make CORS work. It’s possible that modifying the CORS configuration works too. https://stackoverflow.com/q…

satish rao

Hi Matt, don’t mean to hijack another thread, but was wondering if you could answer my question below on running this behind a corporate proxy? Again, when not running in my corporate network, I am able to run this application just fine with the okta login page redirect, etc.

Matt Raible

You might try these settings. To be honest, I’m not sure as I haven’t had to do it. I did create an issue for our Spring Boot starter.

Phillip Nguyen

Nice - the post from user Theo Dury provided the solution that seemed to work! Thanks again man!

Ankit Kaushik

Hi ,
There is authentication part but no authorization is being done. In other tutorials , I saw that we create a group , add user to that group and add claim of group to the token. But what need to be done on spring boot side ?

Matt Raible

If you have a “groups” claim in your ID token, Spring Boot will automatically convert your groups to authorities (if you’re using the Okta Spring Boot Starter). Our Spring Method Security with PreAuthorize blog post might help.

Vihari Vs

Is it possible to bring up react instance along with tomcat of spring boot? basically I mean as a single instance

Matt Raible

Yep! That’s what this tutorial shows. After you do the last part, you’ll have a single artifact that you can run. If you want to deploy a Spring Boot app to Tomcat, see Deploy a Spring Boot Application into Tomcat.

Alex Jose Silva

Congratulations!!!

Zari And Stuff

Matt:
I have a question, again:
There were some issues that you had helped me a few months ago and that part is not a problem anymore. I am facing a different issue, following your design pattern. So, all routs work like a charm when react is on the Port 3000 and Java Spring on 8080. However, when I do a prod build and everything is running on 8080, only things that are working are the Home page (route /) and Okta authentication. All other calls are throwing 404s. So basically, it is calling backend for a particular url and there is no response. Now, even in a case when backend is responding with a JSON in the browser, there is no rendering done on the client side. It is probably something “stupid” on my end, but I am asking. In summary, routs are broken: It is 404 if that call does not exist in the backend, or JSON without any client side rendering.

Thank you for your advice.

Vladimir

Matt Raible

This happens because you haven’t configured Spring MVC to serve up your SPA. This Stack Overflow answer should help.

Zari And Stuff

Awesome! I owe you a beer.

Sumit Bhardwaj

Hello Matt, Thanks for the very nice tutorial for frontend beginners like me. I am trying to develop a basic UI similar to this using Spring boot and react. Although I have setup the project successfully I want to pass the selected row data when I click Update and not fetch again from server. I haven’t found a solution yet. Do you have some ideas how it can be done?

Thank you in advance!

Pablo Sandoval

hello i know this is a few years old but how do you add the id when adding something new every time i add something it comes out in the front end but in the back end the id for the group is set to null would like an explanation pls and thank.

Matt Raible

Can you try cloning the example from this post and seeing if you can reproduce the problem there? If so, please enter an issue on GitHub with steps to reproduce.

Bhuman Soni

There’s this post on this topic as well but it focuses more on the react side of things with a TDD approach. There are links to both the React front-end and the Spring-boot backend Github repositories as well.
https://mydaytodo.com/build…