Facebook OAuth “Unsupported” in Chrome on iOS

Question

The Facebook OAuth popup is throwing an error in Chrome on iOS only. Both developers.facebook.com and google have turned up nothing about this. Ideas?

Answer 1

This is a very common issue which all developers have faced while implementing the FB login feature. I have tried most of the Internet solutions but none of them worked. Either window.opener do not work in Chrome iOS or sometime FB object is not loaded while using /dialog/oauth.

Finally I solved this by myself after trying all the hacks!

function loginWithFacebook()
{
  if( navigator.userAgent.match('CriOS') )
  {
    var redirect_uri = document.location.href;
    if(redirect_uri.indexOf('?') !== -1)
    {
      redirect_uri += '&back_from_fb=1';
    }
    else
    {
      redirect_uri += '?back_from_fb=1';
    }
    var url = 'https://www.facebook.com/dialog/oauth?client_id=[app-id]&redirect_uri='+redirect_uri+'&scope=email,public_profile';
    var win = window.open(url, '_self');
  }
  else
  {
    FB.login(function(response)
      {
        checkLoginState();
      },
      {
        scope:'public_profile,email,user_friends,user_photos'
      });
  }
}

Notice that above I'm passing an extra param to the redirect url so that once the new window opens with above redirect uri I could read the values and can say yes this call is from Chrome iOS window. Also make sure this code runs on page load.

if (document.URL.indexOf('back_from_fb=1') != -1 && document.URL.indexOf('code=') != -1)
{
  pollingInterval = setInterval(function()
    {
      if(typeof FB != "undefined")
      {
        FB.getLoginStatus(function(response) {}, true);
        checkLoginState();
      }
      else
      {
        alert("FB is not responding, Please try again!", function()
          {
            return true;
          });
      }
    }, 1000);
}