firebase-login.html

<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="firebase-import.html">
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="firebase-login" attributes="location provider user autoLogin statusKnown params redirect">
<!--
Element wrapper for the Firebase authentication API (https://www.firebase.com/docs/web/guide/user-auth.html).

@class firebase-login
@blurb Element wrapper for the Firebase Simple Login API (https://www.firebase.com/docs/web/guide/user-auth.html).
@status alpha
@snap snap.png
-->

<script>
  
  Polymer('firebase-login', {

    /**
     * Fired when user is logged in
     * 
     * @event login
     */

    /**
     * Fired when user is logged out
     * 
     * @event logout
     */

    /**
     * Fired when an error occurred logging in
     * 
     * @event error
     */

    /**
     * Fired when user is created (password provider type)
     * 
     * @event user-created
     */

    /**
     * Fired when user changes their password (password provider type)
     * 
     * @event password-changed
     */

    /**
     * Fired when password reset email is sent (password provider type)
     * 
     * @event password-reset
     */

    /**
     * Fired when user is removed (password provider type)
     * 
     * @event user-removed
     */
       
    /**
     * Firebase location URL (must have simple login enabled via Forge interface).
     * @attribute location
     * @type String
     * @default null
     */
    location: null,

    /**
     * Default login provider type.  May be one of: `anonymous`, `custom`, `password`
     * `facebook`, `github`, `twitter`, `google`.
     * @attribute provider
     * @type String
     * @default 'anonymous'
     */
    provider: 'anonymous',

    /**
     * When logged in, this property reflects the firebase user auth object.
     * @attribute user
     * @type Object
     * @default null
     */
    user: null,

    /**
     * When true, login will be attempted if login status check determines no user is
     * logged in.  Should generally only be used with provider types that do not present
     * a login UI, such as 'anonymous'.
     * @attribute autoLogin
     * @type Boolean
     * @default false
     */
    autoLogin: false,

    /**
     * When true, login status can be determined by checking `user` property.
     * @attribute statusKnown
     * @type Boolean
     * @default false
     */
    statusKnown: false,

    /**
     * Provider-specific parameters to pass to login.  May be overridden at `login()`-time.
     * @attribute params
     * @type Object
     * @default null
     */
    params: null,

    /**
     * Provider-specific options to pass to login, for provider types that take a second
     * object to pass firebase-specific options.  May be overridden at `login()`-time.
     * @attribute options
     * @type Object
     * @default null
     */
    options: null,

    /**
     * For OAuth provider types (`facebook`, `twitter`, `github`, `google`), determines
     * whether the login UI is presented via redirect, as opposed to popup (default).
     * @attribute redirect
     * @type Boolean
     * @default false
     */
    redirect: false,

    ready: function() {
      this._boundAuthHandler = this._authHandler.bind(this);
      this._boundOnlineHandler = this._onlineHandler.bind(this);
    },

    attached: function() {
      window.addEventListener('online', this._boundOnlineHandler);
      if (this.ref) {
        this.locationChanged();
      }
    },

    detached: function() {
      window.removeEventListener(this._boundOnlineHandler);
      this.ref.offAuth(this._boundAuthHandler);
    },

    locationChanged: function() {
      if (this.location != this._location) {
        if (this._location) {
          this.ref.offAuth(this._boundAuthHandler);
        }
      }
      this._location = this.location;
      if (this._location) {
        this.ref = new Firebase(this.location);
        this.ref.onAuth(this._boundAuthHandler);
      } else {
        this.ref = null;
      }
    },

    _loginHandler: function(error, user) {
      if (error) {
        // an error occurred while attempting login
        this.fire('error', error);
      } else {
        this._authHandler(user);
      } 
    },

    _authHandler: function(user) {
      if (user) {
        // user authenticated with Firebase
        this.user = user;
        this.statusKnown = true;
        this.fire('login', {user: user});
      } else {
        this.user = null;
        if (this.statusKnown) {
          this.fire('logout');
        }
        if (this.queuedLogin) {
          this.login(this.queuedLogin.params, this.queuedLogin.options);
          this.queuedLogin = null;
        } else if (!this.statusKnown && this.autoLogin) {
          this.login();                
        }
        this.statusKnown = true;
      }      
    },

    /**
     * Performs a login attempt, using the `provider` specified via attribute/property,
     * or optionally via `provider` argument to the `login` function.  Optionally, 
     * provider-specific login parameters can be specified via attribute (JSON)/property,
     * or via the `params` argument to the `login` function.
     * 
     * If the login is successful, the `login` event is fired, with `e.detail.user`
     * containing the authenticated user object from Firebase.
     *
     * If login fails, the `error` event is fired, with `e.detail` containing error
     * information supplied from Firebase.
     *
     * If the browswer supports `navigator.onLine` network status reporting and the
     * network is currently offline, the login attempt will be queued until the network
     * is restored.
     *
     * @method login
     * @param {string} params (optional)
     * @param {string} options (optional)
     */
    login: function(params, options) {
      if (navigator.onLine === false) {
        this.queuedLogin = {params: params, options: options};
      } else {
        params = params || (this.params && JSON.parse(this.params)) || undefined;
        options = options || (this.options && JSON.parse(this.options)) || undefined;
        switch(this.provider) {
          case 'password':
            this.ref.authWithPassword(params, this._loginHandler.bind(this), options);
            break;
          case 'anonymous':
            this.ref.authAnonymously(this._loginHandler.bind(this), params);
            break;
          case 'custom':
            this.ref.authWithCustomToken(params.token, this._loginHandler.bind(this));
            break;
          case 'facebook':
          case 'google':
          case 'github':
          case 'twitter':
            if (this.redirect) {
              this.ref.authWithOAuthRedirect(this.provider, this._loginHandler.bind(this), params);
            } else {
              this.ref.authWithOAuthPopup(this.provider, this._loginHandler.bind(this), params);
            }
            break;
          default:
            throw 'Unknown provider: ' + this.provider;
        }
      }
    },

    /**
     * Performs a logout attempt.
     * 
     * If the login is successful, the `logout` event is fired.
     *
     * If login fails, the `error` event is fired, with `e.detail` containing error
     * information supplied from Firebase.
     *
     * If the browswer supports `navigator.onLine` network status reporting and the
     * network is currently offline, the logout attempt will be queued until the network
     * is restored.
     *
     * @method logout
     */
    logout: function() {
      if (navigator.onLine === false) {
        this.queuedLogout = true;
      } else {
        this.ref.unauth();
      }
    },

    _onlineHandler: function() {
      if (this.queuedLogout) {
        this.queuedLogout = false;
        this.logout();
      } else if (this.queuedLogin) {
        this.login(this.queuedLogin.params, this.queuedLogin.options);
        this.queuedLogin = null;
      }
    },
    
    /**
     * Creates a "password provider"-based user account.
     *
     * If the operation is successful, the `user-created` event is fired.
     *
     * If the operation fails, the `error` event is fired, with `e.detail` 
     * containing error information supplied from Firebase.
     *
     * @method createUser
     * @param {string} email
     * @param {string} password
     */
    createUser: function(email, password) {
        this.ref.createUser({email: email, password: password}, function(error) {
          if (!error) {
            this.fire('user-created');
          } else {
            this.fire('error', error);
          }
        }.bind(this));
      },

    /**
     * Changes the password of a "password provider"-based user account.
     *
     * If the operation is successful, the `password-changed` event is fired.
     *
     * If the operation fails, the `error` event is fired, with `e.detail` 
     * containing error information supplied from Firebase.
     *
     * @method changePassword
     * @param {string} email
     * @param {string} oldPassword
     * @param {string} newPassword
     */
    changePassword: function(email, oldPassword, newPassword) {
      this.ref.changePassword({
        email: email,
        oldPassword: oldPassword,
        newPassword: newPassword
      }, function(error) {
        if (!error) {
          this.fire('password-changed');
        } else {
          this.fire('error', error);
        }
      }.bind(this));
    },

    /**
     * Sends a password reset email for a "password provider"-based user account.
     *
     * If the operation is successful, the `password-reset` event is fired.
     *
     * If the operation fails, the `error` event is fired, with `e.detail` 
     * containing error information supplied from Firebase.
     *
     * @method sendPasswordResetEmail
     * @param {string} email
     */
    sendPasswordResetEmail: function(email) {
      this.ref.resetPassword({email: email}, function(error) {
        if (!error) {
          this.fire('password-reset');
        } else {
          this.fire('error', error);
        }
      }.bind(this));
    },

    /**
    * Changes the email of a "password provider"-based user account.
    *
    * If the operation is successful, the `email-changed` event is fired.
    *
    * If the operation fails, the `error` event is fired, with `e.detail`
    * containing error information supplied from Firebase.
    *
    * @method changeEmail
    * @param {string} oldEmail
    * @param {string} newEmail
    * @param {string} Password
    */
    changeEmail: function(oldEmail, newEmail, password) {
      this.ref.changeEmail({
        oldEmail: oldEmail,
        newEmail: newEmail,
        password: password
      }, function(error) {
        if (!error) {
          this.fire('email-changed');
        } else {
          this.fire('error', error);
        }
      }.bind(this));
    },
    
    /**
     * Removes a "password provider"-based user account.
     *
     * If the operation is successful, the `user-removed` event is fired.
     *
     * If the operation fails, the `error` event is fired, with `e.detail` 
     * containing error information supplied from Firebase.
     *
     * @method removeUser
     * @param {string} email
     * @param {string} password
     */
    removeUser: function(email, password) {
      this.ref.removeUser({email: email, password: password}, function(error, success) {
        if (!error) {
          this.fire('user-removed');
        } else {
          this.fire('error', error);
        }
      }.bind(this));
    }

  });

</script>
</polymer-element>