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.

11

Hello Matt,

There is a whiteError label page when I try to run java -jar on the file in the target folder. What is the best way to run this jar

12

This is normal for Spring Boot if you don’t have anything mapped to the / endpoint. Try http://localhost:8080/api/groups and you should see something.

13

hi all,
how to get access token for this application?

14

Are you using Okta or Auth0? If you’re using Okta, you can use OIDC Debugger to get an access token. How to Create an OIDC App on Okta | Okta Developer

If you’re using Auth0, you can use the Auth0 CLI:

auth0 test token -a https://<your-auth0-domain>/api/v2/
15

Thanks for response, i have setup this application, i need the access token in UI api/user call, is here anyway we can include token in it?

16

If you want an access token in the UI, you’ll have to modify the application to do the authentication in React. You should be able to use the Auth0 React SDK or the Okta React SDK. The reason I didn’t architect things that way in this tutorial is because it’s less secure.

17

Thanks, do you have any sample app for React and Spring boot (CURD) with access token? we have an existing application with React and Spring boot which uses IAM SAML authentication, we are planning to switch to OKTA authentication, if we can get access token the changes will be minimal in our application.

18

Please see this React example. At the bottom of the README, it links to a Spring Boot resource server example.

20

Hey thanks for the blog. I was wondering what is the DB schema if I were to implement this using a real db engine?

Thanks

21

You should be able to switch to a database like MySQL or PostgreSQL by adding the driver as a dependency and removing H2. Spring Data will create the schema for you, just like it does in this post. You can read the following post for how to integrate Spring Boot with PostgreSQL:

Or, you can use this one for MySQL: