Package Exports

pwa-auth
pwa-auth/npm/pwa-auth.js

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

Progressive Website Application Authentication

The library Demo

Simplicty: copy js bundle: node_modules/pwa-auth/npm/pwa-auth.js

3 HTML Custom Elements with Firebase Authentication:

user-icon
user-drawer
user-settings

This library provides Identity Access Managementy to securely store user's data.

Technological Stack

Development Environment: Node JavaScript
Backend: Google Cloud: Firebase
Predicate State Behavior: Redux
Frontend: Lit

Boilerplate

3 Tag Placements (Custom HTML Elements)
Cascading Style Sheets (CSS)
ECMA Script (JavaScript)

Features:

Register through Email and Password
Log-in
Log-out
Change Username
Change Profile Picture
Change Email
Change Password
Delete Account

Custom Elements

`<user-icon>`

Login Word Button - State
1 Photo Icon Display - State

`<user-drawer>`

Drop-down
Sign-up by Email Addresses and Password
Sign-in by Email Addresses and Password
logged-in state
logged-out state

`<user-settings>`

1 Photo Upload
Unavailable Photo
Delete Account

Website Setup:

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

<user-drawer></user-drawer>

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

<script>/* Initialize ECMA Script Properties */</script>
<style>/* CSS Custom Properties */</style>
<script src="pwa-auth.js"></script>

Google Setup

Google Analytics
Firebase Project

Firebase Setup

Authentication - email
Cloud Firestore - database
Cloud Storage

// Initialize Firebase
let connect = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxx.xxxxxxx.xxx",
    databaseURL: "https://xxxxxxx.xxxxxxx.xxx",
    projectId: "xxxxxxx",
    storageBucket: "xxxxxxx.xxxxxxx.xxx",
    messagingSenderId: "xxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxx"
};

if (lolalhost) { connect = { /* etc. */ } }

CSS Default Custom Properties

CSS Custom Property	Description	Default	Custom Element
--pwa_nav_button	Navigation	grey;	Settings
--pwa_nav_select	Navigation	black;	Settings
--pwa_input_background	Input	#E1E5EB;	Settings
--pwa_label_text_color	Input	black;	Settings
--pwa_section_header	Header	black;	Settings
--pwa_divider	Divider	grey;	Settings
--pwa_action_text_color	Button	#fff;	Settings
--pwa_action_background_color	Button	#6cc04a;	Settings
--pwa_action_border_color	Button	#60b23e;	Settings
--pwa_drawer_text_color	Input	#303030;	Drawer
--pwa_drawer_background_color	Input	#fff;	Drawer
--pwa_icon_background	Input	#6cc04a;	Icon
--pwa_icon_hover	Input	lightgrey	Icon

<!-- CSS: Custom Variables: <head> tag -->
<style>
        
  :root {
    --pwa_divider: grey;
    /* etc. */
  }

  /* Dark Theme */
  @media (prefers-color-scheme: dark) { /* etc. */ }

  /* Light Theme */
  @media (prefers-color-scheme: light) { /* etc. */ }

</style>

Feedback

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