Geek Answers Handbook

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

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

I have a custom <paper-button> that I am trying to do to log in to authenticate the user. I want to use Firebase to run a user authentication service.

Here is the user documentation .

Here is the Github repository .

+6
source share
2 answers

Looks like I found him. 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>
+8
source

I recently found the best, recently updated version of a solution for this.

However, this is difficult to verify. This is a demo version of Polymerfire , also located here on Github .

Steps to monitor it (on 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) use the latest open command, just go (using your browser) to: http://localhost:8080/components/polymerfire/demo/ .

+2
source

More articles:


All Articles