title: polymerfire-auth error "auth/popup-closed-by-user" 404 on popup redirect
body: <p>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:</p>
  
  <blockquote>
    <p>The popup has been closed by the user before finalizing the operation.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/uWqI0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uWqI0.png" alt="enter image description here"></a></p>
  
  <p>The <code>_authenticate</code> 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.</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dom-module id="my-app"&gt;
    &lt;template&gt;
      
      !-- Firebase Setup --&gt;
      &lt;firebase-app auth-domain="foodhop-manage.firebaseapp.com"
                    database-url="https://foodhop-manage.firebaseio.com"
                    api-key="AIzaSyA-1TEbd1EhlkPwjGBLNS74h3c5FNCHNo0"&gt;&lt;/firebase-app&gt;
  
      &lt;!-- Firebase Authentication --&gt;
      &lt;firebase-auth id="auth"
                      user="{{user}}"
                      signed-in="{{signedIn}}"
                      on-error="handleError"&gt;&lt;/firebase-auth&gt;
  
      &lt;!-- App Routing --&gt;
      &lt;app-location route="{{route}}"&gt;&lt;/app-location&gt;
      &lt;app-route
          route="{{route}}"
          pattern="/:page"
          data="{{routeData}}"
          tail="{{subroute}}"&gt;&lt;/app-route&gt;
  
      &lt;!-- Scroll Position Control --&gt;
      &lt;app-scrollpos-control id="scrollpos" selected="[[page]]" reset&gt;&lt;/app-scrollpos-control&gt;
  
      &lt;!-- Application --&gt;
      &lt;app-header-layout&gt;
        &lt;app-header condenses reveals shadow&gt;
          &lt;app-toolbar&gt;
            &lt;div main-title style="text-align:center;font-size:40px;padding-top:20px" class="font-beautify"&gt;FoodHop&lt;/div&gt;
          &lt;/app-toolbar&gt;
          &lt;app-toolbar sticky&gt;
            &lt;div class="flex"&gt;&lt;/div&gt;
            &lt;paper-tabs selected="[[page]]" attr-for-selected="name" class="self-end"&gt;
              &lt;paper-tab link name="about"&gt;
                &lt;a href="/about" class="link" tabindex="-1"&gt;About&lt;/a&gt;
              &lt;/paper-tab&gt;
              &lt;paper-tab link name="register" hidden$="[[signedIn]]"&gt;
                &lt;a href="/register" class="link" tabindex="-1"&gt;Register&lt;/a&gt;
              &lt;/paper-tab&gt;
              &lt;paper-tab link name="login"&gt;
                &lt;a href="/login" class="link" tabindex="-1"&gt;Login&lt;/a&gt;
              &lt;/paper-tab&gt;
            &lt;/paper-tabs&gt;
            &lt;div class="flex"&gt;&lt;/div&gt;
          &lt;/app-toolbar&gt;
        &lt;/app-header&gt;
  
        &lt;div&gt;
          &lt;iron-pages selected="[[page]]"
                      attr-for-selected="name"
                      fallback-selection="404"
                      role="main"&gt;
            &lt;my-about name="about"&gt;&lt;/my-about&gt;
            &lt;my-register name="register"&gt;&lt;/my-register&gt;
            &lt;my-login name="login"
                      signed-in="[[signedIn]]"
                      user="[[user]]"&gt;&lt;/my-login&gt;
          &lt;/iron-pages&gt;
        &lt;/div&gt;
  
        &lt;!-- Go to Console --&gt;
        &lt;!-- &lt;paper-fab icon="input"&gt;&lt;/paper-fab&gt; --&gt;
      &lt;/app-header-layout&gt;
  
      &lt;paper-toast id="toast"&gt;&lt;/paper-toast&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      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);
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;</code></pre>
  </div>
  </div>
  </p>