Polymer Web Components for Firebase
HTML
Clone or download
Permalink
Failed to load latest commit information.
.github revert Jun 1, 2017
demo Merge pull request #226 from tjmonsi/adding-firebase-storage Sep 5, 2017
test Added a missing closing html tag and formatted test/firebase-query.html Mar 17, 2018
.gitignore revert Jun 1, 2017
.npmignore Initial import. Apr 22, 2016
.travis.yml revert Jun 1, 2017
CONTRIBUTING.md revert Jun 1, 2017
LICENSE revert Jun 1, 2017
README.md Update README.md Oct 6, 2017
bower.json Adds library support for firebase https callable functions (#337) Apr 3, 2018
firebase-app-script.html Updated firebase-storage-behavior and firebase-storage Feb 14, 2017
firebase-app.html Adds library support for firebase https callable functions (#337) Apr 3, 2018
firebase-auth-script.html Updated firebase-storage-behavior and firebase-storage Feb 14, 2017
firebase-auth.html revert Jun 1, 2017
firebase-common-behavior.html revert Jun 1, 2017
firebase-database-behavior.html integrate @merlinnot comments Jan 13, 2018
firebase-database-script.html Updated firebase-storage-behavior and firebase-storage Feb 14, 2017
firebase-document.html Merge branch 'master' into knowIfExists Sep 7, 2017
firebase-firestore-script.html Prepare Firestore functionality Oct 3, 2017
firebase-functions-script.html Adds library support for firebase https callable functions (#337) Apr 3, 2018
firebase-messaging-script.html Updated firebase-storage-behavior and firebase-storage Feb 14, 2017
firebase-messaging.html Based on #214 Jun 2, 2017
firebase-query.html added tests Jan 13, 2018
firebase-storage-behavior.html suppress log messages Sep 16, 2017
firebase-storage-multiupload.html Fix typo in code Nov 4, 2017
firebase-storage-ref.html fixes typo Sep 16, 2017
firebase-storage-script.html revert Jun 1, 2017
firebase-storage-upload-task.html fixes typo Sep 16, 2017
firebase.html Adds library support for firebase https callable functions (#337) Apr 3, 2018
hero.svg Initial import. Apr 22, 2016
index.html revert Jun 1, 2017
polymerfire.html revert Jun 1, 2017

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"
  project-id="polymerfire-test">
</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>