Skip to content
This repository was archived by the owner on Mar 30, 2022. It is now read-only.

KatapultDevelopment/polymerfire

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Repository files navigation

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-appauth-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-authid="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-documentpath="/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-queryid="query" app-name="notes" path="/notes/[[uid]]" data="{{data}}"></firebase-query><templateis="dom-repeat" items="{{data}}" as="note"><sticky-notenote-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>

About

Polymer Web Components for Firebase

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML100.0%