Progressive Website Application - Authentication

Jack's Publishing maintains Custom HTML Elements where developers can focus on UX rather than low-level API calls.

pwa-auth.js is a bundle of 3 Custom HTML Elements for Firebase (IAM) Authenication using email and password, with the ability to change username, icon, email, password, or delete your own account and it's content all together.

pwa-auth.js (Authentication Webcomponents) are for anyone who is looking for a quick and simple way to sign-up, log-in, log-out, modify, or delete a firebase account information from thier own personal domain.

pwa-auth.js meets basic user needs with the interplay of:

Icon Button
Drop-down Drawer
Settings Page

You will learn how to place 3 Custom HTML Tags, reference CSS, and How to Initialize an Firebase Instance. By either Standard or Modular ECMA Script.

Continue reading to understand how to install the project:

Choose Project Type

ECMA Script Modules

import 'pwa-auth';
import { db, storage, auth, user } from 'pwa-auth/auth-helpers';

Global Scope Management

<!-- Optional: Copy the Project Files from 'src' Folder -->
<script type="module" src="./pwa-auth.js"></script>
<script type="module" src="./pwa-helpers.js"></script>

Library

3 Tag Placement
Color Scheme: CSS Custom Properties
Firebase Initialization Object

Features

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

Modules

db - firestore database reference
- getFirestore(pwa-env)
storage - firebase storage reference
- getStorage(pwa-env)
auth - user object reference
- getAuth(pwa-env)
user - active user boolean reference
- auth.currentUser

HTML Webcomponents

user-icon
user-drawer
user-settings

CSS

Custom Properties

Prerequisites

Google:
- Google Analytics
- Firebase Project
Firebase:
- Authentication - email login
- Cloud Storage - storage bucket

Boilerplate

For simple projects, you can copy to disk

src/compiled/
- pwa-auth.js
- pwa-styles.css
- empty.jpg

ECMA Script Modules

<head>

  <!-- Optional - CSS Custom Variables-->
  <link type="stylesheet" href="./path_to/pwa-styles.css">

  <!-- Required - Configure Firebase Instance -->
  <script>
    window.process = { env: { FIREBASE_CONFIG: JSON.stringify({
            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) { window.process = { env: { FIREBASE_CONFIG: 'etc.' } } }
  </script>

  <!--  Webcomponent Library -->
  <script type="module" src="./path_to/pwa-auth.js"></script>

</head>

Boilerplate

TypeScript Library for Bundlers

import 'pwa-auth';
// <user-icon subscribe emptyArtwork="./images/empty.jpg"></user-icon>
// <user-drawer subscribe settingsURL="./settings"></user-drawer>
// <user-settings emptyArtwork="./images/empty.jpg"></user-settings>
import { db, storage, auth, user } from 'pwa-auth/auth-helpers';
// db           - firestore database reference
// storage      - firebase storage reference
// auth         - user object reference
// user         - active user boolean reference

Implementation

<body>

  <header>
    <!-- subscribe property: (Initial State): Subscribe -->
    <!-- subscribe property: else (Initial State): Login -->
    <!-- Logged-out (State): txt: Login Button -->
    <!-- Logged-out (State): txt: Subscribe Button -->
    <!-- Logged-in (State): photo: Icon Button -->
    <!-- emptyArtwork property: location of empty image -->
    <user-icon subscribe emptyArtwork="./images/empty.jpg"></user-icon>
  </header>

  <!-- settingsURL property: location of <pwa-settings> Tag -->
  <!-- subscribe property: (Initial State): Subscribe -->
  <!-- subscribe property: else (Initial State): Login -->
  <!-- Top-down, Drop-down Feature: height, 1.4 seconds -->
  <!-- logged-out (State): Sign-up by Email Addresses and Password -->
  <!-- logged-out (State): Sign-in by Email Addresses and Password -->
  <!-- logged-in (State): Settings Page Link, Log-out Button -->
  <user-drawer subscribe settingsURL="./settings"></user-drawer>

  <main>
    <!-- 1 Photo Upload Feature, view uploaded bucket of photos, photo ediotr -->
    <!-- Unavailable Photo --> 
    <!-- Update Username -->
    <!-- Update Email / Verify -->
    <!-- Update Password -->
    <!-- Delete Account, Photos, Information -->
    <!-- emptyArtwork property: location of empty image -->
    <user-settings emptyArtwork="./images/empty.jpg"></user-settings>
  </main>

</body>

CSS Custom Properties

Custom Namespace	Description	Default	Custom Element
--pwa_icon_background	Button	#6cc04a;	user-icon
--pwa_icon_hover	Button	lightgrey	user-icon
--pwa_icon_border	Button	2px solid black	user-icon
--pwa_icon_height (sync)	Login State	32px	user-icon
--pwa_icon_padding	Login State	0px 16px	user-icon
--pwa_icon_radius	Login State	6px	user-icon
--pwa_icon_font	Login State	'Arial', sans-serif	user-icon
--pwa_icon_diameter (sync)	Icon State	32px	user-icon
--pwa_drawer_border	Drawer	3px #303030 solid	user-drawer
--pwa_drawer_z-index	Drawer	2	user-drawer
--pwa_drawer_border-radius	Drawer	20px	user-drawer
--pwa_drawer_text_color	Input txt	#303030	user-drawer
--pwa_drawer_background_color	Input txt	#fff	user-drawer
--pwa_settings_background	Navigation	grey	user-settings
--pwa_nav_button	Navigation	grey	user-settings
--pwa_nav_select	Navigation	black	user-settings
--pwa_divider	Divider	grey	user-settings
--pwa_input_background	Input	#E1E5EB	user-settings
--pwa_label_text_color	Input	black	user-settings
--pwa_section_header	Header	black	user-settings
--pwa_action_text_color	Button	#fff	user-settings
--pwa_action_background_color	Button	#6cc04a	user-settings
--pwa_action_border_color	Button	#60b23e	user-settings

Global Namespaced Firebase Instance Configuration

pwa-auth.js is built upon the Firebase SDK (Software Development Kit). The entire bundle is one instance of firebase that takes in the configuration information, internally.

If you are looking for a Namespaced Firebase Configuration, please send it as feedback, and will make that version for you.

Technological Engineering

Development (Server-side) Environment: Node JavaScript
Backend: Google Cloud: Firebase
Predicate State Behavior: Redux
Frontend (Client-side): Lit

Feedback

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