Bootiful Development with Spring Boot and React

Eddie Freeman

Hey Matt, I updated all my dependencies to match the project. However, I do have other dependencies. I don’t believe they should interfere with the fact that I’m not seeing this type. It doesn’t really make sense that I’m creating my own Interface if the definition is provided by the library. Do later versions provide this as an import?

Eddie Freeman

In fact, I was user older versions. I updated all my dependencies to match the project. However, I do have other dependencies tho I don’t believe they should interfere with the fact that I’m not seeing this type. It doesn’t really make sense that I’m creating my own Interface if the definition is provided by the library. Do later versions provide this as an import?

Eddie Freeman

Fixed this issue, it was related to something else.

Eddie Freeman

I figured out what it was…

Matt Raible

That’s good to hear! Care to share so others can benefit?

Ion Scorobogaci

Hi @mattraible , i’m getting
https://uploads.disquscdn.c…
after running yarn && yarn start

Ion Scorobogaci

By adding the okta-widget on the client side, we doing implit flow right ?
So we have after that the token from okta, that token is being passed to our backend , do we need to validate it ?
What’s the flow if we have client side widget, but in server side we have zuul gateway, do we need somehow to validate the token ?

Thanks

Matt Raible

Unfortunately, I don’t recall seeing this issue, so I’m not sure what causes it. You might compare your project with the example app on GitHub to see if you can spot the difference. I often use SmartSynchronize to compare directories and their files.

Matt Raible

Yes. If you use the Okta Sign-In Widget, you’re doing implicit flow. You don’t want to leave your backend wide open, so it’s wise to secure it and validate the access token. Spring Security can do this for you. I wrote a blog post called Secure a Spring Microservices Architecture with Spring Security and OAuth 2.0. While writing this post, I found you need to add Spring Cloud Security as a dependency to relay the access token for the Zuul proxy.


<dependency>
<groupid>org.springframework.cloud</groupid>
<artifactid>spring-cloud-security</artifactid>
</dependency>

Ion Scorobogaci

Thank you @mattraible . I really appreciate the work you put on in your tutorials and talks .
I have been able to achieve that, so now from front-end i’m passing the authorization header which contains the token, and then Zuul which is acting as an edge-server, forwards the request to the micro-service, which validates the token.

okta:
oauth2:
issuer: {myOktaDomain}/oauth2/default

One question that i have , is this ok from the security perspective, or i need to validate the token on Zuul , and then send request to the micro-service without authorization header ?

In this way, seems that my micro-service is not secured at all, but on the other hand, if this is an internal work , then should be fine.

As of now i’m validating the token on each micro-service, don’t know sure if this is an suitable and well-known pattern, will appreciate your input :slight_smile:

Thanks once again

Ion Scorobogaci

In the example/tutorial you have provided, there is a mix on edge-service with @EnableOAuth2Sso and @EnableResourceServer.
Resource Server — a component that requires an access token to allow, or at least consider, access to its resources
Client — an entity that is capable of obtaining access tokens from authorization servers

Therefore, that mix is not clear to me at edge level :frowning:

Matt Raible

Hello Ion - I think it’s best we continue this conversation on the post you’re referencing, or on our Developer Forums. That way, if others have the same questions, it’ll be easier for them to find my answers.

Rohit Patil

Thanks Matt for helping me out in past as well !
We were using access token from react to backend as given in this blog. Now, we need to pass id token instead of access token. Is it possible?

Possible questions:
1. Is it possible to use only id token while passing from react to backend application and authenticate user. I tried to pass id token instead of access token from react and it says token is invalid.
2. Do we need to both pass both access token and id token from react to backend.

Kindly assist.

Matt Raible

Hello Rohit,

It’s possible to get an ID token using our React SDK, but it’s not possible to pass it to a Spring Boot backend and have it use it for authentication. Why do you want to pass an ID token instead of an access token?

An access token doesn’t have the user’s identity in it, which can be a good thing (if it get’s stolen). On the server, you can always use the access token to get the user’s information from the /userinfo endpoint.

Rohit Patil

Thanks Matt !!

Do you mean to say, react(Front end) will send access token to Back-end. If user gets authenticated at back-end, we need to call /userinfo from Back-end application it self using access token to get user additional details.

Is it correct?

Matt Raible

If you’re using Spring Security, and you have it configured properly, it’ll handle calling /userinfo for you and populating the java.security.Principal object. You could also do it manually, like this post shows.

Rohit Patil

Hello Matt,

We are good with the functionality and application flow. But, when we are trying to logout we are getting logged in again in chrome automatically and we get a new access token and id token. In IE, logout is working fine.

On console we are getting attached. Also attached the network trace.

Could you please help us in this. Our UI is deployed on ngnix and BE is spring boot tomcat project.

Regards,
Rohit Patil
https://uploads.disquscdn.c… https://uploads.disquscdn.c…

Matt Raible

Hello Rohit - it doesn’t seem like your problems are related to this tutorial. Can you please post your question to our Developer Forums?

Wilson Duvan

Hi, i have this error:

Unhandled Rejection (AuthSdkError): A clientId must be specified in the OktaAuth constructor to get a token

Matt Raible

Do you have your Okta configuration in your App.tsx like this example has?


const config = {
issuer: ‘https://{yourOktaDomain}/oauth2/default’,
redirect_uri: window.location.origin + ‘/implicit/callback’,
client_id: ‘{clientId}’
};


You should replace the {…} placeholders with the values from Okta.