Currently, when our SPA detects that our session has expired, we redirect to another page (domain) to login through a SSO solution, before being sent back to the original page. This has some unfortunate side effects, such as losing state, back button leading to the external login page, etc.

We would like to improve the situation, so I've come up with a scheme, but it's a homegrown solution to what I assume is a general problem, so I probably miss a thing or two. Maybe a general solution exists and/or is described somewhere?

Basic restrictions

  • We have to logon using an external, centralized OpenID/OAuth SSO solution, so we can't just fire of an XHR to /login.
  • It should work well in a mobile browser

Proposed solution

As one cannot modify browser history outside our own domain using the History API, another way of fixing this issue is by handling the login in another window - in other words, an IFRAME running on top of/beside our application. This way, we are never leaving/unloading our application state and thus avoid the issues of loading the app with a "invalid" history.

In essence, our app would create an iframe that is hidden until a “session expired” event is detected. Such an event could be the result of a number of thing, for instance as a result of some user action being performed after having the app lie dormant for an hour. Once the event is detected (say, in Redux middleware?), we “freeze”/pause the current action, expand the hidden iframe to cover the screen and login using it. Upon being redirected back to the custom session-handling-app in the iframe, the session-handling-app running in the iframe detects (a url parameter or some setting in sessionStorage) that it is running inside the "login iframe" and communicates back to the original app window that it has finished refreshing the login tokens.

This shouldn’t require any changes serverside AFAIK.

On the client, this would mean that very early in the app loading logic we would branch between the full app and a small script that notifies the original window. The small script is basically “oh, by the look of this url we are running in an iframe, which means the login has succeeded. let’s notify our parent window we are live and ready to handle expired sessions”.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.