Accounts and user collections with “firebase” (Redundant)

This is going to be more of an article and a proof of concept, rather than a ready made implementation. Some hours and slightly less than a 1000 lines of code later, I implemented custom, fully customizable and extendable user accounts, and the ability to save liked images and display them in your own, personal gallery. These collections are stored, along with the password and the unique user identifier on the server and are infinitely retrievable, unlike javascript’s session, or local storage. I achieved this by implementing Firebase. Firebase is a cloud service which allows secure storage of data and secure authentication for apps and web content. It has other features too, but I am only using authentication and storage. The way this works is - After a bit of setup on the Firebase portal side, I import special Firebase commands into my scripts, and use them to handle user requests, such as submission of custom made forms, and the liking of images. I store and retrieve data from the servers to update front end statuses and display the right content. Currently you can create an account by clicking the horned icon in the main menu and then like and unlike any images in my art section by clicking the little heart in the right bottom corner of each image. This information is directly synced with the servers. Subsequently you can view these images in your own gallery, ominously dubbed the “judgment den”. I plan to implement wish lists for my shop next. Below you will find excerpts of code from my login authentication form, that illustrates my workflow. These excerpts are not useful for copy and pasting. Unfortunately there is too much customized code to make this entry into a ready made solution for others, but I might do an in-depths piece about Firebase later, as it was very doable to implement, with zero prior knowledge of how any databases work. The code below illustrates well the structure of implementing Firebase in your scripts, I hope that at least that will be useful to you.

HTML:

<div id="loginContainer" class="formContainer">
<form id="login-form">
<div id="loginFieldsContainer" class="formFieldsContainer">
<div class="formFieldWrapper">
<div class="nameDescription description">
<p>E-mail:</p>
</div>
<input type="email" id="login-email" class="formfield emailField" placeholder="E-mail" required>
</div>
<div class="formFieldWrapper">
<div class="nameDescription description">
<p>Password:</p>
</div>
<input type="password" id="login-password" class="formfield passwordField" placeholder="Password" required>
</div>
</div>
<div id="loginButtonContainer" class="buttonContainer sqs-block-button-container">
<button type="submit" class="formButton sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">Log in</button>
</div>
<div id="login-error-message" class="error-message"></div>
</form>
</div>

JAVASCRIPT:

// Initialize Firebase
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js';
//here you import the commands which you will be using in your script
import { getAuth, onAuthStateChanged, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-auth.js';
const firebaseConfig = {
  
//personal information below has been sanitized
apiKey: "------",
authDomain: "-----",
projectId: "-----------",
storageBucket: "-----------",
messagingSenderId: "---------------",
appId: "--------------------",
measurementId: "--------------"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

//the usual code follows
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginContainer');
const subString = 'login';
const getURL = window.location.href;
if (getURL.includes(subString)) {
// Check if the user is already logged in
onAuthStateChanged(auth, (user) => { //notice first use of firebase command
if (user) {
window.location.href = '/usergallery';
} else {
//embed the form
const formSection = document.querySelector('[data-section-id="66b9e5ec1538141a71419ab3"]');
const formSectionContent = formSection.querySelector('.content');
formSectionContent.appendChild(loginForm);
// Handle form submission
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// User signed in successfully
window.location.href = '/usergallery'; // Redirect to a logged-in page
})
.catch((error) => {
// Handle errors
let errorMessage = 'An error occurred. Please try again.';
if (error.code === 'auth/wrong-password') {
errorMessage = 'Incorrect password.';
} else if (error.code === 'auth/user-not-found') {
errorMessage = 'No user found with this e-mail.';
} else if (error.code === 'auth/invalid-email') {
errorMessage = 'The e-mail address is not valid.';
}
document.getElementById('login-error-message').textContent = errorMessage;
});
});
}
});
} else {
loginForm.remove();
}
});

CSS:

.formContainer {
 display:flex;
 flex-wrap: wrap;
 justify-content:center;
 width: 100%;
  height: auto;
 margin: 0;
 padding: 0;
 top: 40px;
 position: absolute;
}
.formFieldsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.formFieldWrapper p {
  text-align: left;
  padding: 0;
  padding-left: 10px;
  margin: 0;
}
.formfield {
  margin: 0;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  min-width: 350px;
  height: 30px;
  border: 0;
  border-bottom: 2px;
  background: transparent;
}
.formButton {
  width: 100%;
  text-align: right;
  letter-spacing: 4px !important;
}
@media screen and (max-width:790px) {
.formButton {
  width: 88%;
  } 
}
.error-message {
  text-align: center;
  padding: 20px;
  letter-spacing: 1.6px;
}