polymerfire-auth error "auth/popup-closed-by-user" 404 on popup redirect

Question

I created a Firebase project based on Polymer Starter Kit and made some modifications to fix routing, but the sign-in popup immediately closes and logs an error:

The popup has been closed by the user before finalizing the operation.

The _authenticate function (in the code below) is called to authenticate the user. I was able to properly set it up both on Facebook and Google console, so I'm not sure what the error means.

Here's my code:

<dom-module id="my-app">
  <template>
    
    !-- Firebase Setup -->
    <firebase-app auth-domain="foodhop-manage.firebaseapp.com"
                  database-url="https://foodhop-manage.firebaseio.com"
                  api-key="AIzaSyA-1TEbd1EhlkPwjGBLNS74h3c5FNCHNo0"></firebase-app>

    <!-- Firebase Authentication -->
    <firebase-auth id="auth"
                    user="{{user}}"
                    signed-in="{{signedIn}}"
                    on-error="handleError"></firebase-auth>

    <!-- App Routing -->
    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

    <!-- Scroll Position Control -->
    <app-scrollpos-control id="scrollpos" selected="[[page]]" reset></app-scrollpos-control>

    <!-- Application -->
    <app-header-layout>
      <app-header condenses reveals shadow>
        <app-toolbar>
          <div main-title style="text-align:center;font-size:40px;padding-top:20px" class="font-beautify">FoodHop</div>
        </app-toolbar>
        <app-toolbar sticky>
          <div class="flex"></div>
          <paper-tabs selected="[[page]]" attr-for-selected="name" class="self-end">
            <paper-tab link name="about">
              <a href="/about" class="link" tabindex="-1">About</a>
            </paper-tab>
            <paper-tab link name="register" hidden$="[[signedIn]]">
              <a href="/register" class="link" tabindex="-1">Register</a>
            </paper-tab>
            <paper-tab link name="login">
              <a href="/login" class="link" tabindex="-1">Login</a>
            </paper-tab>
          </paper-tabs>
          <div class="flex"></div>
        </app-toolbar>
      </app-header>

      <div>
        <iron-pages selected="[[page]]"
                    attr-for-selected="name"
                    fallback-selection="404"
                    role="main">
          <my-about name="about"></my-about>
          <my-register name="register"></my-register>
          <my-login name="login"
                    signed-in="[[signedIn]]"
                    user="[[user]]"></my-login>
        </iron-pages>
      </div>

      <!-- Go to Console -->
      <!-- <paper-fab icon="input"></paper-fab> -->
    </app-header-layout>

    <paper-toast id="toast"></paper-toast>
  </template>

  <script>
    Polymer({
      is: 'my-app',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },

        user: {
          type: Object,
          observer: '_userChanged'
        },

        signedIn: {
          type: Boolean,
          observer: '_signedInChanged'
        }
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],

      listeners: {
        'register': '_register',
        'authenticate': '_authenticate',
        'logout': '_logout',
        'showToast': 'showToast'
      },

      ready: function() {
        this.$.auth.signOut();
      },

      toast: function(message) {
        this.$.toast.text = message;
        this.$.toast.show(message);
      },

      showToast: function(e) {
        this.$.toast.show({
          text: e.detail.message
        });
      },

      _authenticate: function(e) {
        var provider = e.detail.provider;
        this.$.auth.signInWithPopup(provider)
          .then(function(response) {
            console.log('successful!', response);
          }).catch(function(error){
            console.log('oops!', error);
          });
      },

      _userChanged: function(user) {
        // console.log(user);
      },

      _signedInChanged: function(signIn) {
        console.log(signIn);
        if (signIn) {
          this.page = 'login';
          this.set('route.path', '/login');
          this.toast('Sweet. Thanks for logging in!');
        } else {
          this.toast('Y U NO sign in?');
        }
      },

      _logout: function() {
        this.$.auth.signOut();
      },

      _register: function() {
        this.page = 'register';
        this.set('route.path', '/register');
      },

      _routePageChanged: function(page) {
        this.page = page || 'about';
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = '404';
      },

      handleError: function(e) {
        console.log(e);
      }
    });
  </script>
</dom-module>

Answer 1

Add the domain in authorized domains in firebase console. e.g. add localhost or 127.0.0.1.

While error in firefox says:

The popup has been closed by the user before finalizing the operation.

Chrome gives a more descriptive message:

This domain (127.0.0.1) is not authorized to run this operation. Add it to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

Answer 2

Disabling browsersync solved this for me in my local development environment