OAuth2 Implicit Grant with Popup without LocalStorage

Question

I am currently integrating a 3rd party service into our system (AngularJS on client side and ASP.NET Web API 2.0) which require us to authenticate users through OAuth2.0.

I am currently using implicit grant. But one of the requirement is to support both Edge and > IE10.

At first I was using the following flow:

Client get 3rd party service login url from WebAPI
WebAPI returns 3rd party service login url then client opens a new popup window with the login url (ignore browser popup blocker) with a return url to our application
After authentication, user will be redirected back to our application, which is a blank page which contains javascripts to extract token from hashed query strings then store the access token to local storage
Closes the pop up
In my controller, I have subscribed to storage on change event. Hence when the access token is set into local storage, my controller will extract the access token from local storage and move it to session storage.

This was all working perfectly until I tested it out on IE and Edge. Which their local storage does not sync. localStorage in win8.1 IE11 does not synchronize

To make it work on IE and Edge, I have swapped out local storage and used cookies instead. Then instead of subscribing to storage on change event, I have a function similar to the following function to check on the cookies every second:

setInterval(function(){
    // check cookie for cookie
    // if found, copy cookie to session storage
    // remove cookie
    // change state
}, 1000);

FYI: We store access tokens in session storage to prevent users from opening multiple tabs to access our site.

This approach works, but are there any better solution?

theozero theozero · Accepted Answer · 2018-01-22T22:17:54

Another option which I have implemented in the past is communicating directly between the windows.

On the parent window, expose a function on the global namespace:
window.oauthCallback = function(payload){ ... send to API }

In the popup window, on your page that the oauth redirects back to, look for window.opener and try to call the function directly:
window.opener.oauthCallback(payload)
payload being an object constructed from the oauth data passed back to you in the querystring. Most frameworks have something to do this for you already available.

One caveat - if in an environment where you cannot open a popup or windows cannot communicate (like ios webviews - ex: clicked a link from facebook app) then you can do a redirect in the same window and store the payload in localstorage/cookies or pass the data via the URL.

OAuth2 Implicit Grant with Popup without LocalStorage

1 Answers