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:
- Google
- Analytics
- Firebase Authentication
- Email Login
- Firebase Cloud Storage
- Storage Bucket
- Register through Email and Password
- Log-in
- Log-out
- Change Username
- Change Email
- Change Password
- Upload Profile Picture
- Delete Account
// ES - import Modules
import './pwa-auth';
// Optional - copy CoreJS files
'npm/pwa-auth/source/**/*'- 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:
- Development (Server-side) Environment: Node JavaScript
- Backend: Google Cloud: Firebase
- Predicate State Behavior: Redux
- Frontend (Client-side): Lit
- Development
- Redux State Connection
- Global Functions
- Optional
- Custom Properties
- 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
<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
<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>
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.
<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>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:<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><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>All feedback, comments, bugs, and requests are welcome.