@firefly-elements/polymerfire
v0.5.15
Published
Polymer Web Components for Firebase
Downloads
19
Maintainers
Readme
<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>