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 !!!

What about using a server-side proxy, so the PWA never leaves its scope and the server does all the OAuth work in the background?

https://medium.com/@madumalt/oauth2-proxy-for-single-page-applications-8f01fd5fdd52

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");

}