How do I implement OAuth implicit flow in a SPA?

user_2117355 0
Viewed 535

My web application is set up as follows:

  • A resource server with APIs (uses Spring Security)
  • An authorization server (Spring Security OAuth) which hosts the login form page
  • An SPA client (Angular 6 / routing / angular-oauth-oidc library)
  • I'm using the Implicit flow

I'm trying to figure out the best way to implement the login flow. As I have it now, when the user attempts to access a protected route and does not have a token, he is redirected to the auth server's login form (via a guard). If login is successful, the browser then redirects back to the angular app's protected route. The guard allows access since the user now has a token.

The issue is that I'm trying to figure out is that my angular app twice: once before I'm logged in, and again after. Modern browsers will cache the actual SPA resources (.js, .html, .css. etc), so there isn't another hit to the server. But Angular apps take a non-trivial time to load, and in this flow, the SPA loads twice.

Is there a way that I can do this such that the Angular app only loads once?

spring-security-oauth2 single-page-application angular oauth-2.0 spring-security
1 Answers

You could use a popup window, as cgTag suggested, but popups are problematic on small devices and from my experience, people usually don't like them even on desktop computers. You cannot use an iframe, since the user should see the URL and certificate of the auth server.

I think the best way to solve the problem is to optimize your SPA to load faster. You need it for the first page load anyway. There are several ways to speed up the loading - ahead-of-time (AOT) compilation, tree-shaking, lazy loading, server-side pre-rendering and such. If you use Angular CLI, it has built in support for some of them, so it's easy to try and see whether they bring some improvements.

user_7311780
Related