if I have a spring boot microservice protected by okta and want to call it from angular frontend, what do I have to do? I probably should add okta schematics but how do i set it up to work? i used a fresh angular project but seem to be getting CORS errors.
in your tenant you have to add a trusted origin for your calling party, i.e. your angular app (http://localhost:8000, or whatever port you are running it on, if you run it locally). That will help with CORS issues.
If your server app is protected with OAuth -> you need to obtain an access token from Okta authZ server to pass it to your server.
Those are some general principles. Beyond that, almost nothing can be suggested at the moment, till you can present more specifics on your architecture and nature of issues you are experiencing
ok, sorry, I have noticed I have really not given enough details.
- as I said i have the protected spring boot microservice
- I created a fresh angular project. haven’t changed anything in it.
- I run ng add @oktadev/schematics… on it.
- when i now run the angular project I see a login button.
- when I hit the button nothing happens, the console returns:
Access to XMLHttpRequest at ‘https://dev-xxxxxx.okta.com/oauth2/default/.well-known/openid-configuration’ from origin ‘http://localhost:4202’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
core.js:6014 ERROR Error: Uncaught (in promise): AuthApiError
Error
at Object. (okta-auth-js.min.js:13)
at t (okta-auth-js.min.js:13)
at Object. (okta-auth-js.min.js:13)
at t (okta-auth-js.min.js:13)
at Object. (okta-auth-js.min.js:13)
at t (okta-auth-js.min.js:13)
at Object. (okta-auth-js.min.js:13)
at t (okta-auth-js.min.js:13)
at Object. (okta-auth-js.min.js:13)
at t (okta-auth-js.min.js:13)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
at invokeTask (zone-evergreen.js:1603)
defaultErrorLogger @ core.js:6014
do i have to somehow disable cors even for the call to the okta server?
You need to go into your Okta tenant and add http://localhost:4202 as Trusted Origin under Security -> API with checkbox “CORS”.
did as you suggested unfortunately still no login gui shown and an error in console is:
https://dev-xxxxx.okta.com/oauth2/default/v1/token 401
What else do I have to do?
also make sure the URL you are trying to redirect a user after login is configured in the application login redirect url
thank you Philipp for your help so far, unf. still no joy. the entries in logon redirect url are as follows:
http://localhost:8080/login/oauth2/code/okta
https://oidcdebugger.com/debug
http://localhost:8080/redirect
http://localhost:4202/implicit/callback
as I said I haven’t modified anything in the angular app with okta schematics by hand.
When do you see 401? What is the requested URL at that time?
wow, even if I changed all the ports in the admin console to 4200 it still doesn’t work and I still get the error.
as I said I haven’t changed anything in the angular app, just installed the okta schematics.
the error looks like this:
dev-933944.okta.com/oauth2/default/v1/token:1 Failed to load resource: the server responded with a status of 401 ()
and this is basically with standard setup with no customisation. I so hate okta now, wasted massive amounts of time with it.
401 usually means you don’t have an okta session established. Haven’t had a chance to mess with angular, but I’d try to check the whole flow, if I were you.
On the other side I’ve seen few other folks having bad days with okta/angular as the guide provided by Okta is bit outdated. But they had a different error. I guess, if you can create a project on GitHub to reproduce the issue, people could recommend something more specific to help you
hmm… that’s what the login button is supposed to be, to establish the session.
thank you for your help, i’ll devote my evening to troubleshooting once again.
if i post my project on github it would reveal my client id, no? in fact the frustrating part is that I created an angular app and added the schematics without changing a line of code…
I’d like my spring boot app to be on the cloud and accessed from an android app and an angular frontend… if every step in the process means so much ordeal… 
well, I just created a blank new ng app and added schematics into it. After that I spinned it and it worked like magic for me (got my okta org login page after hitting Login button). The only 2 things I had to add:
- trusted origin (localhost:4200)
- application login Redirect URI (localhost:4200/implicit/callback)
happy times!
funny enough, I have noticed that one of the angular 7 examples has worked for me (https://developer.okta.com/blog/2018/08/22/basic-crud-angular-7-and-spring-boot-2). that would mean that the fault is (maybe?!) not with my settings.
I have noticed that the majour differences were as follows:
angular 7 example did not have a dedicated auth module, okta schematics introduced one
angular 7 example had okta module being initiated with initAuth, okta schematics had a provide line for that (sorry if I don’t sound professional)
angular 7 did not have the scopes and pkce settings, okta schematics with angular 8 seems to have.
So I dropped the auth module, made the okta schematics app code resemble as much as possible the code of the angular 7 example and I got the login dialog, and it worked…
Hi, advii.
I was using angular front end and spring boot back end. I have registered as a web app in the Okta developer account. Now my backend got protected. How to access my backend API from angular. Please help.