![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/12\/ESP32-ESP8266-Firebase-Web-App-Sensor-Readings-Authentication.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUpdated 30 April 2025<\/em><\/p>\n\n\n\n This article is Part 2 of this previous tutorial: ESP32\/ESP8266 Firebase: Send BME280 Sensor Readings to the Realtime Database<\/a>. Follow that tutorial first, before proceeding.<\/p>\n\n\n\n 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<\/a>).<\/p>\n\n\n\n The following diagram shows a high-level overview of the project we’ll build\u2014programming the ESP32\/ESP8266 and setting up the Firebase Project was done in Part 1<\/a>.<\/p>\n\n\n Before starting to create the Firebase Web App, you need to check the following prerequisites.<\/p>\n\n\n\n You should have followed the following tutorial first:<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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):<\/p>\n\n\n\n 1)<\/strong> Go to your Firebase project Console and add an app to your project by clicking on the +Add app <\/strong>button. <\/p>\n\n\n 2)<\/strong> Select the web app icon.<\/p>\n\n\n\n 3)<\/strong> Give your app a name. Then, check the box next to \u221a Also set up Firebase Hosting for this App<\/strong>. Click Register app<\/strong>.<\/p>\n\n\n 4)<\/strong> Then, copy the firebaseConfig<\/span> object and save it because you’ll need it later.<\/p>\n\n\n After this, you can also access the firebaseConfig<\/span> object if you go to your Project settings in your Firebase console.<\/p>\n\n\n\n 5)<\/strong> Click Next<\/strong> on the proceeding steps, and finally on Continue to console<\/strong>.<\/p>\n\n\n\n Follow the next steps to create a Firebase Web App Project using VS Code.<\/p>\n\n\n\n 1)<\/strong> Create a folder on your computer where you want to save your Firebase project\u2014for example, Firebase-Project<\/em><\/span> on the Desktop.<\/p>\n\n\n\n 2)<\/strong> Open VS Code. Go to File<\/strong> > Open Folder…<\/strong> and select the folder you’ve just created.<\/p>\n\n\n\n 3)<\/strong> Go to Terminal <\/strong>> New Terminal<\/strong>. A new Terminal window should open on your project path.<\/p>\n\n\n 4)<\/strong> On the previous Terminal window, type the following:<\/p>\n\n\n\n 5)<\/strong> You’ll be asked to collect CLI usage and error reporting information. Enter “n<\/strong>” and press Enter<\/strong> to deny.<\/p>\n\n\n Note:<\/strong> If you are already logged in, it will show a message saying: “Already logged in as user@gmail.com”.<\/p>\n\n\n\n 6)<\/strong> After this, it will pop up a new window on your browser to login into your Firebase account.<\/p>\n\n\n 7)<\/strong> Allow Firebase CLI to access your Google account.<\/p>\n\n\n 8)<\/strong> After this, Firebase CLI login should be successful. You can close the browser window.<\/p>\n\n\n 9)<\/strong> After successfully login in, run the following command to start a Firebase project directory in the current folder.<\/p>\n\n\n\n 10)<\/strong> You’ll be asked if you want to initialize a Firebase project in the current directory. Enter Y<\/strong> and hit Enter<\/strong>.<\/p>\n\n\n 11)<\/strong> Then, use up and down arrows and the Space key to select the options. Select the following options:<\/p>\n\n\n\n The selected options will show up with a green asterisk. Then, hit Enter<\/strong>. <\/p>\n\n\n 12)<\/strong> Select the option “Use an existing project”\u2014it should be highlighted in blue\u2014then, hit Enter.<\/p>\n\n\n 13)<\/strong> After that, select the Firebase project for this directory\u2014it should be the project created in this previous tutorial<\/a><\/strong>. In my case, it is called esp-<\/em><\/span>project. Then hit Enter<\/strong>.<\/p>\n\n\n 14)<\/strong> Then, select the hosting options as shown below:<\/p>\n\n\n\n 15)<\/strong> Press Enter <\/strong>on the following question to select the default database security rules file: “What file should be used for Realtime Database Security Rules?<\/strong>“<\/p>\n\n\n\n 16)<\/strong> The Firebase project should now be initialized successfully. Notice that VS Code created some essential files under your project folder.<\/p>\n\n\n The index.html<\/span> 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.<\/p>\n\n\n\n 17)<\/strong> To check if everything went as expected, run the following command on the VS Code Terminal window.<\/p>\n\n\n\n You should get a Deploy complete!<\/strong> message and a URL to the Project Console and the Hosting URL.<\/p>\n\n\n\n 18)<\/strong> 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.<\/p>\n\n\n The web page you’ve seen previously is built with the HTML file placed in the public<\/span> 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Copy the following to your index.html<\/span> file. This HTML file creates a simple web page that displays the readings saved on the Realtime Database created in this previous project<\/a>.<\/p>\n\n\n\n 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.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let’s take a quick look at the HTML file, or skip to the next section.<\/p>\n\n\n\n In the <head><\/span><\/span> of the HTML file, we must add all the required metadata.<\/p>\n\n\n\n The title of the web page is ESP Firebase App<\/strong>, but you can change it in the following line.<\/p>\n\n\n\n The following line allows us to use fontawesome icons<\/a>:<\/p>\n\n\n\nProject Overview<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/12\/ESP32-ESP8266-Firebase-Web-App-Authentication-Overview-f.png?resize=750%2C812&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Creating a Firebase Project<\/h3>\n\n\n\n
\n
Install Required Software<\/h3>\n\n\n\n
\n
\n\n\n\n1) Add an App to Your Firebase Project<\/h2>\n\n\n\n
![\"Add](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/12\/Add-App-to-Firebase-Project.png?resize=740%2C198&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/add-firebase-to-web-app-example.png?resize=552%2C601&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"firebaseConfig\u00a0object](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/app-firebase-config-object.png?resize=666%2C210&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n2) Setting Up a Firebase Web App Project (VS Code)<\/h2>\n\n\n\n
1) Creating a Project Folder<\/h3>\n\n\n\n
![\"Install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Firebase-Folder-Project.png?resize=746%2C163&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n2) Firebase Login<\/h3>\n\n\n\n
firebase <\/strong>login<\/code><\/pre>\n\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Terminal-Window-Login-Firebase-VS-Code.png?resize=750%2C397&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account.png?resize=750%2C648&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Login-Firebase-Account-2.png?resize=750%2C875&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-CLI-Login-Successful.png?resize=689%2C454&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n3) Initializing Web App Firebase Project<\/h3>\n\n\n\n
firebase <\/strong>init<\/code><\/pre>\n\n\n\n![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Start-Project-VS-Code.png?resize=684%2C187&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Login](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/realtime-database-hosting-options.png?resize=750%2C186&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/Firebase-Project-Setup-VS-Code.png?resize=658%2C228&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Select](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/select-firebase-project-VS-Code.png?resize=662%2C174&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-hosting-setup-all-options.png?resize=657%2C277&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/08\/firebase-project-app-created-successfully.png?resize=750%2C382&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nfirebase <\/strong>deploy<\/code><\/pre>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/firebase-first-deploy-test-app.png?resize=659%2C322&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Firebase](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/09\/firebase-hosting-complete.png?resize=773%2C495&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n3) Creating a Firebase Web App<\/h2>\n\n\n\n
index.html<\/h3>\n\n\n\n
<!-- Complete Project Details at: https:\/\/RandomNerdTutorials.com\/esp32-esp8266-firebase-web-app-sensor\/ -->\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset="utf-8">\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <title>ESP IoT Firebase App<\/title>\r\n <link rel="stylesheet" href="https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">\r\n <link rel="icon" type="image\/png" href="favicon.png">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n <\/head>\r\n <body>\r\n <!--TOP BAR-->\r\n <div class="topnav">\r\n <h1>Sensor Readings App <i class="fas fa-clipboard-list"><\/i><\/h1>\r\n <\/div>\r\n\r\n <!--AUTHENTICATION BAR (USER DETAILS\/LOGOUT BUTTON)-->\r\n <div id="authentication-bar" style="display: none;">\r\n <p><span id="authentication-status">User logged in<\/span>\r\n <span id="user-details">USEREMAIL<\/span>\r\n <a href="#" id="logout-link">(logout)<\/a>\r\n <\/p>\r\n <\/div>\r\n\r\n <!--LOGIN FORM-->\r\n <form id="login-form" style="display: none;">\r\n <div class="form-elements-container">\r\n <label for="input-email"><b>Email<\/b><\/label>\r\n <input type="text" placeholder="Enter Username" id="input-email" required>\r\n <label for="input-password"><b>Password<\/b><\/label>\r\n <input type="password" placeholder="Enter Password" id="input-password" required>\r\n <button type="submit" id="login-button">Login<\/button>\r\n <p id="error-message" style="color:red;"><\/p>\r\n <\/div>\r\n <\/form>\r\n\r\n <!--CONTENT (SENSOR READINGS)-->\r\n <div class="content-sign-in" id="content-sign-in" style="display: none;">\r\n <div class="cards">\r\n <!--TEMPERATURE-->\r\n <div class="card">\r\n <p><i class="fas fa-thermometer-half" style="color:#059e8a;"><\/i> TEMPERATURE<\/p>\r\n <p><span class="reading"><span id="temp"><\/span> \u00b0C<\/span><\/p>\r\n <\/div>\r\n <!--HUMIDITY-->\r\n <div class="card">\r\n <p><i class="fas fa-tint" style="color:#00add6;"><\/i> HUMIDITY<\/p>\r\n <p><span class="reading"><span id="hum"><\/span> %<\/span><\/p>\r\n <\/div>\r\n <!--PRESSURE-->\r\n <div class="card">\r\n <p><i class="fas fa-angle-double-down" style="color:#e1e437;"><\/i> PRESSURE<\/p>\r\n <p><span class="reading"><span id="pres"><\/span> hPa<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script type="module" src="scripts\/auth.js"><\/script>\r\n <script type="module" src="scripts\/index.js"><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\tHow it Works<\/h4>\n\n\n\n
<title>ESP Firebase App<\/title><\/code><\/pre>\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\"><\/code><\/pre>\n\n\n\n
![\"Create](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/10\/Firebase-Project-VS-Code-CSS-File.png?resize=578%2C277&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n