Package Exports

pwa-auth

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pwa-auth) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Application Authentication

workflow Demo

User Management Component with 3 HTML Tags, and 1 Boilerplate Function to display user icon, sign up, sign in, log out, change account details, delete account.

PWA-AUTH includes Firebase's Cloud Firestore, Cloud Storage, and User Management that require Firebase setup to use this component.

Pollyfills

<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" async ></script>

`<user-icon>`	`<user-drawer>`	`<user-settings>`
1 photo	Drop-down	Profile
fetch social login photo	One click Google Login	Email
Upload / Change Profile Photo	Email Addresses and Passwords	Password
logged in Photo	Email Login
logged out Photo
unavailable Photo

Google & Firebase setup

Add Google Analytics
Setup Firebase Project
Initialize Firebase Authentication - email, anonymous, google
Initialize Firestore Database

// Initialize Firebase
const admin = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxx.firebaseio.com",
    projectId: "xxxxxxx",
    storageBucket: "xxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxx"
};
// REFERENCE TO SERVICES - Global
const application           = firebase.initializeApp(admin);
const firestore             = application.firestore();
const storage               = firebase.storage();
const storageRef            = storage.ref();

Website Setup:

import 'pwa-auth';
import { runFirebase } from 'pwa-auth/src/user-functions';
constructor() { runFirebase(); }

<header>
    <user-icon></user-icon>
</header>

<user-drawer></user-drawer>

<main>
    <user-settings></user-settings>
</main>

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
Jack's Publishing
contractor's centre

Please send Feedback

All feedback, comments, bugs, and requests are welcome.