Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Link to redirect or open popup for auth doesn't work in Facebook browser #50

Open
hadfieldn opened this issue Apr 15, 2015 · 0 comments

Comments

@hadfieldn
Copy link

I seem to have a problem with Facebook or Google authentication when my login link is visited from within the iOS Facebook browser. I’ve confirmed that other popup links and redirects in general can work within the browser, but it for some reason it blocks Firebase auth popup. (We haven’t had problems with any other browsers blocking the popup.)

Here is the code for my Polymer element 'twt-auth-panel’ that provides the content of an iframe that I open when the user clicks the Sign In link.

<polymer-element name="twt-auth-panel" attributes="user" layout vertical center>
  <template>
    ...
    <firebase-login id="firebaseLogin" statusKnown="true" redirect="false"
                    location="{{baseUrl}}" provider="{{authProvider}}"
                    on-login="{{onLogin}}" on-error="{{onError}}" params='{"scope": "email,user_location"}'></firebase-login>
    ...
    <paper-button id="fbLoginButton" class="signin-button" on-click="{{ loginFacebook }}"><core-icon icon="social-post:facebook"></core-icon>Sign in with Facebook</paper-button>
    <paper-button id="googLoginButton" class="signin-button" on-click="{{ loginGoogle }}"><core-icon icon="social-post:gplus"></core-icon>Sign in with Google</paper-button>
    ...
  </template>
  <script>
    Polymer('twt-auth-panel', {
      ...
      loginFacebook: function (event, detail, sender) {
        this.user = null;
        this.authProvider = 'facebook';
        this.$.firebaseLogin.login({scope: "email,user_location"});
      },
      loginGoogle: function (event, detail, sender) {
        this.user = null;
        this.authProvider = 'google';
        this.$.firebaseLogin.login({scope: "email"
                                           + ",https://www.googleapis.com/auth/plus.me"
                                           + ",https://www.googleapis.com/auth/plus.profiles.read"});
      },
      ...
    });
  </script>
</polymer-element>

As you can see, within this element I have a couple of paper-buttons with on-click handlers that invoke the login() method of the firebase-login element. In all other browsers we've tested, these buttons work to open the Firebase authentication popups, but in the Facebook mobile app, the button actions are ignored.

From my reading of the code, this is probably a result of the way the popup/redirect is implemented in the firebase/firebase.js script -- perhaps too many levels of indirection before the popup window finally gets opened. I've submitted a support request to Firebase and am waiting to hear back from them. In the meantime I thought I'd check if anyone else might have encountered this issue within the Facebook browser.

Many thanks in advance!
Nathan

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant