Use React and Spring Boot to Build a Simple CRUD App

Developer Blog Comments
1

React was designed to make it painless to create interactive UIs. Its state management is efficient and only updates components when your data changes. Component logic is written in JavaScript, meaning you can keep state out of the DOM and create encapsulated components.

Developers like CRUD (create, read, update, and delete) apps because they show a lot of the base functionality you need when creating an app. Once you have the basics of CRUD completed in an app, most of the client-server plumbing is finished, and you can move on to implementing the necessary business logic.

Today, I’ll show you how to create a basic CRUD app with Spring Boot and React. In this tutorial, I’ll use the OAuth 2.0 Authorization Code flow and package the React app in the Spring Boot app for production. At the same time, I’ll show you how to keep React’s productive workflow for developing locally.

This is a companion discussion topic for the original entry at https://developer.okta.com/blog/2022/06/17/simple-crud-react-and-spring-boot
2

Hello Matt, Thanks for the very nice tutorial for frontend beginners like me. I did a clone of the repo, everything is working but i have noticed a slight issue. In the first section of the article w/o Okta, the data that were pre-populated with our Spring Boot were nicely displayed on the react front end. On the second section which we have enabled the Okta code, on successfully authenticated, these pre-populated data do not appear on the front end. When i attemptted to create a new event, the event id is 6 (which means the pre-populated data exist but react is not showing)

I am using Java 18.0.2.1 and node v16.18.0. There are no errors on the console.

3
4

Hi Melvin,

This is because in the first part of the tutorial, there is no filter on the /groups endpoint:

@GetMapping("/groups")
Collection<Group> groups() {
    return groupRepository.findAll();
}

After adding Okta, the groups list is filtered by user:

@GetMapping("/groups")
Collection<Group> groups(Principal principal) {
    return groupRepository.findAllByUserId(principal.getName());
}

If you change it back to the previous groupRepository.findAll(), you’ll see all the groups. Please let me know if this answers your question.

5

Its working now. Thanks for the great help !

6

Dear Sir,
I have followed the steps till the end. Everything worked like a charm except for one issue while logging out!
I have got the following error while logging out.
What could be the cause?

image
image584Ă—748 41.4 KB

Thanks in advance!
-Krishna

7

Hi @krishna444!

It looks like you need to register your “post logout redirect uri”. You may have registered the wrong one initially.
Use the URL from the error message to go directly to the page to update your application.

You can find the URL in the logout_redirect_uri parameter in the address bar (but it will be URL encoded, so you will need to decode it)
If you click the error to expand the section, it may also be in the Technical details section of the error message.

Keep us posted!

1 Like
8

Thanks a lot, @bdemers !
Yes, you are right, the logout URL was incorrect, actually, the wrong port was given. You caught it! Now, it is working like a charm!

Thanks again!
Krishna

9

Hi,
my question is more about user session… if sprinboot app is configured as oauth2 client and this backend is issuing and refreshing tokens with built in spring methods, which cookie entry at browser side does spring application send to react app to distinguish logged in users, since you do not send JWT to the browser?

Regards,
Goran

10

It just uses the regular JSESSIONID cookie that Tomcat sends. There’s also an XSRF-TOKEN cookie to prevent cross-site request forgery.