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

Total
1
Shares

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.

enter image description here

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:

_x000D_

_x000D_

<dom-module id="my-app">_x000D_
  <template>_x000D_
    _x000D_
    !-- Firebase Setup -->_x000D_
    <firebase-app auth-domain="foodhop-manage.firebaseapp.com"_x000D_
                  database-url="https://foodhop-manage.firebaseio.com"_x000D_
                  api-key="AIzaSyA-1TEbd1EhlkPwjGBLNS74h3c5FNCHNo0"></firebase-app>_x000D_
_x000D_
    <!-- Firebase Authentication -->_x000D_
    <firebase-auth id="auth"_x000D_
                    user="{{user}}"_x000D_
                    signed-in="{{signedIn}}"_x000D_
                    on-error="handleError"></firebase-auth>_x000D_
_x000D_
    <!-- App Routing -->_x000D_
    <app-location route="{{route}}"></app-location>_x000D_
    <app-route_x000D_
        route="{{route}}"_x000D_
        pattern="/:page"_x000D_
        data="{{routeData}}"_x000D_
        tail="{{subroute}}"></app-route>_x000D_
_x000D_
    <!-- Scroll Position Control -->_x000D_
    <app-scrollpos-control id="scrollpos" selected="[[page]]" reset></app-scrollpos-control>_x000D_
_x000D_
    <!-- Application -->_x000D_
    <app-header-layout>_x000D_
      <app-header condenses reveals shadow>_x000D_
        <app-toolbar>_x000D_
          <div main-title style="text-align:center;font-size:40px;padding-top:20px" class="font-beautify">FoodHop</div>_x000D_
        </app-toolbar>_x000D_
        <app-toolbar sticky>_x000D_
          <div class="flex"></div>_x000D_
          <paper-tabs selected="[[page]]" attr-for-selected="name" class="self-end">_x000D_
            <paper-tab link name="about">_x000D_
              <a href="/about" class="link" tabindex="-1">About</a>_x000D_
            </paper-tab>_x000D_
            <paper-tab link name="register" hidden$="[[signedIn]]">_x000D_
              <a href="/register" class="link" tabindex="-1">Register</a>_x000D_
            </paper-tab>_x000D_
            <paper-tab link name="login">_x000D_
              <a href="/login" class="link" tabindex="-1">Login</a>_x000D_
            </paper-tab>_x000D_
          </paper-tabs>_x000D_
          <div class="flex"></div>_x000D_
        </app-toolbar>_x000D_
      </app-header>_x000D_
_x000D_
      <div>_x000D_
        <iron-pages selected="[[page]]"_x000D_
                    attr-for-selected="name"_x000D_
                    fallback-selection="404"_x000D_
                    role="main">_x000D_
          <my-about name="about"></my-about>_x000D_
          <my-register name="register"></my-register>_x000D_
          <my-login name="login"_x000D_
                    signed-in="[[signedIn]]"_x000D_
                    user="[[user]]"></my-login>_x000D_
        </iron-pages>_x000D_
      </div>_x000D_
_x000D_
      <!-- Go to Console -->_x000D_
      <!-- <paper-fab icon="input"></paper-fab> -->_x000D_
    </app-header-layout>_x000D_
_x000D_
    <paper-toast id="toast"></paper-toast>_x000D_
  </template>_x000D_
_x000D_
  <script>_x000D_
    Polymer({_x000D_
      is: 'my-app',_x000D_
_x000D_
      properties: {_x000D_
        page: {_x000D_
          type: String,_x000D_
          reflectToAttribute: true,_x000D_
          observer: '_pageChanged'_x000D_
        },_x000D_
_x000D_
        user: {_x000D_
          type: Object,_x000D_
          observer: '_userChanged'_x000D_
        },_x000D_
_x000D_
        signedIn: {_x000D_
          type: Boolean,_x000D_
          observer: '_signedInChanged'_x000D_
        }_x000D_
      },_x000D_
_x000D_
      observers: [_x000D_
        '_routePageChanged(routeData.page)'_x000D_
      ],_x000D_
_x000D_
      listeners: {_x000D_
        'register': '_register',_x000D_
        'authenticate': '_authenticate',_x000D_
        'logout': '_logout',_x000D_
        'showToast': 'showToast'_x000D_
      },_x000D_
_x000D_
      ready: function() {_x000D_
        this.$.auth.signOut();_x000D_
      },_x000D_
_x000D_
      toast: function(message) {_x000D_
        this.$.toast.text = message;_x000D_
        this.$.toast.show(message);_x000D_
      },_x000D_
_x000D_
      showToast: function(e) {_x000D_
        this.$.toast.show({_x000D_
          text: e.detail.message_x000D_
        });_x000D_
      },_x000D_
_x000D_
      _authenticate: function(e) {_x000D_
        var provider = e.detail.provider;_x000D_
        this.$.auth.signInWithPopup(provider)_x000D_
          .then(function(response) {_x000D_
            console.log('successful!', response);_x000D_
          }).catch(function(error){_x000D_
            console.log('oops!', error);_x000D_
          });_x000D_
      },_x000D_
_x000D_
      _userChanged: function(user) {_x000D_
        // console.log(user);_x000D_
      },_x000D_
_x000D_
      _signedInChanged: function(signIn) {_x000D_
        console.log(signIn);_x000D_
        if (signIn) {_x000D_
          this.page = 'login';_x000D_
          this.set('route.path', '/login');_x000D_
          this.toast('Sweet. Thanks for logging in!');_x000D_
        } else {_x000D_
          this.toast('Y U NO sign in?');_x000D_
        }_x000D_
      },_x000D_
_x000D_
      _logout: function() {_x000D_
        this.$.auth.signOut();_x000D_
      },_x000D_
_x000D_
      _register: function() {_x000D_
        this.page = 'register';_x000D_
        this.set('route.path', '/register');_x000D_
      },_x000D_
_x000D_
      _routePageChanged: function(page) {_x000D_
        this.page = page || 'about';_x000D_
      },_x000D_
_x000D_
      _pageChanged: function(page) {_x000D_
        // Load page import on demand. Show 404 page if fails_x000D_
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');_x000D_
        this.importHref(resolvedPageUrl, null, this._showPage404, true);_x000D_
      },_x000D_
_x000D_
      _showPage404: function() {_x000D_
        this.page = '404';_x000D_
      },_x000D_
_x000D_
      handleError: function(e) {_x000D_
        console.log(e);_x000D_
      }_x000D_
    });_x000D_
  </script>_x000D_
</dom-module>

_x000D_

_x000D_

_x000D_


Solution

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.

Leave a Reply

Your email address will not be published. Required fields are marked *