javascriptfirebasepolymerpolymerfire

How to modify this PolymerFire/Firebase tutorial to work with email/password login instead of google account?


I want to modify this Notes app to work with email/password logins instead of using google accounts:

Build a Progressive Web App with Firebase, Polymerfire and Polymer Components

<firebase-auth
  id="auth"
  app-name="notes"
  provider="google"
  signed-in="{{signedIn}}"
  user="{{user}}">
</firebase-auth>

<script>
  Polymer({is: 'note-app', behaviors: [Polymer.NoteAppBehavior],
  signIn: function() {this.$.auth.signInWithPopup();}});
</script>

I've identified the method here: FirebaseExtended/polymerfire/firebase-auth.html

Instead of signInWithPopup(), I need signInWithEmailAndPassword():

    /**
     * Authenticates a Firebase client using an email / password combination.
     *
     * @param  {!String} email Email address corresponding to the user account.
     * @param  {!String} password Password corresponding to the user account.
     * @return {Promise} Promise that handles success and failure.
     */
    signInWithEmailAndPassword: function(email, password) {
      return this._handleSignIn(this.auth.signInWithEmailAndPassword(email, password));
    },

Solution

  • I'm using this:

    <firebase-auth id="auth" user="{{user}}" on-error="_loginError"></firebase-auth>
    <paper-dialog id="authDialog" modal with-backdrop>
      <paper-input label="Email" value="{{signinEmail}}"></paper-input>
      <paper-input label="Password" value="{{signinPassword}}" type="password"></paper-input>
      <div class="buttons">
        <paper-button on-click="_signIn" raised>Sign in</paper-button>
      </div>
    </paper-dialog>
    

    and access auth by this:

      _signIn: function() {
        this.$.auth.signInWithEmailAndPassword(this.signinEmail, this.signinPassword)
          .then(function(response) {
            console.log(response);
          }.bind(this), function(error) {
            this.$.toast.show({text: '' + error});
          }.bind(this))
          .catch(function(error) {
            this.$.toast.show({text: '' + error});
          }.bind(this));
      },
    

    But first you need to enable the email password authentication method from firebase console to be able to use the email password authentication.