I've been working on an app using React and Next.js, currently adding PWA support.

Users log in to the app via the Google OAuth flow. I was originally using the JS client which utilizes a pop-up window, but that ran into errors in the PWA. I'm now using the normal OAuth flow by redirecting the user to Google's OAuth URL.

This works fine in the browser. In the standalone PWA on iOS, it opens the OAuth page in a new Safari window. This means that the OAuth flow is carried out in Safari, and at the end the user is left using the app in Safari rather than the standalone PWA.

I'm redirecting using this method:

export function setHref(newLocation: string) {
  window.location.href = newLocation;
}

This even looks to be the method everyone recommends to avoid pop-ups when redirecting in your PWA. Has this changed recently? Or is there another method to carry out redirects/OAuth flows inside a standalone progressive web app?

I've been working on an app using React and Next.js, currently adding PWA support.

Users log in to the app via the Google OAuth flow. I was originally using the JS client which utilizes a pop-up window, but that ran into errors in the PWA. I'm now using the normal OAuth flow by redirecting the user to Google's OAuth URL.

This works fine in the browser. In the standalone PWA on iOS, it opens the OAuth page in a new Safari window. This means that the OAuth flow is carried out in Safari, and at the end the user is left using the app in Safari rather than the standalone PWA.

I'm redirecting using this method:

export function setHref(newLocation: string) {
  window.location.href = newLocation;
}

This even looks to be the method everyone recommends to avoid pop-ups when redirecting in your PWA. Has this changed recently? Or is there another method to carry out redirects/OAuth flows inside a standalone progressive web app?

• javascript
• oauth
• google-oauth
• progressive-web-apps

3 Answers 3

I have a workaround that solve the oauth redirection problem on ios safari standalone web app.

The problem is the manifest meta tag, it seems that webkit (safari) implemented it with an old specification (Chromium had the same problem and fix it in a recent version).

I based the workaround by modifying Google´s PWACompat Javascript you can get on:

https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js

PWAcompat js is useful to generate the proper html meta tags, in order to have an standalone web app with home icons and an splash screen

You need to do a small "hack" on PwaCompat script and in your "manifest" meta tag by replacing the name of the meta tag by any identifier, for example, in your index.html:

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

manifest.json contains your standard manifest.json declaration, with the name, icons and styling for your web app.

js/pwacompat.js, contains a copy of pwacompat.js from google, with this small modification ( line 36) :

Change :

const manifestEl = document.head.querySelector('link[rel="manifest"]');

by

const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

where pwa-setup is the name you place on meta tag, and that´s it, you have your manifest.json interpreted and oauth redirection in the same standalone context