I need a working example demo of the <firebase-auth> or Polymerfire element in Polymer 1.x

Question

Please share a working code example of how to use the <firebase-auth> Polymer element.

I have a custom <paper-button> I'm trying to make into a login button for user authentication. I want to use the Firebase to perform the user authentication service.

Here is the user documentation.

Here is the Github repository.

Discourage

possible duplicate of An example of how to implement firebase-auth in Polymer 1.0? – Countermand

Answer 1

Looks like I found one. Here it is.

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../firebase-element/firebase-auth.html">
<link rel="import" href="../paper-button/paper-button.html">
<!--
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](http://standardjs.com/)
@demo https://hi9.uk/
-->
<dom-module id="hi9-login">
  <template>
    <firebase-auth id="firebaseLogin" user="{{user}}" status-known="{{statusKnown}}" location="https://hi9site.firebaseio.com" provider="google" on-error="errorHandler" on-user-created="userSuccessHandler" on-password-changed="userSuccessHandler" on-password-reset="userSuccessHandler" params="{{params}}" on-user-removed="userSuccessHandler"></firebase-auth>
    <paper-button raised on-tap="logout" hidden$="{{computeLogoutHidden(statusKnown, user)}}"> Logout </paper-button>
    <paper-button raised on-tap="login" hidden$="{{computeLoginHidden(statusKnown, user)}}"> {{loginText}} </paper-button>
  </template>
</dom-module>
<script>
(function () {
  'use strict'
  Polymer({
    is: 'hi9-login',
    properties: {
      params: {
        type: Object,
        value: {scope: 'email'}
      },
      loginText :{
        value:"Login"
      },
      provider: {
        type: String, value: 'anonymous'
      },
      message: {
        type: String, value: ''
      },
      email: {
        type: String, value: ''
      },
      password: {
        type: String, value: ''
      },
      user: {
        type: Object, value: null,
        notify: true
      },
      uid: {
        computed: 'returnVal(user.uid)',
        notify: true
      },
      statusKnown: {
        type: Boolean
      },
      show_model: {
        type: Boolean, notify: true,
        computed: 'computeLogoutHidden(statusKnown, user)'
      }
    },
    returnVal: function (val) {
      if (val !== undefined && val !== null) {
        return val
      } else {
        return undefined
      }
    },
    login: function () {
      var params
      try {
        params = JSON.parse(this.params)
      } catch (e) {
        params = null
      }
      if (this.provider === 'password') {
        params = params || {}
        params.email = this.email
        params.password = this.password
      }
      this.$.firebaseLogin.login(params)
    },
    logout: function () {
      this.$.firebaseLogin.logout()
      window.location.href = "/"
    },
    errorHandler: function (e) {
      this.message = 'Error: ' + e.detail.message
    },
    userSuccessHandler: function (e) {
      this.message = e.type + ' success!'
    },
    createUserHandler: function (e) {
      this.$.firebaseLogin.createUser(this.email, this.password)
    },
    changePasswordHandler: function (e) {
      this.$.firebaseLogin.changePassword(this.email, this.password, this.newPassword)
    },
    resetPasswordHandler: function (e) {
      this.$.firebaseLogin.sendPasswordResetEmail(this.email)
    },
    computePasswordHidden: function (provider) {
      return provider !== 'password'
    },
    computeCreateUserDisabled: function (email, password) {
      return !email || !password
    },
    computeChangePasswordDisabled: function (email, password, newPassword) {
      return !email || !password || !newPassword
    },
    computeResetPasswordDisabled: function (email, password) {
      return !email || !password
    },
    computeRemoveUserDisabled: function (email, password) {
      return !email || !password
    },
    computeLoginHidden: function (statusKnown, user) {
      return !statusKnown || !!user
    },
    computeLogoutHidden: function (statusKnown, user) {
      return !statusKnown || !user
    },
    computeLoginStatus: function (statusKnown, user) {
      var d = new Date()
      var n = d.getTime()
      if (statusKnown && user) {
        return 'Logged in'
      }
      if (statusKnown) {
        return 'Logged out'
      }
      return 'Unknown (checking status...)'
    },
    isAdmin: function (role) {
      return role === 'admin'
    }
  })
  function clone (obj) {
    var copy
    // Handle the 3 simple types, and null or undefined
    if (obj === null || typeof obj !== 'object') return obj
    // Handle Date
    if (obj instanceof Date) {
      copy = new Date()
      copy.setTime(obj.getTime())
      return copy
    }
    // Handle Array
    if (obj instanceof Array) {
      copy = []
      for (var i = 0, len = obj.length; i < len; i++) {
        copy[i] = clone(obj[i])
      }
      return copy
    }
    // Handle Object
    if (obj instanceof Object) {
      copy = {}
      for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr])
      }
      return copy
    }
    throw new Error("Unable to copy obj! Its type isn't supported.")
  }
})()
</script>

Discourage

That's written up by our lead dev. It works a treat. – Parke

Answer 2

I recently found a better, newly updated version of a solution to this.

However, it is tricky to observe. It is the Polymerfire demo, also located here on Github.

Steps to observe it (at the command line):

git clone https://github.com/firebase/polymerfire
cd polymerfire
bower install
polymer serve
open http://localhost:8080/components/polymerfire/demo/

You can also (optionally) instead of using the last open command, simply navigate (using your browser) to: http://localhost:8080/components/polymerfire/demo/.

Discourage

Thanks for this! Incase anyone is unsure you will need the polymer-cli to perform the serve. polymer-project.org/1.0/docs/tools/polymer-cli – Euterpe