Use React and Spring Boot to Build a Simple CRUD App

I am geting error in the following snippets
Can you Please let me know, what could be the possible error

Hocine BENREZZOU

Thank you !

Update a group d’ont work, PUT /api/group/{id} never invoked.

I’ve fixed it in GroupEdit.js by :

async handleSubmit(event) {
event.preventDefault();
const {item} = this.state;

await fetch((item.id) ? ‘/api/group/’+(item.id) : ‘/api/group’, {
method: (item.id) ? ‘PUT’ : ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(item),
});
this.props.history.push(’/groups’);
}

Matt Raible

Hello Hocine: in the final GroupEdit.js, there’s CSRF protection. Your code doesn’t have this, but I doubt it’d cause the PUT to not be invoked. That’s the only difference I see in your code vs. mine. What browser are you using? I only tested this example on Chrome.

Agape Jeunide Teope

I added your code “(item.id) ? ‘/api/group/’+(item.id) : ‘/api/group’” to edit groups and it worked. Thank you.

Lirui Zhu

Hi,

Thank you for this great post.

I got a blank page, the browser redirect to “localhost:8080/private” after i try to login. I can see the login button in very first page, and the login form of OKTA. This situation happens when i run “./mvnw spring-boot:run -pProd”.

Then i switch dev profile, i can’t login anymore, always redirect to “localhost:8080/private”. I clear broswer then i can login in dev profile again. But never works for me in Prod profile.

Could you give me any advice. Thank you.

Matt Raible

Does this happen if you try it with your browser in incognito mode?

ayeshasilvia

Hello!
I am having some trouble with the logout functionality. I think my okta OIDC app setting is borked. Here is what I tried: I have cloned your repo, replaced the application.yml with mine but I am getting the following exception when I click on logout: "org.springframework.expression.spel.SpelEvaluationException: EL1008E: Property or field ‘idToken’ cannot be found on object of type ‘org.springframework.security.oauth2.core.user.DefaultOAuth2User’ - maybe not public or not valid?"

I guess it had something to do with my app setting. Do you have any suggestions?

Thanks
Ayesha

Matt Raible

Please make sure you’re using Spring Boot 2.1.0 M1. If that doesn’t solve the problem, I’d try creating a new “Web” application in Okta.

seominyoung

Perfect example

Ravikrishna Adepu

How do I bundle above project as a single war file to deploy on tomcat?

Matt Raible

This example already does that for you using its “prod” profile. Run ./mvnw spring-boot:run -Pprod and it’ll startup using its embedded Tomcat instance. If you want to package it, run ./mvnw package -Pprod.

If you really want to deploy it to Tomcat rather than using the embedded instance, see these instructions.

Ravikrishna Adepu

Thank you very much for the info. That helped.

Ania M

Hi, I have the same issue. Did you manage to solve it? How did you do that?

Lirui Zhu

I tried but it same. The issue looks related to Broswer. Like this:

1. Start prod, the issue happens.
2. Stop prod, start dev, issue same.
3. Clear broswer history, start dev, thing back OK.

Could you help? Thank you!

Matt Raible

If it doesn’t work when you’re running in incognito mode, I’m not sure what the issue could be. If you figure out a solution, please let me know.

Vlad

Hi.
Why doesn’t work in firefox? How to fix it?

Matt Raible

It should work in Firefox. Does your developer console have any errors in it?

Simon Bradley

Hi, I’m having the same issue as well. I’ve tried recreating a new Web application in Okta, but I’m still seeing the error.

Also, when I log in to my site I get redirected to : http://localhost:8080/private, which displays a generic white label error page. How would I get it to redirect back to the home page of the app? (localhost:3000).

Matt Raible

Hello Simon,

Are you using the code from this blog post?

I saw this issue when I was developing the app, but using an incognito window solved the problem. The following method is what redirects to Spring Security to login.


login() {
let port = (window.location.port ? ‘:’ + window.location.port : ‘’);
if (port === ‘:3000’) {
port = ‘:8080’;
}
window.location.href = ‘//’ + window.location.hostname + port + ‘/private’;
}

If you run npm start and run it on port 3000, the refererRequestCache bean will redirect you back to the referrer (as long as your API is running with the default dev profile). The /private URL doesn’t exist in the app, but it causes Spring Security to invoke the login. If you remove @Profile(“dev”) from this bean, does it solve the problem?

I’ll try to update this post and examine next week. I’m traveling this week, so no time.

Simon Bradley

Hi Matt,

Thanks for replying. I have been following this guide for a spring boot and react app. I tried doing what you said, but I still have the same issue as before. Running the app with npm start instead of yarn start allows the redirect to the okta login page though.