Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.
This repository was 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

@hadfieldn

Description

@hadfieldn

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions