Polymer Web Components for Firebase
HTML JavaScript
Permalink
Failed to load latest commit information.
.github Get rid of old FirebasePrivate references May 18, 2016
demo v0.10.1 Oct 21, 2016
test Adds support for leaf node queries. (#96) Oct 25, 2016
.gitignore Initial import. Apr 22, 2016
.npmignore Initial import. Apr 22, 2016
.travis.yml Initial import. Apr 22, 2016
CONTRIBUTING.md Tedium's automatic changes (#19) May 18, 2016
LICENSE Add licenses to all files. May 3, 2016
README.md Added `storage-bucket` and `messaging-sender-id` to docs (#173) Jan 3, 2017
bower.json v0.10.3 Nov 8, 2016
firebase-app-script.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase-app.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase-auth-script.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase-auth.html Adds sendPasswordResetEmail to firebase-auth. Fixes #147. (#148) Nov 15, 2016
firebase-common-behavior.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase-database-behavior.html loop over value keys to check wich value need to be updated (#166) Feb 4, 2017
firebase-database-script.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase-document.html loop over value keys to check wich value need to be updated (#166) Feb 4, 2017
firebase-messaging-script.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase-messaging.html Adds push-supported property to firebase-messaging (#151) Nov 15, 2016
firebase-query.html Fix change path on firebase-query issue (#167) Feb 4, 2017
firebase-storage-script.html Splits imports up per-feature. (#131) Oct 21, 2016
firebase.html Splits imports up per-feature. (#131) Oct 21, 2016
hero.svg Initial import. Apr 22, 2016
index.html Add licenses to all files. May 3, 2016
polymerfire.html Imports firebase-storage-script for backwards-compatibility Oct 21, 2016
sw-import.js Implement note-app demo. May 18, 2016

README.md

Build status

<firebase-app>

The firebase-app element is used for initializing and configuring your connection to firebase.

<firebase-auth>

firebase-auth is a wrapper around the Firebase authentication API. It notifies successful authentication, provides user information, and handles different types of authentication including anonymous, email / password, and several OAuth workflows.

Example Usage:

<firebase-app
  auth-domain="polymerfire-test.firebaseapp.com"
  database-url="https://polymerfire-test.firebaseio.com/"
  api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"
  storage-bucket="polymerfire-test.appspot.com"
  messaging-sender-id="544817973908">
</firebase-app>
<firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError">
</firebase-auth>

The firebase-app element initializes app in firebase-auth (see firebase-app documentation for more information), but an app name can simply be specified at firebase-auth's app-name property instead.

JavaScript sign-in calls can then be made to the firebase-auth object to attempt authentication, e.g.:

this.$.auth.signInWithPopup()
    .then(function(response) {// successful authentication response here})
    .catch(function(error) {// unsuccessful authentication response here});

This popup sign-in will then attempt to sign in using Google as an OAuth provider since there was no provider argument specified and since "google" was defined as the default provider.

<firebase-document>

The firebase-document element is an easy way to interact with a firebase location as an object and expose it to the Polymer databinding system.

For example:

<firebase-document
  path="/users/{{userId}}/notes/{{noteId}}"
  data="{{noteData}}">
</firebase-document>

This fetches the noteData object from the firebase location at /users/${userId}/notes/${noteId} and exposes it to the Polymer databinding system. Changes to noteData will likewise be, sent back up and stored.

<firebase-document> needs some information about how to talk to Firebase. Set this configuration by adding a <firebase-app> element anywhere in your app.

<firebase-query>

firebase-query combines the given properties into query options that generate a query, a request for a filtered, ordered, immutable set of Firebase data. The results of this Firebase query are then synchronized into the data parameter.

Example usage:

<firebase-query
    id="query"
    app-name="notes"
    path="/notes/[[uid]]"
    data="{{data}}">
</firebase-query>

<template is="dom-repeat" items="{{data}}" as="note">
  <sticky-note note-data="{{note}}"></sticky-note>
</template>

<script>
Polymer({
  properties: {
    uid: String,
    data: {
      type: Object,
      observer: 'dataChanged'
    }
  },

  dataChanged: function (newData, oldData) {
    // do something when the query returns values
  }
});
</script>