@firebase-utils/firebase-loginbutton v1.8.2
\
This webcomponent follows the open-wc recommendation.
Installation
npm i firebase-loginbutton
Usage
<script type="module">
import '@firebase-utils/firebase-loginbutton';
</script>
<firebase-loginbutton
id="myLoginButton"
api-key="MI_API_KEY_FIREBASE_PROJECT"
domain="DOMAIN_FIREBASE_PROJECT"
zone="ZONE_FIREBASE_PROJECT"
messaging-sender-id="SENDER_ID_FIREBASE_PROJECT"
app-id="APP_ID_FIREBASE_PROJECT"
show-email
show-user
show-photo
></firebase-loginbutton>
Events
Dispatching events
wc-ready, dispatched when the webcomponent is ready after first render.
"detail": { "id": "The component id", "componentName": "FIREBASE-LOGINBUTTON", "component": "The component instance", }
firebase-signin: dispatched when the user is firebase logged in
"detail": { "id": "The component id", "user": "the dataUser object", "firebaseApp": "the firebaseApp object", "firebaseStorage": "the firebaseStorage object", }
firebase-signout: dispatched when the user is firebase logged out
"detail": { "id": "The component id", }
Styling
The following custom properties and mixins are available for styling:
--firebase-loginbutton_font-size
--firebase-loginbutton_margin
--firebase-loginbutton_padding
--firebase-loginbutton_btn-photo-size-container
--firebase-loginbutton_btn-photo-size
--firebase-loginbutton_btn-background-color
--firebase-loginbutton_btn-primary-color
--firebase-loginbutton_btn-terciary-color
--firebase-loginbutton_btn-text-color
--firebase-loginbutton_icon-bg-color-singin
--firebase-loginbutton_icon-bg-color-singout
--firebase-loginbutton_mobile-icon-color__logged
--firebase-loginbutton_mobile-icon-bg-color__logged
--firebase-loginbutton_mobile-icon-color__not-logged
--firebase-loginbutton_mobile-icon-bg-color__not-logged
--firebase-loginbutton_mobile-button-height
--firebase-loginbutton_border-logged
--firebase-loginbutton_border-boxshadow-logged
Linting and formatting
To scan the project for linting and formatting errors, run
npm run lint
To automatically fix linting and formatting errors, run
npm run format
Testing with Web Test Runner
To execute a single test run:
npm run test
To run the tests in interactive watch mode run:
npm run test:watch
Demoing with Storybook
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build
Tooling configs
For most of the tools, the configuration is in the package.json
to minimize the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
Local Demo with web-dev-server
npm start
To run a local development server that serves the basic demo located in demo/index.html
6 months ago
9 months ago
6 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago