I have been developing a basic chat application that enables users to send messages in a group chat and see them instantly updated. To achieve this, I opted for Firebase and spent time familiarizing myself with its web API. However, I encountered difficulties when attempting to manually create a user authentication system or retrieve a list of values for another function.
My approach involves following an MVC pattern, where HTML forms trigger event handlers in global.js, which then call corresponding methods in the controller file, leading to actions in the DAL. The DAL interacts with remote Firebase to perform the requested tasks.
The issue arises after the once event handler is triggered. Although the controller executes the checkUserLogin() method, the variable loginValid does not get assigned anything. It seems that the execution reaches the end of the event handler but abruptly discontinues. I have read about asynchronous JS, but my understanding is limited.
My goal is simple: fetch a list from Firebase, validate it, pass the result from the DAL to the controller, and operate on the outcome within the controller. Real-time updates are not necessary as I occasionally require a current snapshot of data from the Firebase list to carry out other functions.
Below is the relevant file structure. global.js manages event handlers for HTML page events and selects the appropriate controller action (security_controller.js) which triggers the necessary DAL action (security_dal.js).
global.js
$(document).ready(function() {
$("#btnSubmitLogin").on("click", btnSubmitLogin_click);
});
function btnSubmitLogin_click() {
doUserLogin();
}
security_controller.js
function doUserLogin() {
var username = $("#txtLoginUsername").val();
var password = $("#txtLoginPassword").val();
//Check if user is logged in and react accordingly
var loginValid = checkUserLogin(username, password);
if (loginValid) {
navigateToPage("pageHome");
$("#successMessageLogin").text("Success validating user");
}
else {
navigateToPage("pageLogin");
$("#errorMessageLogin").text("Error validating user");
}
}
security_dal.js
function checkUserLogin(username, password) {
var foundUser = null;
var loginValid = false;
fb_ref.once("value", function(snapshot) {
var list = snapshot.val();
for (var i in list) {
if (list[i].username === username && list[i].password === password) {
foundUser = list[i];
break;
}
}
return loginValid;
});
if (foundUser !== null) {
console.info(foundUser.username);
console.info(foundUser.password);
loginValid = true;
}
return loginValid;
}
I searched for similar queries but could not find a solution. In one question/answer thread linked below, the response mentioned asynchronous JavaScript and resolved the issue by placing the code that needs to execute after retrieving values inside the callback function. Nonetheless, this contradicts my aim of adhering to the "MVC pattern." The DAL should not directly interact with the view but rather relay returned values back to the controller.
Firebase Query Inside Function Returns Null
This is the methodology I intend to follow:
global.jsinvokesbtnSubmitLogin_click()btnSubmitLogin_click()callsdoUserLoginin the controllerdoUserLoginin the controller invokescheckUserLoginin the DALcheckUserLoginin the DAL retrieves a list of users from Firebase and checks for credentials matchcheckUserLoginin the DAL returns true/false to the controller and assigns it to the variableloginValid- The controller decides how to handle this information, updating the view as necessary
Note: While aware of Firebase's built-in authentication, I am creating a simplified version for learning purposes. Thus, I only require a data array/list for manipulation in the controller. Despite filtering/sorting capabilities, I prefer checking users using this method to understand how to retrieve a list.
If there are alternative approaches or corrections to be made due to my novice knowledge of Firebase, please advise. Thank you!