Polymer 1.0: Why error on demo <x-login> of <firebase-element> from official Polymer Github (native element)?

Question

Question

What could be causing the following console error?

Uncaught TypeError: this.$.firebaseLogin.login is not a function

---

Explanation

1. I am trying to implement the <x-login> demo of the <firebase-element> element.

2. I am using the code directly from this demo from the official Polymer Github repository.

3. I am implementing the code directly into my app (correctly AFAIK) with no edits (I'm aware of) that might introduce an error.

---

Code

Imports:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/firebase-elelment/firebase-auth.html">

Element:

    Firebase location:
    <input value="https://polymer-tests.firebaseio.com" size="40" disabled>
    <br>

    Provider type:
    <select value="{{provider::change}}">
      <option>anonymous</option>
      <option>facebook</option>
      <option>github</option>
      <option>google</option>
      <option>twitter</option>
      <option>password</option>
    </select>
    <em>Only 'anonymous', 'google', and 'password' are activated for demo Firebase account</em>
    <br>

    Login params (JSON):
    <input value="{{params::input}}" id="params">
    <em>Required by some provider types</em>
    <br>

    <div hidden$="{{computePasswordHidden(provider)}}">
      <br><em>Password-specific options:</em><br>
      <input placeholder="email" value="{{email::input}}">
      <input placeholder="password" value="{{password::input}}">
      <button on-tap="createUserHandler" disabled$="{{computeCreateUserDisabled(email, password)}}">Create user</button>
      <br>
      <input placeholder="new password" value="{{newPassword::input}}">
      <button on-tap="changePasswordHandler" disabled$="{{computeChangePasswordDisabled(email, password, newPassword)}}">Change password</button>
      <br>
      <button on-tap="resetPasswordHandler" disabled$="{{computeResetPasswordDisabled(email, password)}}">Reset password</button>
      <button on-tap="removeUserHandler" disabled$="{{computeRemoveUserDisabled(email, password)}}">Remove user</button>
    </div>
    <br>
    <div id="message">[[message]]</div>
    <br>

    <button on-tap="login" hidden$="{{computeLoginHidden(statusKnown, user)}}">Login</button>
    <button on-tap="logout" hidden$="{{computeLogoutHidden(statusKnown, user)}}">Logout</button>

    <h3>Login status:</h3>
    <p>{{computeLoginStatus(statusKnown, user)}}</p>

    <h3>User ID:</h3>
    <pre>{{user.uid}}</pre>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-login',
    properties: {
      provider: {
        type: String,
        value: 'anonymous'
      },
      message: {
        type: String,
        value: ''
      },
      email: {
        type: String,
        value: ''
      },
      password: {
        type: String,
        value: ''
      },
      user: {
        type: Object,
        value: null
      },
      statusKnown: {
        type: Boolean
      }
    },
    login: function() {
      var params;
      try {
        params = JSON.parse(this.params);
      } catch (e) {
        params = null;
      }
      if (this.provider == 'password') {
        params = params || {};
        params.email = this.email;
        params.password = this.password;
      }
      this.$.firebaseLogin.login(params);
    },
    logout: function() {
      this.$.firebaseLogin.logout();
    },
    errorHandler: function(e) {
      this.message = 'Error: ' + e.detail.message;
    },
    userSuccessHandler: function(e) {
      this.message = e.type + ' success!';
    },
    createUserHandler: function(e) {
      this.$.firebaseLogin.createUser(this.email, this.password);
    },
    changePasswordHandler: function(e) {
      this.$.firebaseLogin.changePassword(this.email, this.password, this.newPassword);
    },
    resetPasswordHandler: function(e) {
      this.$.firebaseLogin.sendPasswordResetEmail(this.email);
    },
    computePasswordHidden: function(provider) {
      return provider !== 'password';
    },
    computeCreateUserDisabled: function(email, password) {
      return !email || !password;
    },
    computeChangePasswordDisabled: function(email, password, newPassword) {
      return !email || !password || !newPassword;
    },
    computeResetPasswordDisabled: function(email, password) {
      return !email || !password;
    },
    computeRemoveUserDisabled: function(email, password) {
      return !email || !password;
    },
    computeLoginHidden: function(statusKnown, user) {
      return !statusKnown || !!user;
    },
    computeLogoutHidden: function(statusKnown, user) {
      return !statusKnown || !user;
    },
    computeLoginStatus: function(statusKnown, user) {
      if (statusKnown && user) {
        return 'Logged in';
      }
      if (statusKnown) {
        return 'Logged out';
      }
      return 'Unknown (checking status...)';
    }
  });
</script>

Answer 1

<link rel="import" href="../bower_components/firebase-elelment/firebase-auth.html">

element is spelled wrong