Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

Adrian

Hi, thanks for the tutorial.

With some tweaking, I bypassed an issue I had in the final steps of the Okta login by enabling Authentication Code in the console and removing implicit from the redirect URi.

Running into another issue: When I log in, am redirected to Okta login, I log in using valid credentials and it is accepted, I am redirected back to my page. However, opening the car list when logged in does not work and I get a 401 trying to do a GET on localhost:8080/cool-cars. I have enabled CORS per the tutorial.

Any idea what the issue might be?

Http failure response for http://localhost:8080/cool-cars: 401 OK

Thanks!

Adrian

I fixed the issue, for anyone going through the tutorial, there are some things you need to do to get it to work (after comparing end product of this tutorial with the finished product in the repo.)

1. The proper set-up for the app in the Okta console: Authorization Code checked, Implicit checked, both items under implicit checked. Screenshot in this tutorial is outdated, if Auth Code is not checked you will probably run into the Error 400 Whitelist URI error. Also, the redirect URI at login is http://localhost:4200/implicit/callback (if not already set as default). Initiate login URI is the exact same. Logout redirect is http://localhost:4200.

2. The schematic you are asked to use towards the end is out of date.

You should still run the command ng add @oktadev/schematics --issuer=https://{yourOktaDomain}/oauth2/default --clientId={yourClientId}

However, you need to make some changes to get the auto-generated code to match the repo code (which works, I tested in my troubleshooting).

So, check:

auth-routing-module.ts and delete the scopes attribute
Insert the client ID and issuer in the oktaConfig as necessary, and make sure the redirectUri has /implicit/callback
Make sure the path a few lines down is also implicit/callback

And finally, the fix to the 401 Error I get above:

auth.interceptor.ts
The auto-generated code for this file is wrong, and makes sense because the allowedOrigins and URL handling here matches with the Error 401 (cannot access endpoint on 8080, indicating a CORs issue)

So to fix this, just completely copy the auth.interceptor.ts code from the repo and paste it over the old code completely.

I ran the client and server right after this step and it immediately worked correctly, all login flows, all components work, etc.

Cheers

Matt Raible

Hello Adrian - thanks for documenting the steps to get this post working. I believe your problems are caused by the fact that we switched from using Implicit flow to Authorization Code flow as the default in the Okta Developer Console. And, the latest version of OktaDev Schematics expects you to be using Authorization Code flow too. I’ll update this post to make sure everything works.

There’s also a newer version of this post at Build a CRUD App with Angular 9 and Spring Boot 2.2.

akshay ranga

Hello Matt, Great tutorial.

I have a query, for the default authorization server the flow seems to work absolutely perfect. Although when I change my authorization server to another apart from default, would get 401 error. Is this a known issue or is something needs to be done for this case

Thank you.

Matt Raible

This is why we create a default authorization server for you - there’s a number of policies and settings you have to configure so things work properly. I’m not sure what they are, so you might want to email developers@okta.com for help. FWIW, here’s some documentation on the different kids of authorization servers.

Pritiranjan Swain

Hi Matt,

Nicely explained tutorial…
I did server side set off by taking git clone
and Client side i did manually.
Still I see 401 Unauthorized error,after login from Okta
Any gaudiness will helpful for me.
Thanks in advance

Matt Raible

Does your issuer end with “/oauth2/default”? You have to have API Access Management as part of your Okta tenant for this to work. See our Authorization Server documentation for more information.

Pritiranjan Swain

Thank for response…
Its working now,auth.interceptor.ts file is not proper in my case, as soon i match the files in repo i got the difference over there