Build a CRUD App with Angular 9 and Spring Boot
This tutorial demonstrates how to develop a secure CRUD application using Angular 9 and Spring Boot 2.2.
Cristian Chiovari
Manged to solve the angular pb but when I try login button I get this CORS issueCross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-xxx.okta.com/oa…. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Cristian Chiovari
I found it myself. So for those who will have the same problem take a look into https://developer.okta.com/… and configure your CORS on okta dev account to localhost :4200
Fabio Cabrini
Hi Matt,
thank for this article. it’s very helpful and complete.
I have one issue because somehow my angular http interceptor is not adding the Authorization Bearer header.
I can see in the browser the interceptor is invoked and the header is in the request with the note “Provisional headers are shown”. Debugging on Spring side, I noticed the header is not sent.
I am using Angular 8, do you see any differences I should be aware of?
Thanks in advance.
Fabio
Matt Raible
I don’t know of any differences between Angular 8 and Angular 9 that would cause this. You might try my Angular 8 + Spring Boot 2.2 tutorial. You could also just clone the repo for this (or the Angular 8) example and see if you can get it running.
rohit chakra
Hello Matt,
Thanks for the beautiful article. I have done exactly similar, registered 2 applications; one for angular and another for spring-boot app. Expecting to secure both applications with Okta. When deployed in client’s VMs, the spring-boot is throwing CORS issue. Without spring-security in spring-boot app, things are fine. I have registered only angular application as CORS exception list. Do I need to add Okta domain to the cors exception list? Please recommend.
Matt Raible
If you’re getting a CORS error when trying to connect to your Spring Boot app from Angular, then you probably skipped the section on adding a CORS filter for Angular. In my experience, Spring’s @CrossOrigin annotation stops working once you add Spring Security to the mix. Adding CORS in a filter solves that.
Thomas
Very nice demo Matt, I was wondering why you created an application in Okta for both the SPA and the Spring Boot API? From my understanding of OIDC/OAuth2, wouldn’t the SPA application on Okta be enough and then set the properties in the Spring Boot app as the issuer and clientId?
Maybe I’m not quite understanding how it all works, I thought the login would return an access token (and refresh token if requested) which would be sent as a Bearer token to the API, which can validate the token validity because it knows the clientId and issuer? I don’t see what role the Spring Boot Okta app would play in this process?
Matt Raible
You are right in that you don’t need a client secret on the Spring Boot side. However, if you want to login to the Spring Boot app without Angular, you do need it. In an upcoming post, I’ll combine the two apps and get rid of the Okta Angular SDK. That’s when the secret will be needed again.
Silas Rocha
Do you know some whay to use the SAP XSUAA to connect with Angular to an Sap Cloud Platform in Cloud Foundry environment?
Matt Raible
No, I do not.
Andrea Damiani
Hi Matt, amazing tutorial as always!
I’m working on a similar example, with the only difference that I’m also using Spring Cloud Gateway which relays the access token to the resource server. Everything works when I use @AuthenticationPrincipal Jwt jwt, but when using OidcUser instead (as you do in the example above), it is always null.
I added some custom claims in the ID token on Okta and I wanted to access them. Do you know how I can do that? Thought I could do it with the OidcUser object but yeah…
Matt Raible
OidcUser will only be populated when using Spring Security’s oauth2Login(). If you’re setting things up as a resource server, then it’s only the access token will be sent. You could add your claims to the access token, or even better, use the access token to talk the /userinfo endpoint and get the user’s full details.
gytis dramblewolfskis
on windows using okta.env and the source function (does not exist in cmd/powershell and the git bash did not help either)
using properties file solved the issue
What are some alternatives to either making it work or storing the secret elsewhere securely?
Matt Raible
You should be able to name the file okta.bat and use SET instead of export. Then just run “okta.bat” in your terminal before starting your app. Please let me know if this works.
gytis dramblewolfskis
doesn’t work. It does seem like the environment variables are set(echo works). However the application still doesn’t work.
If I put in application.properties then it does work.
edit:
SETX variable value command creates a global variable, however the project only notices the creation of those variables when I restart windows. Then the program works.
using the SET command works only for a single terminal session so it doesn’t seem to work in any way.
is the setx behaviour as you expected?
(I haven’t tried but there are extra workarounds to refresh environment variables and to make global variables using set here)
Dylancoolman
How do I get the ‘Alias’ command to work on Windows 10? Alias only seems to work on Macs and Unix systems. Is there another command for cmd?
Matt Raible
Once solution might be to install the Windows Subsystem for Linux.
Manoj Kumar
I am using angular 10. I am not able to go past the issue of CORS. I see that my base URI is configured correctly in the trusted origin section.
I tried already by creating new authorisation server.
Any help would be highly appreciated.
Matt Raible
If you create a new developer account and use the “default” authorization server that’s created, everything should work. I’m not sure how to create an authorization server with all the default server’s settings, but you might be able to compare them in the UI.