1

I'm trying to complete this tutorial but when I try to incorporate Google Login I keep getting a "Cannot read property push" error. So from looking at this answer it seems like I am not being able to log in via Google Login and so I can't use Firebase's "push".

What I can't figure out is what is preventing me from logging in.

I followed the steps in instructions and

1.) Created a new project

2.) Created OAuth client ID Credentials

3.) Created a consent screen 4.) Selected Web App for app type

5.) Authorized JS origins and redirect URIs as instructed

6.) Went to the Authentication Section (there is no Login & Auth section anymore) and added my client ID and client secret web sdk config (they no longer have a Google Client ID and Secret section)

7.) Main.js was updated to use 'google' as the provider

and I get a "Cannot read property 'push' of undefined" whenever I try to use the app. Is the code in the tutorial no longer valid? I've copied the code from the github page and replaced the firebaseURL with mine so I'm not sure what else could be wrong.

Any help would be appreciated, thanks!

As asked for

(function(document) {
  'use strict';

  var app = document.querySelector('#app');
  app.firebaseURL = "https://***my project here***.firebaseio.com";
  app.firebaseProvider = 'google';

  app.items = [];

  app.updateItems = function(snapshot) {
    this.items = [];
    snapshot.forEach(function(childSnapshot) {
      var item = childSnapshot.val();
      item.uid = childSnapshot.key();
      this.push('items', item);
    }.bind(this));
  };

  app.addItem = function(event) {
    event.preventDefault(); // Don't send the form!
    this.ref.push({
      done: false,
      text: app.newItemValue
    });
    app.newItemValue = '';
  };

  app.toggleItem = function(event) {
    this.ref.child(event.model.item.uid).update({done: event.model.item.done});
  };

  app.deleteItem = function(event) {
    this.ref.child(event.model.item.uid).remove();
  };

  app.onFirebaseError = function(e) {
    this.$.errorToast.text = e.detail.message;
    this.$.errorToast.show();
  };
  app.onFirebaseLogin = function(e) {
    this.ref = new Firebase(this.firebaseURL + '/user/' + e.detail.user.uid);
    this.ref.on('value', function(snapshot) {
      app.updateItems(snapshot);
    });
  };

})(document);
Community
  • 1
  • 1
av0000
  • 1,917
  • 6
  • 31
  • 51

1 Answers1

2

While I'm not sure what the exact cause is, I can tell you that the tutorial you're following is outdated and is using the deprecated <firebase-element> (only works with Firebase 2.0). This is also stated on the element's GitHub page:

Note: This element is for the older Firebase 2.0 API.

For the latest official Firebase 3.0-compatible component from the Firebase team, see the polymerfire component.

A more recent tutorial that uses the newest polymerfire is at: Build a Progressive Web App with Firebase, Polymerfire and Polymer Components

tony19
  • 125,647
  • 18
  • 229
  • 307