pwa-auth

v3.3.10

Published

a month ago

pwa-auth is a collection of four HTML webomponents for User Management to display a login button with icon picture state once logged in. Sign up and login within a drawer and optionally a static for a page. Being able to log out, change account details, a

0High
0Medium
0Low

solutionbox

Progressive Website Application - Authentication

Jack's Publishing maintains Website Authentication Components where developers can focus on their User interface, rather than low-level API calls. Visit the Live Demo.

pwa-auth.js is a bundle of 5 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.

Quickly sign-up, log-in, log-out, modify, or delete your firebase account.

Place 5 Custom HTML Tags, reference CSS, and Initialize a Firebase Instance. By either Standard or Modular ECMA Script.

Continue reading to understand how to install this project:

Prerequisites

Google
- Analytics
Firebase Authentication
- Email Login
Firebase Cloud Storage
- Storage Bucket

Outline

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

Library

// ES - import Modules
import './pwa-auth';

// Optional - copy CoreJS files
'npm/pwa-auth/source/**/*'

Technical Summary

Type Strong with TypeScript
Stylable with CSS Custom Properties
State Management with ReduxJS
Authentication with Google's Firebase
Firebase Initialization Object: window.process = { env: { FIREBASE_CONFIG:

Atomic Engineering

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

Enrichment

Development
- Redux State Connection
- Global Functions
Optional
- Custom Properties

Website Components

Button
- <user-icon>
  - Email Log-in
  - Email Subscribe
  - Icon
Drop-down Drawer
- <user-drawer>
  - Email Log-in
  - Email Subscribe
  - Menu with Log-out
  - Logged-in Menu Content <slot>'s
    - name: before
    - name: within
Pages
- <user-settings>
  - Account Settings Page
- <user-login>
  - Email Log-in Page
  - Email Subscribe Page
  - Logged-in Page Content <slot>'s
    - name: content
- <email-reset>
  - Password Reset Page

Observer Patterns

<user-icon>
- property: subscribe: (Initial State): Subscribe
- property: subscribe: else (Initial State): Login
- property: empty: location of empty image
<user-drawer>
- feature: Top-down drawer: 1.4 seconds
- property: url: location of <pwa-settings> Tag
- property: subscribe: (Initial State): Subscribe
- property: subscribe: else (Initial State): Login
<user-login>
- feature: regular visible page component
<user-settings>
- 1 Photo Upload Feature, view uploaded bucket of photos, photo ediotr
- empty property: location of empty image
- Unavailable Photo
- Update Username
- Update Email / Verify
- Update Password
- Delete Account, Photos, Information

Logical States

<user-icon>
- Logged-out: txt: Login Button
- Logged-out: txt: Subscribe Button
- Logged-in, photo: Icon Button
<user-drawer>
- logged-out: Sign-up by Email Addresses and Password
- logged-out: Sign-in by Email Addresses and Password
- logged-in: Settings Page Link, Log-out Button
<user-login>
- logged-out: Sign-up by Email Addresses and Password
- logged-out: Sign-in by Email Addresses and Password
- logged-in, content: <slot></slot>

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.

Boilerplate

<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>

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

  <!-- Optional: Custom CSS Properties -->
  <style>

    /* <user-icon> */
    :root {
    --pwa_icon_background_color:        #6cc04a;
    --pwa_icon_radius:                  6px;
    --pwa_icon_border:                  2px solid black;
    --pwa_icon_padding:                 0px 16px;
    --pwa_icon_hover_color:             lightgrey;
    --pwa_icon_font:                    'Arial', sans-serif;
    --pwa_icon_height:                  32px; /* state: Logged-out (sync) */
    --pwa_icon_diameter:                32px; /* state: Logged-in (sync) */
    }

    /* <user-drawer> */
    :root {
    --pwa_drawer_background_color:      #fff;
    --pwa_drawer_border-radius:         0px;
    --pwa_drawer_border:                3px #303030 solid;
    --pwa_drawer_z-index:               2;
    --pwa_drawer_text_color:            #303030;
    --pwa_drawer_position:              fixed;
    }

    /* <user-settings> */
    :root {
    --pwa_settings_background_color:    grey;

    --pwa_nav_button_color:             grey;
    --pwa_nav_highlight_color:          black;

    --pwa_divider_color:                grey;
    --pwa_header_color:                 black;

    --pwa_input_background_color:       #E1E5EB;

    --pwa_label_text_color:             black;

    --pwa_button_text_color:            #fff;
    --pwa_button_background_color:      #6cc04a;
    --pwa_button_border_color:          #60b23e;
    }

    /* shared core elements */
    :root {
    --section_background_color:         white;
    }
    
  </style>

</head>

Project Type: ECMA Script Modules

Eports: classes and objects

// Custom HTML Element Classes
import 'pwa-auth';
`<user-icon></user-icon>`             // subscribe  |  empty= "./images/empty.jpg"
`<user-drawer></user-drawer>`         // subscribe  |  url=   "./settings"
`<user-settings></user-settings>`     //               empty= "./images/empty.jpg"
`<user-login></user-login>`           // subscribe  | 

// Firebase Objects
import { db, storage, auth, user } from 'pwa-auth';
// db           - firestore database reference
// storage      - firebase storage reference
// auth         - user object reference
// user         - active user boolean reference

// Firebase-Redux States
import { store } from 'pwa-auth';
// store.verified
// store.userId
// store.name
// store.email
// store.photoURL

export { logOut, logAccount, logAccountDelete, deleteDocument } from "pwa-auth";
// logOut()             - Firebase Authentication: log user out
// logAccount()         - Google Analytics Signal: logEvent(analytics, 'create_account');
// logAccountDelete()   - Firebase Authentication: delete account
// deleteDocument()     - Firebase Storage and Firestore:

Drawer Implementation

<body>

  <header>
    <user-icon subscribe empty="./images/empty.jpg"></user-icon>
  </header>

  <user-drawer subscribe url="./settings">
    <div slot="before / within">
      <a>Link Name</a>
    </div>
  </user-drawer>

  <main>
    <user-settings empty="./images/empty.jpg"></user-settings>
  </main>

</body>

Page Implementation

<body>

  <header>
    <user-icon empty="./images/empty.jpg" subscribe ></user-icon>
  </header>

  <main>

    <user-login subscribe>
      <div slot="content">
        <p>Page Content</p>
      </div>
    </user-login>

    <user-settings empty="./images/empty.jpg"></user-settings>

  </main>

</body>

Feedback

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