Deploy Your Secure Spring Boot and Angular PWA as a Single Artifact

Deploy Your Secure Spring Boot and Angular PWA as a Single Artifact

This post shows you how to package your Spring Boot and Angular app into a single JAR artifact. It also shows how to switch from using OAuth’s implicit flow to authorization code flow.

daftbit

Do you have any examples on how to use an Angular authguard with the authorization code flow that you have provided. Specifically how to call the login endpoint (localhost:8080/login) from the guard as well as check if the user has logged in. I am working on an Angular and Spring Boot application packaged as a single. jar and would like to use authguard to redirect the client to the Okta login section when attempting to access a route like /admin on the front end. I am trying to avoid having a button call the login endpoint and instead have the authguard can activate call the login route if the user isn’t already authenticated

Matt Raible

No, I do not. Please let me know if you figure out how to do it.

daftbit

Matt, I’ll see what is possible. The second question that I have for you is how to go about getting the Spring Boot roles to be ROLE_ADMIN. Currently with your example the Principal object only contains ROLE_USER. Since some of the backend resources I want are locked down with @PreAuthorize for only the ROLE_ADMIN how can I go about doing this. I have created the claim and also created a user->group but the principal always resolves to ROLE_USER in Spring. https://uploads.disquscdn.c…

Matt Raible

Make sure you’re including your claim in the ID token. If that doesn’t solve the problem, you might have to create a custom authorities extractor. This is one of the features our Spring Boot Starter provides. If you use it, it’ll automatically configure the groups listed in the groups claim to be Spring Security authorities.

Eric Huang

When you build as a single artifact, you are only copying angular compiled resource in to springboot as a static resource, correct? Then this would not be search engine friendly, meaning you will not be able to run Angular universe, correct? Thank you

Matt Raible

Angular apps are not SEO friendly AFAIK by default. This example does not use Angular universal. If you want to use Angular Universal with Spring Boot, I’d recommend looking at angularj-universal.

Felix Friedman - IQ-C

Matt, thanks for a great post. This is exactly the scenario we’re pursuing however we were recommended to use the okta angular widget component for sign on. Would you be able to point me to an example that has both angular widget and spring security setup. Looking for an example that has the okta angular sign-in widget with the OAuth2 standard authorization workflow.

Brian Demers

Felix, you can do it, but you still end up with a redirect. Basically you tell Spring to redirect through the a page with the widget, and that kicks off the flow
Take a look at https://github.com/okta/sam…

This example doesn’t use Angular, but it should give you enough to follow though

Felix Friedman - IQ-C

Thank you Brian.

Chuck Higgins

Thanks for this post, it has provided a lot of good information for me even if it does not exactly fit my requirements. I have been interpolating where I can. My exact requirements are to integrate the Custom okta-signin-widget into an existing SpringBoot 1.5 / Angular 6 app as a single artifact (static resource). This is the best fit that I have found so far. The fact that it is 2 years old is actually good for me because I am working with an older app.

My question… If using the customer signin widget, it seems to me that should be implemented in Angular code. But, your post discusses moving the authentication into SpringBoot. Do you know of an similar example that uses the custom widget? Or have any advise for that?

Thanks!

Matt Raible

Hello Chuck,

You should be aware that you can use the Okta Sign-In Widget in two ways. If you’re redirected to Okta to sign in, the widget presented to you is a version of the Sign-In Widget. You can customize it too. The 2nd way is to embed it into your app. See our official Angular samples for both options.

I advise using the hosted Sign-In Widget because then you don’t need to worry about upgrading and maintaining the Sign-In Widget in your app. Does that help?

Chuck Higgins

Hey Matt,

Many thanks for your response. Our ultimate goal is to use the custom widget to facilitate just-in-time user provisioning. We have an existing production app that has local username/password authentication and we want to replace that that with Okta in a frictionless manner. If it were not for this, I would prefer the hosted widget.

I have the pure Angular samples working for custom widget, but am having some issues getting Angular/SpringBoot working with the custom widget. It seems that I need to embed the widget in the Angular app, but still have to go through Spring Security to authenticate the session and get the session cookies. So I was looking for an example for that, or any other advise.

Thanks again,
Chuck

Chuck Higgins

I have also been looking at https://github.com/okta/sam…. It uses ThymeLeaf instead of Angular, which I thought I could translate. Probably a bigger difference is the Spring Security 5.x and we can’t migrate to that yet.

Matt Raible

I was going to suggest the sample you linked to in your previous comment. I’m sorry, I don’t know of a good solution for what you’re trying to do.

Chuck Higgins

Oh well… Thanks for your suggestions. I have seen many of your other posts and get the feeling you know this stuff quite well. So, I get the feeling my task might be more challenging than I first expected.