https://github.com/convoo/login-fire
An element that allows simple configuration of multiple provider login for firebase
https://github.com/convoo/login-fire
authentication firebase polymer webcomponents
Last synced: 10 months ago
JSON representation
An element that allows simple configuration of multiple provider login for firebase
- Host: GitHub
- URL: https://github.com/convoo/login-fire
- Owner: convoo
- License: mit
- Created: 2016-06-11T15:51:56.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T07:04:43.000Z (almost 3 years ago)
- Last Synced: 2024-10-04T03:18:54.421Z (over 1 year ago)
- Topics: authentication, firebase, polymer, webcomponents
- Language: HTML
- Homepage: https://webcomponents.org/element/convoo/login-fire
- Size: 3.6 MB
- Stars: 59
- Watchers: 7
- Forks: 19
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Login-Fire
Simple way to add authentication to your app using [Firebase Auth](https://firebase.google.com/docs/auth/).
[](https://travis-ci.org/convoo/login-fire)
[](https://beta.webcomponents.org/element/convoo/login-fire)
[](https://gitter.im/convoo/login-fire)
[](http://commitizen.github.io/cz-cli/)
---
## Overview & Demo
The following elements are available:
* `` for single provider authentication
* `` for multiple provider authentication
* `` for email and password authentication
* `` for all of the above.
The goal of the \ elements is to provide a simple to setup, elegant UI for authentication using [Firebase Auth](https://firebase.google.com/docs/auth/).
Our demo is available on [webcomponents.org](https://www.webcomponents.org/element/convoo/login-fire/demo/demo/index.html).
Note: login-fire is **not** associated with [Firebase](https://firebase.google.com/). This collection of components is based on [polymerfire](https://github.com/firebase/polymerfire).
## Install
```ssh
bower install login-fire --save
```
## \
Add authentication with email and password as well as federated identity providers (Google, Facebook, Twitter, GitHub, Anonymous) to your app.
```html
```
```html
```
## \
Add multiple federated identity providers authentication to your app with [Firebase Auth API](https://firebase.google.com/docs/auth/).
```html
```
```html
```
## \
Add email-password authentication to your app with [Firebase Auth API](https://firebase.google.com/docs/auth/).
```html
```
```html
```
## \
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](https://firebase.google.com/docs/auth/).
```html
```
```html
```
## Signing Out
To sign out, access a `login-fire` element and call its `signOut` function.
Example:
```html
Sign Out
```
```javascript
_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:
```html
```
### 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](https://www.npmjs.com/) installed (locally or globally).
```ssh
npm install && polymer install
```
### Viewing Your Application
```ssh
polymer serve
```
### Building Your Application
```ssh
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:
```ssh
polymer serve build/bundled
```
### Running Tests
```ssh
polymer test
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/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](https://conventionalcommits.org/))
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request. :D
## License
[MIT](https://github.com/convoo/login-fire/blob/master/LICENSE)
## Credits
Logo: Fingerprint by Gregor Cresnar from the Noun Project
### Browser Testing
[](http://browserstack.com/)
Thanks to the support of [BrowserStack](http://browserstack.com/) we can do real cross browser testing on multiple desktop and mobile platforms.