oupsla / login-fire

An element that allows simple configuration of multiple provider login for firebase

Login-Fire

Simple way to add authentication to your app using firebase.

---

Install

bower install login-fire --save

<login-fire>

Add email and password authentication as well as social provider authentication to your app. If you want to only add social authentication or only email authentication please use <social-login-fire> or <email-login-fire> instead until issue 27 is closed.

<link rel="import" href="/bower_components/login-fire/login-fire.html">

<firebase-app
  name="login"
  api-key="AIzaSyAhoCXxkY-ffNwA_7L7HIwBVpASYj1btNE"
  auth-domain="convoo-login-demo.firebaseapp.com"
  database-url="https://convoo-login-demo.firebaseio.com">
</firebase-app>
<login-fire email-password anonymous twitter github google facebook app-name="login" user="{{user}}" signed-in="{{signedIn}}"></login-fire>

<social-login-fire>

Add social provider authentication to your app with firebase.

<link rel="import" href="/bower_components/login-fire/social-login-fire.html">

<firebase-app
  name="social"
  api-key="AIzaSyAhoCXxkY-ffNwA_7L7HIwBVpASYj1btNE"
  auth-domain="convoo-login-demo.firebaseapp.com"
  database-url="https://convoo-login-demo.firebaseio.com">
</firebase-app>
<social-login-fire google facebook twitter github anonymous app-name="social" user="{{user}}" signed-in="{{signedIn}}"></social-login-fire>

<email-login-fire>

Add email authentication to your app with firebase.

<link rel="import" href="/bower_components/login-fire/email-login-fire.html">

<firebase-app
  name="email"
  api-key="AIzaSyAhoCXxkY-ffNwA_7L7HIwBVpASYj1btNE"
  auth-domain="convoo-login-demo.firebaseapp.com"
  database-url="https://convoo-login-demo.firebaseio.com">
</firebase-app>
<email-login-fire app-name="email" user="{{user}}" signed-in="{{signedIn}}"></email-login-fire>

Signing Out

To sign out, access the login-fire element and call its signOut function. Example:

<a on-tap="_signOut">Sign Out</a>

_signOut: function(e){
  this.$$('login-fire').signOut();
  // or
  // this.$$('social-login-fire').signOut();
  // or
  // this.$$('email-login-fire').signOut();
}

Debugging

To make it easier to debug, we've added the debug attribute. Simply add "debug" to the element to see more details about its variables' values. Example:

<email-login-fire debug app-name="email" user="{{user}}" signed-in="{{signedIn}}"></email-login-fire>

Note: login-fire is not associated with firebase. polymerfire components are used with login-fire.

Contributing

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.

Viewing Your Application

$ polymer serve

Building Your Application

$ polymer build

This will create a build/ folder with bundled/ and unbundled/ sub-folders containing a bundled (Vulcanized) and unbundled builds, both run through HTML, CSS, and JS optimizers.

You can serve the built versions by giving polymer serve a folder to serve from:

$ polymer serve build/bundled

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Browser Testing

Thanks to the support of BrowserStack we can do real cross browser testing on multiple desktop and mobile platforms.