firebase-loginbutton

Lit-Element web component description

Install

$ npm i firebase-loginbutton

Viewing Your Element

$ npm start

Running Tests

$ npm test

Build

$ npm run build

Demo

<h2>Basic firebase-loginbutton Demo</h2>
<h3>Demo</h3>

<firebase-loginbutton 
  path="/path-to-firebase" 
  api-key="YOUR-FIREBASE-API-KEY"
  domain="YOUR-FIREBASE-DOMAIN"
  messaging-sender-id="YOUR-SENDER-ID"
  app-id="YOUR-APP-ID"
  [hide-if-login]
  [show-email]
  [show-icon]
  [show-user]
  [show-photo]>
</firebase-loginbutton>

#Use

You need to subscribe to the events of the component to know when you are logged in or logged out:

document.addEventListener('firebase-signin', yourSigninFn, false); document.addEventListener('firebase-signout', yourSignoutFn, false);

And don't forget to unsubscribe to events if the component is destroyed:

document.removeEventListener('firebase-signin', yourSigninFn, false); document.removeEventListener('firebase-signout', yourSignoutFn, false);

Attributes

• api-key (String): Your firebase API-KEY
• domain (String): Your firebase DOMAIN
• messaging-sender-id (String): Your firebase MESSAGING-SENDER-ID
• app-id (String): Your firebase APP-ID
• [hide-if-login] (Boolean): Optiona. Use if you use two or more components, to hide if it is not the first.
• [show-email] (Boolean): Optional. Use if you want to show logged user email into the button
• [show-icon] (Boolean): Optional. Use if you want to show on/off icon into the button
• [show-user] (Boolean): Optional. Use if you want to show logged user display name into the button
• [show-photo] (Boolean): Optional. Use if you want to show logged user photo into the button

CSS Variables

• --btn-primary-color: default value is rgb(204, 204, 204)
• --btn-background-color: default value is rgb(255, 57, 0)
• --btn-secondary-color: default value is black
• --btn-text-user-color: default value is #FF0
• --icon-bg-color-singin: default value is #0A0
• --icon-bg-color-singout: default value is #A00

Author

manufosela

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details

Generated

generator-lit-element-base - yeoman npm package - by @manufosela