Progressive Web App - OAuth Login - Not working on iPhone

Question

PWA OAuth Login

Problem:

I have a PWA application which needs user authentication via Facebook/OAuth. The problem is that the OAuth mechanism works in every circumstances but iPhone/Standalone.

I need to find out some way to make a PWA application works with Facebook/OAuth on iPhone. Is it possible? Yes/No?

Sample Project:

I created a sample project:

https://github.com/napolev/pwa-oauth-login

based on the article:

https://medium.com/@jonnykalambay/progressive-web-apps-with-oauth-dont-repeat-my-mistake-16a4063ce113

For simplicity, on this sample project, I replaced the Facebook/OAuth mechanism with a simple Custom/OAuth mechanism.

Code Preview:

index.html

<script>
...
window.open(
    url_oauth + '?url_callback=' + encodeURIComponent(url_callback),
    'Login Flow',
    'width=350,height=250'
);
...
window.addEventListener('message', function (e) {
    token.innerText = e.data.token;
})
...
</script>
...
<div>
    Token: <span id="token">...</span>
</div>

callback.html

<script type="text/javascript">
// redirected to this page from the OAuth page
...
var data = {
    token: ...,
};
window.opener.postMessage(data, ...);
window.close();
...
</script>

If I connect my Mac to my iPhone and do Remote Debugging, I can see that when the method above: window.close(); gets called, it throws the following warning, which makes me feel very pesimistic about my possibilities:

Can't close the window since it was not opened by JavaScript

About the call: window.opener.postMessage(...) that's another story and right now I don't have enough information about why is not sending the token to the opener window. Probably it is because a similar issue as with: window.close();.

Highlights:

I did a series of experiments and all of them came out fine, but the case: iPhone/Standalone which failed because, even though a shorcut is added to the home screen successfully and when you click it the app is opened properly without address bar, when the user clicks the button: Start OAuth flow a new window is opened, this time with an address bar (github.io). Then, when the user clicks the link: [APP-CALLBACK], the user is redirected to a the app callback url but this window doesn't send back the token to the opener window and also it doesn't get closed. If I do this experiment on Android/Standalone, this works fine. On top of that, on the same iPhone with Safari (but not standalone) it works properly. The only problem I'm facing is on iPhone/Standalone as you can see on the following animated image.

Please, check the Experiments section below for more details.

Project Download:

$ git clone https://github.com/napolev/pwa-oauth-login
$ cd pwa-oauth-login
$ npm i
$ npm run start

Test:

On your iPhone (another device on the same network), go to:

http://[YOUR-SERVER-IP-ADDRESS]:4000

Installing as Standalone:

Android / Google Chrome - Click on the highlighted option to install the app as standalone.

iPhone / Safari - Click on the highlighted icons to install the app as standalone.

Experiments:

1- 2018-11-24 00:10 GMT. On this commit, the OAuth flow behaves as follows:

Windows + Chrome → SUCCESS
Windows + Firefox → SUCCESS
Windows + Edge → SUCCESS

Android + Chrome → SUCCESS
Android + Standalone → SUCCESS

Mac + Chrome → SUCCESS
Mac + Safari → SUCCESS

iPhone + Chrome → SUCCESS
iPhone + Safari → SUCCESS
iPhone + Standalone → !!! FAILURE !!!

Answer 1

Remove the manifest when loading the application on an iOS device as discussed here.

var iOS = !!navigator.platform && /i(Phone|Pad|Pod)/.test(navigator.platform);
if (iOS) {
    document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
}