Skip to content

Mash19/polymerfire

This branch is 18 commits behind FirebaseExtended/polymerfire:master.

Folders and files

NameName
Last commit message
Last commit date
May 18, 2016
Sep 5, 2017
Apr 21, 2017
Apr 21, 2017
Apr 22, 2016
Apr 22, 2016
May 18, 2016
May 3, 2016
Oct 6, 2017
Oct 4, 2017
Oct 21, 2016
Oct 3, 2017
Oct 21, 2016
Nov 15, 2016
Apr 21, 2017
Apr 21, 2017
Oct 21, 2016
Jul 12, 2017
Oct 3, 2017
Oct 21, 2016
May 25, 2017
Sep 23, 2017
Sep 16, 2017
Sep 16, 2017
Sep 16, 2017
Apr 21, 2017
Sep 16, 2017
Oct 21, 2016
Apr 22, 2016
May 3, 2016
Jun 1, 2017

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-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>

Packages

No packages published

Languages

  • HTML 100.0%