3

PWA Freezing after OpenID authorizes user [iOS Safari Standalone]

I have built a simple PWA for our security staff that allows employees to click links and view content about our company's policies on various matters. The app uses Microsoft's OWIN middleware library to authorize our employees' access into the app via their enterprise Microsoft login creds. When a user clicks the 'Employee Sign in' prompt on our login page, they are redirected to Microsoft's domain to complete the sign-in process. Once sign in is complete, they are redirected back to our app's home page.

The Problem

The problem appears only to arise when iOS users (v13) pin the app to their homescreen and then launch the app in standalone mode, and only after the user has completely terminated the app and then returned. We've tested the app on Chrome, Safari (non-standalone mode), Firefox, and the issue does not present in those browswers. The app functions seamlessly up until the point that the user has completed their Microsoft signin and been redirected back to the home page. At this point, if a user clicks a link to another page (within the app), the app completely locks up, doesn't respond to further button clicks, and doesn't load the page prompted by the user. No errors are thrown in the console.

What we've found immediately kicks everything back into gear is if the user switches to another app (even just for a second) and then switches back to our PWA when it's locked up. At this point, the page that the user attempted to navigate to loads immediately without further prompting and the app works 100% seamlessly after this point. It's only the initial version of the default page that freezes.

Potential Causes

My current working theory is that the problem is being caused by some combination of the following:

  • Redirection to Microsoft's sign in portal. When the user is sent to Microsoft for auth and then sent back to our domain, there could be issues with session/cookie continuity.
  • iOS's standalone mode. In conjunction with the above, is it possible that using third-party authentication and briefly leaving the domain of the PWA is causing problems with future page navigation. This is supported by the idea that no other browsers or devices have this issue, and my research suggests that Apple support for PWAs is still in its early stages.
  • Service worker failure. We have done significant testing to ensure that a service worker is being properly installed and registered when a user first enters the site. We have checks to re-register the SW just in case it is dropped at any point in page navigation. We are confident that at the time a user is redirected back to our home page after authentication that there is an active service worker that handles page GET requests. I have also tested explicitly caching the linked pages accessible from our home page during the service worker's registration to see if serving the page from the cache would alleviate the issue. It did not. This is the code in sw.js that handles fetch requests (taken from Google's handy guide):
    // "cache-first" approach for requests from client. Will try to get the file from the cache.
    // If no match found, it will send the request onto the network. If both fail serve fallback page.
    self.addEventListener("fetch", function (event) {
        if (event.request.method !== "GET") return;
        event.respondWith(
            // Try the cache
            caches.match(event.request).then(function (response) {
                console.log("[service worker] attempting to fetch file from cache...");
                return response || fetch(event.request);
            }).catch(function () {
                // If both fail, show a generic fallback:
                return caches.match(offlineFallbackPage);
            })
        );
    });

I have remotely debugged the PWA in standalone using a Mac, and what I have verified is that the click event that fires when a user clicks a link to navigate to a new page IS being properly handled, so the problem truly appears to lie in the loading of the linked pages themselves. Beyond that, debugging remotely has confirmed that there are no HTTP GET errors (or any other errors) firing at all when attempting to navigate to other pages on the site.

This is the first PWA I've ever built and I'm a novice with all this stuff. So I'd love to know if I'm missing anything or where I can go from here. I've scoured all the forums and can't seem to find answers anywhere. Thanks!

Community
  • 1
  • 1
Jake
  • 31
  • 2
  • Had gone through a similar scenario recently, the case was the page we redirected to (for payment gateway integration), didn't have web.manifest, so redirecting back to our was not working. We solved it by adding web.manifest to the page we redirected (it was under our control). In your case since you can't handle Microsoft pages, have you tried something with the use of Iframe? – Abdul Muhaymin Aug 20 '20 at 15:46
  • I am also suffering the same issue with my PWA. Did you find any good solution/workaround eventually? – Weihang Jian Oct 11 '20 at 16:12
  • I'm also experiencing this issue when redirecting for google auth. The page just appears to hang when redirect. – patrick_corrigan Dec 05 '22 at 18:04

1 Answers1

0

I had a very similar problem in my very specific case. but my pwa (packaged with PwaBuilder) froze on oidc signout, when redirect to applications home url. In XCode I observed an error stating:

could not signal service com.apple.webkit.webcontent 113 could not find specified service

The problem did not occur with my Identity Provider redirect back, but with the following redirect which initiated the OIDC client library which I am using oidc-client-ts. It turns out that there are two possible ways to set the location/url of a window, assign or setting href. And the library uses assign by default. Changing assign to replace href lead to my iOS PWA not to freeze anymore. Very specific use case but it might help somebody else...

auth.signoutRedirect({
  post_logout_redirect_uri: process.env.BASE_URI,
  redirectMethod: "replace",
});
Diego Frehner
  • 2,396
  • 1
  • 28
  • 35
  • This sounds similar to the problem I have here: https://stackoverflow.com/questions/75143661/angular-service-worker-stuck-in-safari-after-logout Unfortunately this cannot be modified in the msal library afaik – killexe Jan 18 '23 at 13:33