Read Data on the Web | Firebase Realtime Database

Wadie Mendja July 04, 2020
Let's imagine that we have a web page like the one below and we want to retrieve the necessary data to check if the username and password are correct.

login validation

Let's take a look at the code:

HTML:

<!doctype html>
<html lang="en">
<head>
<title>Log In</title>
<meta charset="utf-8">
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="Wadie Mendja">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase-app.js"></script>
<script src='https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<div id="panel">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.468 12.37C12.758 11.226 11.195 10 8 10s-4.757 1.225-5.468 2.37A6.987 6.987 0 0 0 8 15a6.987 6.987 0 0 0 5.468-2.63z"/>
<path fill-rule="evenodd" d="M8 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
<path fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
</svg>
<h2>Login</h2>
<label for="usename">Username</label>
<input type="text" id="username">
<label for="password">Password</label>
<input type="password" id="pass">
<button id="login" class="btn btn-secondary btn-lg btn-block">Login</button>
</div>
</center>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

CSS:

#panel{
border: solid #6c757d 3px;
border-radius: 3px;
margin-top: 50px;
display: inline-block;
padding: 20px;
width: 30%;
}
#panel * {display: block; padding: 2px;}
#panel h2{color: #6c757d;}
#panel button{
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 5px;
}
#panel input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
color: #6c757d;
}
#panel label{float: left;}
#panel svg{width: 20%;height: 20%;color: #6c757d;}
view raw style.css hosted with ❤ by GitHub

Here is the most important part, if we want to be able to validate the username and password we first need to get (retrieve) those two from our database.

Here is the structure of the data that we have:

Firebase data structure

Read Data:

Now let us try and read the data located on the node "login".

 Don't forget to replace my Firebase configuration with yours.
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyD6rdr3LaXyMTcmP_M2cmqQhwO2JOZEuyc",
authDomain: "test-dae29.firebaseapp.com",
databaseURL: "https://test-dae29.firebaseio.com",
projectId: "test-dae29",
storageBucket: "test-dae29.appspot.com",
messagingSenderId: "195245932266",
appId: "1:195245932266:web:e90f2d7214384be9436193"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var firebaseRef = firebase.database().ref().child('login');
firebaseRef.once("value").then(function(snapshot){
var loginInfo=snapshot.val();
document.getElementById("login").addEventListener("click",function(){
var username = document.getElementById("username");
var password = document.getElementById("pass");
if (username.value==loginInfo.username && password.value==loginInfo.password)
location.replace("/home.html");
});
});
view raw read.js hosted with ❤ by GitHub

To read data at a path and listen for changes, use the on() or once() methods of firebase.database.ref to observe events.

You can use the value event to read a static snapshot of the contents at a given path.

In some cases you may want a snapshot of your data without listening for changes, such as when initializing a UI element that you don't expect to change. You can use the once() method to simplify this scenario: it triggers once and then does not trigger again.

Additional code (UI validation):

This additional code has nothing to do with the server side, it's just a final touche for our simple project.

we're going to add some simple UI effects when the username or the password were wrong like a red border as it shown below:

login validation

// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyD6rdr3LaXyMTcmP_M2cmqQhwO2JOZEuyc",
authDomain: "test-dae29.firebaseapp.com",
databaseURL: "https://test-dae29.firebaseio.com",
projectId: "test-dae29",
storageBucket: "test-dae29.appspot.com",
messagingSenderId: "195245932266",
appId: "1:195245932266:web:e90f2d7214384be9436193"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var firebaseRef = firebase.database().ref().child('login');
firebaseRef.once("value").then(function(snapshot){
var loginInfo=snapshot.val();
document.getElementById("login").addEventListener("click",function(){
var username = document.getElementById("username");
var password = document.getElementById("pass");
if (username.value==loginInfo.username && password.value==loginInfo.password){
location.replace("retrieve-data-firebase/home.html");
}else if(username.value!=loginInfo.username){
username.style.borderColor="red";
}else if(password.value!=loginInfo.password){
password.style.borderColor="red";
}
});
});
document.getElementById('pass').addEventListener("input",function(){
document.getElementById("pass").style.borderColor="#ccc";
});
document.getElementById('username').addEventListener("input",function(){
document.getElementById("username").style.borderColor="#ccc";
});
view raw main.js hosted with ❤ by GitHub

Try it yourself => https://bit.ly/39ickoI
username : wadiemendja
password : 123456

Further details in this video:


Tags

Post a Comment

3 Comments

  1. noneApril 7, 2021 at 12:51 PM

    hello, i am ruban , i need your help please,

    ReplyDelete
  2. noneApril 7, 2021 at 12:53 PM

    i want to creat a signup form with login like your login please

    ReplyDelete
    Replies
    1. Wadie MendjaMay 12, 2021 at 12:16 PM

      Here is the HTML code: https://github.com/wadiemendja/furniture-management-software/blob/master/index.html

      CSS file: https://github.com/wadiemendja/furniture-management-software/blob/master/style/login.css

      Delete