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 run 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

Optional but highly encouraged: 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.