ESP32/ESP8266: Firebase Web App to Display Sensor Readings (with Authentication)

In this guide, you’ll create a Firebase Web App to display sensor readings saved on the Firebase Realtime Database. The sensor readings web page is protected with authentication using email and password. You’ll learn how to display data from the database and how to add authentication to your web app.
Updated May 9, 2026
This article is Part 2 of this previous tutorial:
ESP32/ESP8266 Firebase: Send BME280 Sensor Readings to the Realtime Database
. Follow that tutorial first, before proceeding.
Project Overview
In this tutorial (Part 2), you’ll create a web app to display the sensor readings saved on the Firebase Realtime Database (
read this previous tutorial
).
The following diagram shows a high-level overview of the project we’ll build—programming the ESP32/ESP8266 and setting up the Firebase Project was done in
Part 1
Firebase hosts your web app over a global CDN using Firebase Hosting and provides an SSL certificate. You can access your web app from anywhere using the Firebase-generated domain name.
When you first access the web app, you need to authenticate with an authorized email address and password. You already set up that user and the
authentication method in Part 1
After authentication, you can access a web app page that shows the sensor readings saved on the realtime database. The
realtime database was set up in Part 1
Prerequisites
Before starting to create the Firebase Web App, you need to check the following prerequisites.
Creating a Firebase Project
You should have followed the following tutorial first:
ESP32/ESP8266 Firebase: Send BME280 Sensor Readings to the Realtime Database
The ESP32/ESP8266 must be running the code provided in that tutorial. The realtime database and authentication must also be set up as shown in the tutorial.
Install Required Software
Before getting started, you need to install the required software to create the Firebase Web App. Here’s a list of the software you need to install (click on the links for instructions):
Visual Studio Code
Node.JS LTS version
Install Firebase Tools
1) Setting Up a Firebase Web App Project (VS Code)
Follow the next steps to create a Firebase Web App Project using VS Code.
1) Creating a Project Folder
1)
Create a folder on your computer where you want to save your Firebase project—for example,
Firebase-Project
on the Desktop.
2)
Open VS Code. Go to
File
>
Open Folder…
and select the folder you’ve just created.
3)
Go to
Terminal
>
New Terminal
. A new Terminal window should open on your project path.
2) Firebase Login
4)
On the previous Terminal window, type the following:
firebase
5)
You’ll be asked to collect CLI usage and error reporting information. Enter “
n
” and press
Enter
to deny.
Note:
[email protected]
”.
6)
After this, it will pop up a new window on your browser to login into your Firebase account.
7)
Allow Firebase CLI to access your Google account.
8)
After this, Firebase CLI login should be successful. You can close the browser window.
3) Initializing Web App Firebase Project
9)
After successfully login in, run the following command to start a Firebase project directory in the current folder.
firebase
init
10)
You’ll be asked if you want to initialize a Firebase project in the current directory. Enter
Y
and hit
Enter
11)
Then, use up and down arrows and the Space key to select the options. Select the following options:
Realtime Database
: Configure security rules file for Realtime Database and (optionally) provision default instance.
Hosting
: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
The selected options will show up with a green asterisk. Then, hit
Enter
12)
Select the option “Use an existing project”—it should be highlighted in blue—then, hit Enter.
13)
After that, select the Firebase project for this directory—it should be
the project created in this previous tutorial
. In my case, it is called
esp-
project. Then hit
Enter
14)
Then, select the hosting options as shown below:
What do you want to use as your public directory? Hit
Enter
to select
public
Configure as a single-page app (rewrite urls to /index.html)?
No
Set up automatic builds and deploys with GitHub?
No
15)
Press
Enter
on the following question to select the default database security rules file: “
What file should be used for Realtime Database Security Rules?
“
16)
The Firebase project should now be initialized successfully. Notice that VS Code created some essential files under your project folder.
The
index.html
file contains some HTML text to build a web page. For now, leave the default HTML text. The idea is to replace that with your own HTML text to build a custom web page for your needs. We’ll do that later in this tutorial.
17)
To check if everything went as expected, run the following command on the VS Code Terminal window.
firebase
deploy
You should get a
Deploy complete!
message and a URL to the Project Console and the Hosting URL.
18)
Copy the hosting URL and paste it into a web browser window. You should see the following web page. You can access that web page from anywhere in the world.
The web page you’ve seen previously is built with the HTML file placed in the
public
folder of your Firebase project. By changing the content of that file, you can create your own web app. That’s what we’re going to do in the next section.
2) Creating a Firebase Web App
Now that you’ve created a Firebase project app on VS Code, follow the next steps to customize the app to display the sensor readings on a login-protected web page.
index.html
Copy the following to your
index.html
file. This HTML file creates a simple web page that displays the readings saved on the
Realtime Database created in this previous project
If you aren’t authenticated, it shows a login form. When you authenticate with an authorized user email and corresponding password, it shows the user interface with the sensor readings.
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<title>ESP IoT Firebase App</title>
<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.7.2/css/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\">
<link rel=\"icon\" type=\"image/png\" href=\"favicon.png\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
</head>
<body>
<!--TOP BAR-->
<div class=\"topnav\">
Sensor Readings App <i class=\"fas fa-clipboard-list\"></i></h1>
</div>

<!--AUTHENTICATION BAR (USER DETAILS/LOGOUT BUTTON)-->
<div id=\"authentication-bar\" style=\"display: none;\">
<span id=\"user-details\">USEREMAIL</span>
<a href=\"#\" id=\"logout-link\">(logout)</a>
</p>
</div>

<!--LOGIN FORM-->
<form id=\"login-form\" style=\"display: none;\">
<div class=\"form-elements-container\">
<label for=\"input-email\">Email</b></label>
<input type=\"text\" placeholder=\"Enter Username\" id=\"input-email\" required>
<label for=\"input-password\">Password</b></label>
<input type=\"password\" placeholder=\"Enter Password\" id=\"input-password\" required>
<button type=\"submit\" id=\"login-button\">Login</button>
<p id=\"error-message\" style=\"color:red;\"></p>
</div>
</form>

<!--CONTENT (SENSOR READINGS)-->
<div class=\"content-sign-in\" id=\"content-sign-in\" style=\"display: none;\">
<div class=\"cards\">
<!--TEMPERATURE-->
<