Add Authentication to Your Angular PWA
In this article, I’ll show you how you can lock down a Spring Boot app, then use a modern authentication protocol, in this case, OpenID Connect (OIDC), to authenticate and gain access to its APIs.
Juan Moreno
Awesome tutorial,
I am seeing issues with the pulled down repo and the configurations outlined here. Create accounts work from spring book but when attempting to login using a valid account I am redirected to: http://localhost:8080/login?next=%2F and the following error is displayed:
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Sun Dec 17 15:27:48 EST 2017
There was an unexpected error (type=Internal Server Error, status=500).
Key with ‘kid’ of … could not be found via the ‘/oauth2/v1/keys’ endpoint.
It seems that someone else had this issue here https://github.com/stormpat… but I was not able to figure out the right steps to resolve this for the server spring-book to allow logins. Any help is greatly appreciated!
Nate Barbettini
Are you using angular-oauth2-oidc or the Okta Auth SDK? Make sure your issuer includes “default” as in the example on this page. That error can happen if you don’t set the proper issuer value.
Matt Raible
Hello Juan: if you’re not migrating from Stormpath, I’d suggest you use our Spring Boot Starter instead of the Stormpath Java SDK. See Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0 for a similar tutorial with newer bits.
Veda Gangatkar
Hey Matt,
I am running into an error “The ‘redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings”. I followed the tutorial exactly and I am not sure what is causing this issue. Can you please let me know ?
Matt Raible
It means that the redirect_uri that’s being sent from your client doesn’t match a Login redirect URI that you have in your Okta app. You should be able to copy the URL from your browser, paste it in an editor that makes it easier to read, and see what URL your app is sending. Then update your Okta app to whitelist this as a Login redirect URI.
Veda Gangatkar
Thanks !! It worked.
I followed your tutorial “Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0” to add authentication with okta to my project. I was able to redirect and handle with authentication based on groups and other functionalities. Now I am trying to use my custom login page following this tutorial and I ended up leading to issues “Converting circular structure to JSON”. My question is can I integrate both tutorial like OAuthService and OktaAuthService? because I need to use both config and it leads to confusion.
Can you please let me know how to achieve?
Matt Raible
Hello Veda - I’m not sure what you’re trying to accomplish. Are you trying to embed the Sign-In Widget into your app? If so, this example app might be better. There’s also this blog post that shows you how to do it.
OAuthService is from angular-oauth2-oidc, while OktaAuthService is from Okta’s Angular SDK. You’re probably better off using one or the other and not mixing them in the same app.
Arjun
Hey Matt,
When I am clicking on Login button, its throwing CORS Error . As follows
Access to XMLHttpRequest at 'https://dev-462579.okta.com… from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Please help me solving this.
Matt Raible
Hello Arjun,
When you created your app on Okta, did you specify 8080 (the defaults) for the ports, or 4200? We created Trusted Origins for you with whatever you create your app with. However, if you update after you’ve created it, we don’t create a trusted origin. You can create your own at API > Trusted Origins.
Reema Agarwal
Hey Matt,
I am getting ‘Error validating tokens’
zone.js:672 Unhandled Promise rejection: Wrong audience: 0oaavtsc0xEMN3b0Z356
issue. Could you please help?
Matt Raible
Can you please confirm that the issuer you’re using matches the one you have in your Okta org under API > Authorization Servers? It should look something like https://dev-123456.okta.com/oauth2/default. You’ll also want to make sure your URL doesn’t have “-admin” in it.
Hi-Ideals Technologes Private
Hi Raible
How do I change the logout redirection to http://localhost:4200, now it is taking me to okta dev page https://dev-******.okta.com/oauth2/default/v1/logout?id_token_hin=
Matt Raible
Yes, you are correct. There is a quick redirect to the /logout endpoint with your ID token and a redirect URL to come back to. It should happen quickly so the user barely notices. You could also clear the tokens from local storage, but that won’t terminate your session on Okta.