title: Progressive Web App - OAuth Login - Not working on iPhone
body: <h1>PWA OAuth Login</h1>
  
  <h2>Problem:</h2>
  
  <p>I have a <code>PWA</code> application which needs user authentication via <code>Facebook/OAuth</code>.
  The problem is that the <code>OAuth</code> mechanism works in every circumstances but <code>iPhone/Standalone</code>.</p>
  
  <p>I need to find out some way to make a <code>PWA</code> application works with <code>Facebook/OAuth</code> on <code>iPhone</code>. Is it possible? <code>Yes</code>/<code>No</code>?</p>
  
  <h2>Sample Project:</h2>
  
  <p>I created a sample project:</p>
  
  <p><a href="https://github.com/napolev/pwa-oauth-login" rel="noreferrer">https://github.com/napolev/pwa-oauth-login</a></p>
  
  <p>based on the article:</p>
  
  <p><a href="https://medium.com/@jonnykalambay/progressive-web-apps-with-oauth-dont-repeat-my-mistake-16a4063ce113" rel="noreferrer">https://medium.com/@jonnykalambay/progressive-web-apps-with-oauth-dont-repeat-my-mistake-16a4063ce113</a></p>
  
  <p><strong>For simplicity</strong>, on this sample project, I replaced the <code>Facebook/OAuth</code> mechanism with a simple <code>Custom/OAuth</code> mechanism.</p>
  
  <h2>Code Preview:</h2>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;script&gt;
  ...
  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;
  })
  ...
  &lt;/script&gt;
  ...
  &lt;div&gt;
      Token: &lt;span id="token"&gt;...&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>callback.html</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // redirected to this page from the OAuth page
  ...
  var data = {
      token: ...,
  };
  window.opener.postMessage(data, ...);
  window.close();
  ...
  &lt;/script&gt;
  </code></pre>
  
  <p>If I connect my <code>Mac</code> to my <code>iPhone</code> and do <code>Remote Debugging</code>, I can see that when the method above: <code>window.close();</code> gets called, it throws the following warning, which makes me feel very pesimistic about my possibilities:</p>
  
  <blockquote>
    <p>Can't close the window since it was not opened by JavaScript</p>
  </blockquote>
  
  <p>About the call: <code>window.opener.postMessage(...)</code> 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: <code>window.close();</code>.</p>
  
  <h2>Highlights:</h2>
  
  <p>I did a series of experiments and all of them came out fine, but the case: <code>iPhone/Standalone</code> 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: <code>Start OAuth flow</code> a new window is opened, this time with an address bar (<code>github.io</code>). Then, when the user clicks
  the link: <code>[APP-CALLBACK]</code>, 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 <code>Android/Standalone</code>, this works fine. On top of that, on the same
  <code>iPhone</code> with <code>Safari</code> (but not standalone) it works properly. The only problem I'm facing is on <code>iPhone/Standalone</code> as you can see
  on the following animated image.</p>
  
  <p>Please, check the <code>Experiments</code> section below for more details.</p>
  
  <p><img src="https://image.ibb.co/dojBNA/image.gif" alt="screenshot" title="iPhone - Safari"></p>
  
  <h2>Project Download:</h2>
  
  <pre><code>$ git clone https://github.com/napolev/pwa-oauth-login
  $ cd pwa-oauth-login
  $ npm i
  $ npm run start
  </code></pre>
  
  <h2>Test:</h2>
  
  <p>On your <code>iPhone</code> (another device on the same network), go to:</p>
  
  <pre><code>http://[YOUR-SERVER-IP-ADDRESS]:4000
  </code></pre>
  
  <h2>Installing as Standalone:</h2>
  
  <p><strong>Android / Google Chrome</strong> - Click on the highlighted option to install the app as standalone.</p>
  
  <p><img src="https://image.ibb.co/dSLPaV/image-android.png" alt="screenshot" title="Android - Google Chrome"></p>
  
  <p><strong>iPhone / Safari</strong> - Click on the highlighted icons to install the app as standalone.</p>
  
  <p><img src="https://image.ibb.co/fBJP9q/image-iphone.png" alt="screenshot" title="iPhone - Safari"></p>
  
  <h2>Experiments:</h2>
  
  <p>1- <code>2018-11-24 00:10 GMT</code>. On this commit, the <code>OAuth</code> flow behaves as follows:</p>
  
  <pre><code>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 !!!
  </code></pre>