Application Authentication
To provide a personalized experience, Apps need to know the identity of a user to securely store data in the cloud. pwa-auth is powered by The Firebase Authentication backend, consistently providing a centralized and predictable state behaviour with Redux, and declaratively render the DOM with Google Polymer's fast and light Lit-Element. This Component includes 3 HTML Tags, and 1 Boilerplate Function to display the user icon, sign up, login, log out, change account details, and delete the user's account.
PWA-AUTH includes Firebase's Cloud Firestore, Cloud Storage, and User Management that require Firebase setup to use this component.
<user-icon> |
<user-drawer> |
<user-settings> |
---|---|---|
1 photo | Drop-down | Profile |
fetch social login photo | One click Google Login | |
Upload / Change Profile Photo | Email Addresses and Passwords | Password |
logged in Photo | Email Login | |
logged out Photo | ||
unavailable Photo |
Pollyfills
Google & Firebase setup
- Add Google Analytics
- Setup Firebase Project
- Initialize Firebase Authentication - email, anonymous, google
- Initialize Firestore Database
<!-- FIREBASE -->
// Initialize Firebaseconst admin = apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" authDomain: "xxxxxxx.firebaseapp.com" databaseURL: "https://xxxxxxx.firebaseio.com" projectId: "xxxxxxx" storageBucket: "xxxxxxx.appspot.com" messagingSenderId: "xxxxxxxxxxx";// REFERENCE TO SERVICES - Globalconst application = firebase;const firestore = application;const storage = firebase;const storageRef = storage;
Website Setup:
;; { ; }
Properties (in Development)
Property | Description | Default |
---|---|---|
--drawer-position: | Static or Still during scrolling fixed / absolute | fixed |
--drawer-background-color: | change background | #fff |
--drawer-border: | border thinckness | 3px |
Command Line Interface Tools
- polymer-cli
- firebase-tools
Please send Feedback
All feedback, comments, bugs, and requests are welcome.