example-collection.html

<link rel="import" href="/bower_components/iron-list/iron-list.html">
<link rel="import" href="/bower_components/iron-form/iron-form.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/firebase-element/firebase.html">
<link rel="import" href="/bower_components/firebase-element/firebase-collection.html">

<dom-module id="categories-list">
    <style>
      :host {
        display: block;
      }
    </style>
  <template>
    <firebase-collection id="firebase" location="{{firebaseURL}}" data="{{categories}}"></firebase-collection>
    <form is="iron-form" id="add-category">
      <paper-input id="category" name="category" label="New Category" required></paper-input>
      <paper-button raised on-click="addCategory">Submit</paper-button>
    </form>
    <iron-list items="{{categories}}" as="category">
      <template>
        <div>
          Name: <span>{{category.value}}</span>
        </div>
      </template>
    </iron-list>
  </template>
</dom-module>
  <script>
  (function() {
    Polymer({
      is: 'categories-list',
      properties: {
        user: {
          type: Object,
          value: null
        },
        firebaseURL: {
          type: String,
          computed: '_firebaseURL(user)'
        }
      },
      _firebaseURL: function(user){
        if(!user){return null;}
        return "https://xxx.firebaseio.com/" + user.uid + "/categories";
      },
      addCategory: function(event){
        this.$.firebase.add(this.$['add-category'].serialize().category);
        this.$.category.value = ""
      }
    });
    })();
  </script>

example-login.html

<link rel="import" href="/bower_components/firebase-element/firebase.html">
<link rel="import" href="/bower_components/firebase-element/firebase-auth.html">
<link rel="import" href="/bower_components/iron-icon/iron-icon.html">

<dom-module id="login-badge">
    <style>
      :host {
        display: block;
      }
    </style>
  <template>
    <firebase-auth id="firebaseLogin" user="{{user}}" status-known="{{statusKnown}}" location="https://xxx.firebaseio.com" provider="{{provider}}" on-error="errorHandler" ></firebase-auth>
    
    <button on-tap="login" hidden$="{{computeLoginHidden(statusKnown, user)}}">Login</button>
    <button on-tap="logout" hidden$="{{computeLogoutHidden(statusKnown, user)}}">Logout</button>
      
  </template>
</dom-module>
  <script>
  (function() {
    Polymer({
      is: 'login-badge',
      properties: {
        provider: {
          type: String,
          value: 'anonymous'
        },
        user: {
          type: Object,
          value: null,
          notify: true
        },
        statusKnown: {
          type: Boolean
        }
      },
      login: function() {
        this.$.firebaseLogin.login();
      },
      logout: function() {
        this.$.firebaseLogin.logout();
      },
      errorHandler: function(e) {
        this.message = 'Error: ' + e.detail.message;
      },
      userSuccessHandler: function(e) {
        this.message = e.type + ' success!';
      },
      computeLoginHidden: function(statusKnown, user) {
        return !statusKnown || !!user;
      },
      computeLogoutHidden: function(statusKnown, user) {
        return !statusKnown || !user;
      }
    });
    })();
  </script>