Bootiful Development with Spring Boot and React

Rohit Patil

Thanks Matt for helping us out with other OKTA related issues !!

Can we use @PreAuthorize(“hasRole=‘TEST_ROLE’”) on our controller classes?

For example, In our BeerController, on goodBeers() method. Can we use something like below. If yes, then what changes do we need to do in these current demo application :

https://uploads.disquscdn.c…

Matt Raible

You’re welcome! If you’re using our Spring Boot Starter, you should be able to use hasAuthority() and configure your groups to be in a “groups” claim. Our starter will translate those into Spring Security authorities.

Emre Özdinçer

Thanks for the guide, I am walking through it at the moment. I suggest you to move the tslint.json warning somewhere before the code implementation though, I had to figure it out myself since I didn’t see it up there.

Matt Raible

Hello Donato: we recently published Use React and Spring Boot to Build a Simple CRUD App. This tutorial shows you how to package your React app inside your Spring Boot app.

James Coll

This…

try {
const response = await fetch(‘http://localhost:8080/good-beers’, {
headers: {
Authorization: 'Bearer ’ + await this.props.auth.getAccessToken()
}
});

in BeerList.tsx throws the following error on transpilation

./src/BeerList.tsx
Module parse failed: The keyword ‘yield’ is reserved (30:27)
You may need an appropriate loader to handle this file type.
| this.setState({ isLoading: true });
var response = yield fetch(‘http://localhost:8080/good-beers’, {

Any idea how to overcome this? Thanks for the talk in Dublin tonight… was fantastic… lots of pro-tips.

Matt Raible

That’s strange. I haven’t seen this error before. A bit of searching suggests changing the jsx option in your tsconfig.json from “preserve” to “react”. Mine is already set to that by default.

You might try comparing your code to the example on GitHub. Another possibility is your version of Node. I’m using v8.11.3.

Thanks for coming to DubJUG! I had a great time.

Matt Raible

I updated the post to provide all rule modifications up-front. Thanks for the suggestion!

James Coll

Neither of those worked unfortunately - I’ll keep rummaging. :slight_smile: Glad you enjoyed Dublin

Anuraag Chawdhry

Hi Matt,
Went through lot of your blogs and videos, really liked them. I tried this example as this fits our use case, but getting an exception during start up. Using @EnableResourceServer causes the following exception "A component required a bean of type “org.springframework.security.config.annotation.ObjectPostProcessor’ that could not be found” during application start up. Adding @EnableWebSecurity to the SpringBootApplication fixes the exception but the example fails to work. What happens is - the API call from React to Spring boot application gives 401. Any thoughts.

Matt Raible

What version of Spring Boot and the Okta Spring Boot starter are you using?
I recently updated this tutorial so everything should work. You might try comparing your code to the example code on GitHub.
For React to communicate with the API, make sure you’re passing in an Authorization header.

Eddie Freeman

I’m getting a Unhandled Rejection (TypeError): Cannot read property 'isAuthenticated' of undefined

I don’t see where this is defined in the app, and it seems it’s included with OKTA, but the types for Typescript don’t seem to exist.

Matt Raible

Did you create a okta.d.ts file as recommended in this article? That should solve any issues with TypeScript.

Eddie Freeman

I did, let me check if I added it to the right folder.

Eddie Freeman

Yeah, it’s been added to the src/ of the client. Was there anything else?

Matt Raible

Yes, you’ll need to add imports for the Okta components. That code is in the blog post too.

Eddie Freeman

Well, I added =import { Security, SecureRoute, ImplicitCallback } from ‘@okta/okta-react’;= similar to the post as well as { withAuth } which I believe is the HOC that provides the type in question ‘isAuthenticated’ lemme know if I’ve missed the mark. Is there anywhere I can review the definitions? I couldn’t drill in with VSCode to see what I might be missing, so it might be missing a link somewhere.

Matt Raible

Can you try cloning the example repo from GitHub and see if it works? If it doesn’t, I probably need to update this post. If it does work, my guess if you’re using newer library versions than I am.

Eddie Freeman

could very well be a versioning issue, after a “yarn install” I get:

error upath@1.0.4: The engine “node” is incompatible with this module. Expected version “>=4 <=9”.
error Found incompatible module

ashebby

Hello, I am getting error window is not defined

Matt Raible

I need more information than that to help you. :wink: Can you please provide steps to reproduce? You might also try cloning and running the example from GitHub.