Login-Fire

Overview & Demo

The following elements are available:

• <login-fire-button> for single provider authentication
• <login-fire-social> for multiple provider authentication
• <login-fire-form> for email and password authentication
• <login-fire> for all of the above.

The goal of the <login-fire> elements is to provide a simple to setup, elegant UI for authentication using Firebase Auth.

Our demo is available on webcomponents.org.

Note: login-fire is not associated with Firebase. This collection of components is based on polymerfire.

Install

bower install login-fire --save

<login-fire>

Add authentication with email and password as well as federated identity providers (Google, Facebook, Twitter, GitHub, Anonymous) to your app.

<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
  app-name="login"
  providers="google, facebook, twitter, github, anonymous" 
  user="{{user}}"
  signed-in="{{signedIn}}">
</login-fire>

<login-fire-social>

Add multiple federated identity providers authentication to your app with Firebase Auth API.

<link rel="import" href="/bower_components/login-fire/login-fire-social.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>

<login-fire-social
  app-name="social"
  providers="google, facebook, twitter, github, anonymous" 
  user="{{user}}"
  signed-in="{{signedIn}}">
</login-fire-social>

<login-fire-form>

Add email-password authentication to your app with Firebase Auth API.

<link rel="import" href="/bower_components/login-fire/login-fire-form.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>

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

<login-fire-button>

A button for a single federated identity provider (Google, Facebook, Twitter, GitHub, Anonymous) that allows users to sign-in to and sign-out from your app using Firebase Auth API.

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

<firebase-app
  name="button"
  api-key="AIzaSyAhoCXxkY-ffNwA_7L7HIwBVpASYj1btNE"
  auth-domain="convoo-login-demo.firebaseapp.com"
  database-url="https://convoo-login-demo.firebaseio.com">
</firebase-app>

<login-fire-button app-name="button" provider="google" user="{{user}}"></login-fire-button>
<login-fire-button app-name="button" provider="facebook" user="{{user}}"></login-fire-button>
<login-fire-button app-name="button" user="{{user}}"></login-fire-button>

Signing Out

To sign out, access a login-fire element and call its signOut function.

Example:

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

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

Debugging

To make it easier to debug, we've added the debug attribute. Set the "debug" attribute of the element to true to see more details about its variables' values.

Example:

<login-fire-form app-name="email" debug></login-fire-form>

Styling

Style the buttons with CSS as you would a normal DOM element. A few custom properties and mixins are available. The detailed lists are on each element's documentation page.

Contributing

Install Development Dependencies

First, make sure you have NPM installed (locally or globally).

npm install && polymer install

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.

Workflow

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git cz (please follow this commit guide)
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request. :D

License

MIT

Credits

Logo: Fingerprint by Gregor Cresnar from the Noun Project

Browser Testing

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