![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-NodeMCU-Web-Server-HTTP-Authentication-Username-and-Password-Protected-Arduino-IDE.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe ESP32\/ESP8266 boards will be programmed using Arduino IDE. So make sure you have these boards installed:<\/p>\n\n\n\n
- \n
- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux)<\/a><\/li>\n\n\n\n
- Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
Security Concerns<\/h2>\n\n\n\n
This project is meant to be used in your local network to protect from anyone just typing the ESP IP address and accessing the web server (like unauthorized family member or friend). <\/p>\n\n\n\n
If your network is properly secured, running an HTTP server with basic authentication is enough for most applications. If someone has managed to hack your network, it doesn’t matter if you use HTTP or HTTPS. The hacker can bypass HTTPS and get your user\/pass.<\/p>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
Let’s take a quick look at the features of the project we’ll build.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Password-Protected-Web-Server-Overview.png?resize=903%2C671&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n- \n
- In this tutorial you’ll learn how to password protect your web server;<\/li>\n\n\n\n
- When you try to access the web server page on the ESP IP address, a window pops up asking for a username and password;<\/li>\n\n\n\n
- To get access to the web server page, you need to enter the right username and password (defined in the ESP32\/ESP8266 sketch);<\/li>\n\n\n\n
- There’s a logout button on the web server. If you click the logout button, you’ll be redirected to a logout page. Then, close all web browser tabs to complete the logout process;<\/li>\n\n\n\n
- You can only access the web server again if you login with the right credentials;<\/li>\n\n\n\n
- If you try to access the web server from a different device (on the local network) you also need to login with the right credentials (even if you have a successful login on another device);<\/li>\n\n\n\n
- The authentication is not encrypted.<\/li>\n<\/ul>\n\n\n\n
Note: <\/strong> this project was tested on Google Chrome and Firefox web browsers and Android devices.<\/p>\n\n\n\n
Installing Libraries \u2013 Async Web Server<\/h2>\n\n\n\n
To build the web server you need to install the following libraries:<\/p>\n\n\n\n
- \n
- ESP32:<\/strong> install the ESPAsyncWebServer<\/a> and the AsyncTCP <\/a>libraries (by ESP32Async).<\/li>\n\n\n\n
- ESP8266:<\/strong> install the ESPAsyncWebServer<\/a> and the ESPAsyncTCP<\/a> libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n
You can install those libraries in the Arduino IDE Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n
Web Server Code with Authentication<\/h2>\n\n\n\n
Copy the following code to your Arduino IDE.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-web-server-http-authentication\/\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n\/\/ Import required libraries\n#ifdef ESP32\n #include <WiFi.h>\n #include <AsyncTCP.h>\n#else\n #include <ESP8266WiFi.h>\n #include <ESPAsyncTCP.h>\n#endif\n#include <ESPAsyncWebServer.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nconst char* http_username = "admin";\nconst char* http_password = "admin";\n\nconst char* PARAM_INPUT_1 = "state";\n\nconst int output = 2;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <title>ESP Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <style>\n html {font-family: Arial; display: inline-block; text-align: center;}\n h2 {font-size: 2.6rem;}\n body {max-width: 600px; margin:0px auto; padding-bottom: 10px;}\n .switch {position: relative; display: inline-block; width: 120px; height: 68px} \n .switch input {display: none}\n .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}\n .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}\n input:checked+.slider {background-color: #2196F3}\n input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}\n <\/style>\n<\/head>\n<body>\n <h2>ESP Web Server<\/h2>\n <button onclick="logoutButton()">Logout<\/button>\n <p>Ouput - GPIO 2 - State <span id="state">%STATE%<\/span><\/p>\n %BUTTONPLACEHOLDER%\n<script>function toggleCheckbox(element) {\n var xhr = new XMLHttpRequest();\n if(element.checked){ \n xhr.open("GET", "\/update?state=1", true); \n document.getElementById("state").innerHTML = "ON"; \n }\n else { \n xhr.open("GET", "\/update?state=0", true); \n document.getElementById("state").innerHTML = "OFF"; \n }\n xhr.send();\n}\nfunction logoutButton() {\n var xhr = new XMLHttpRequest();\n xhr.open("GET", "\/logout", true);\n xhr.send();\n setTimeout(function(){ window.open("\/logged-out","_self"); }, 1000);\n}\n<\/script>\n<\/body>\n<\/html>\n)rawliteral";\n\nconst char logout_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n<\/head>\n<body>\n <p>Logged out or <a href="\/">return to homepage<\/a>.<\/p>\n <p><strong>Note:<\/strong> close all web browser tabs to complete the logout process.<\/p>\n<\/body>\n<\/html>\n)rawliteral";\n\n\/\/ Replaces placeholder with button section in your web page\nString processor(const String& var){\n \/\/Serial.println(var);\n if(var == "BUTTONPLACEHOLDER"){\n String buttons ="";\n String outputStateValue = outputState();\n buttons+= "<p><label class=\\"switch\\"><input type=\\"checkbox\\" onchange=\\"toggleCheckbox(this)\\" id=\\"output\\" " + outputStateValue + "><span class=\\"slider\\"><\/span><\/label><\/p>";\n return buttons;\n }\n if (var == "STATE"){\n if(digitalRead(output)){\n return "ON";\n }\n else {\n return "OFF";\n }\n }\n return String();\n}\n\nString outputState(){\n if(digitalRead(output)){\n return "checked";\n }\n else {\n return "";\n }\n return "";\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n\n pinMode(output, OUTPUT);\n digitalWrite(output, LOW);\n \n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Connecting to WiFi..");\n }\n\n \/\/ Print ESP Local IP Address\n Serial.println(WiFi.localIP());\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n if(!request->authenticate(http_username, http_password))\n return request->requestAuthentication();\n request->send(200, "text\/html", index_html, processor);\n });\n \n server.on("\/logout", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(401);\n });\n\n server.on("\/logged-out", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", logout_html, processor);\n });\n\n \/\/ Send a GET request to <ESP_IP>\/update?state=<inputMessage>\n server.on("\/update", HTTP_GET, [] (AsyncWebServerRequest *request) {\n if(!request->authenticate(http_username, http_password))\n return request->requestAuthentication();\n String inputMessage;\n String inputParam;\n \/\/ GET input1 value on <ESP_IP>\/update?state=<inputMessage>\n if (request->hasParam(PARAM_INPUT_1)) {\n inputMessage = request->getParam(PARAM_INPUT_1)->value();\n inputParam = PARAM_INPUT_1;\n digitalWrite(output, inputMessage.toInt());\n }\n else {\n inputMessage = "No message sent";\n inputParam = "none";\n }\n Serial.println(inputMessage);\n request->send(200, "text\/plain", "OK");\n });\n \n \/\/ Start server\n server.begin();\n}\n \nvoid loop() {\n \n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
You just need to enter your network credentials (SSID and password) and the web server will work straight away. The code is compatible with both the ESP32<\/a> and ESP8266<\/a> boards. <\/p>\n\n\n\n
As an example, we’re building a web server that controls GPIO 2<\/span>. You can use the HTTP authentication with any web server built with the ESPAsyncWebServer library<\/a>.<\/p>\n\n\n\n
How the Code Works<\/h2>\n\n\n\n
We\u2019ve already explained in great details how web servers like this work in previous tutorials (DHT Temperature Web Server<\/a> or Relay Web Server<\/a>), so we\u2019ll just take a look at the relevant parts to add username and password authentication to the web server.<\/p>\n\n\n\n
Network Credentials<\/h3>\n\n\n\n
As mentioned previously, you need to insert your network credentials in the following lines:<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nSetting Your Username and Password<\/h3>\n\n\n\n
In the following variables set the username and password for your web server. By default, the username is admin<\/strong> and the password is also admin<\/strong>. We definitely recommend to change them.<\/p>\n\n\n\n
const char* http_username = \"admin\";\nconst char* http_password = \"admin\";<\/code><\/pre>\n\n\n\nLogout Button<\/h3>\n\n\n\n
In the index_html<\/span> variable you should add some HTML text to add a logout button. In this example, it’s a simple logout button without styling to make things simpler.<\/p>\n\n\n\n
<button onclick=\"logoutButton()\">Logout<\/button><\/code><\/pre>\n\n\n\nWhen clicked, the button calls the logoutButton()<\/span> JavaScript function. This function makes an HTTP GET request to your ESP32\/ESP8266 on the \/logout<\/em><\/strong> URL. Then, in the ESP code, you should handle what happens after receiving this request.<\/p>\n\n\n\n
function logoutButton() {\n var xhr = new XMLHttpRequest();\n xhr.open(\"GET\", \"logout\", true);\n xhr.send();<\/code><\/pre>\n\n\n\nOne second after you click the logout button, you are redirected to the logout page on the \/logged-out<\/strong><\/em> URL.<\/p>\n\n\n\n
setTimeout(function(){ window.open(\"\/logged-out\",\"_self\"); }, 1000);\n}<\/code><\/pre>\n\n\n\nHandle Requests with Authentication<\/h3>\n\n\n\n
Every time you make a request to the ESP32 or ESP8266 to access the web server, it will check whether you’ve already entered the correct username and password to authenticate.<\/p>\n\n\n\n
Basically, to add authentication to your web server, you just need to add the following lines after each request:<\/p>\n\n\n\n
if(!request->authenticate(http_username, http_password))\n return request->requestAuthentication();<\/code><\/pre>\n\n\n\nThese lines continuously pop up the authentication window until you insert the right credentials.<\/p>\n\n\n\n
You need to do this for all requests. This way, you ensure that you’ll only get responses if you are logged in.<\/p>\n\n\n\n
For example, when you try to access the root URL (ESP IP address), you add the previous two lines before sending the page. If you enter the wrong credentials, the browser will keep asking for them.<\/p>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n if(!request->authenticate(http_username, http_password))\n return request->requestAuthentication();\n request->send_P(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\nHere’s another example for when the ESP receives a request on the \/state<\/em><\/strong> URL.<\/p>\n\n\n\n
server.on(\"\/state\", HTTP_GET, [] (AsyncWebServerRequest *request) {\n if(!request->authenticate(http_username, http_password))\n return request->requestAuthentication();\n request->send(200, \"text\/plain\", String(digitalRead(output)).c_str());\n});<\/code><\/pre>\n\n\n\nHandle Logout Button<\/h3>\n\n\n\n
When you click the logout button, the ESP receives a request on the \/logout<\/em><\/strong> URL. When that happens send the response code 401.<\/p>\n\n\n\n
server.on(\"\/logout\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(401);\n});<\/code><\/pre>\n\n\n\nThe response code 401 is an unauthorized error HTTP response status code indicating that the request sent by the client could not be authenticated. So, it will have the same effect as a logout – it will ask for the username and password and won’t let you access the web server again until you login.<\/p>\n\n\n\n
When you click the web server logout button, after one second, the ESP receives another request on the \/logged-out<\/strong><\/em> URL. When that happens, send the HTML text to build the logout page (logout_html<\/span> variable).<\/p>\n\n\n\n
server.on(\"\/logged-out\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send_P(200, \"text\/html\", logout_html, processor);\n});<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
Upload the code to your ESP32 or ESP8266 board. Then, open the Serial Monitor and press the on-board RST\/EN button to get is IP address.<\/p>\n\n\n\n
Open a browser in your local network and type the ESP IP address.<\/p>\n\n\n\n
The following page should load asking for the username and password. Enter the username and password and you should get access to the web server. If you haven’t modified the code, the username is admin <\/strong>and the password is admin<\/strong>.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Web-Server-Username-Password.png?resize=451%2C253&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAfter typing the right username and password, you should get access to the web server.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-Web-Server-Logout-Button.png?resize=604%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou can play with the web server and see that it actually controls the ESP32 or ESP8266 on-board LED.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-board-Built_in-LED-turned-on-HIGH.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIn the web server page, there’s a logout button. If you click that button, you’ll be redirected to a logout page as shown below.<\/p>\n\n\n
\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-Password-Protected-Web-Server-Logout.png?resize=518%2C256&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIf you click the “return to homepage” link, you’ll be redirected to the main web server page. <\/p>\n\n\n\n
If you’re using Google Chrome, you’ll need to enter the username and password to access the web server again. <\/p>\n\n\n\n
If you’re using Firefox, you need to close all web browser tabs to completely logout. Otherwise, if you go back to the main web server page, you’ll still have access.<\/p>\n\n\n\n
So, we advise that you close all web browser tabs after clicking the logout button.<\/p>\n\n\n\n
You also need to enter the username and password if you try to get access using a different device on the local network, even though you have access on another device.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/04\/ESP32-ESP8266-NodeMCU-Web-Server-HTTP-Authentication-Username-and-Password-Protected-Arduino-IDE-Demonstration.jpg?resize=440%2C700&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
In this tutorial, you’ve learned how to add authentication to your ESP32 and ESP8266 web servers (password protected web server). You can apply what you learned in this tutorial to any web server built with the ESPAsyncWebServer library.<\/p>\n\n\n\n
We hope you’ve found this tutorial useful. Other web server projects you may like:<\/p>\n\n\n\n
- \n
- ESP32\/ESP8266: Control Outputs with Web Server and a Physical Button Simultaneously<\/a><\/li>\n\n\n\n
- ESP32\/ESP8266 Web Server: Control Outputs with Momentary Switch<\/a><\/li>\n\n\n\n
- ESP32\/ESP8266 Relay Module Web Server using Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n
Learn more about the ESP32 and ESP8266 boards with our resources:<\/p>\n\n\n\n
- \n
- Learn ESP32 with Arduino IDE<\/a><\/li>\n\n\n\n
- Home Automation using ESP8266<\/a><\/li>\n\n\n\n
- Free ESP32 Projects, Tutorials and Guides<\/a><\/li>\n\n\n\n
- Free ESP8266 NodeMCU Projects, Tutorials and Guides<\/a><\/li>\n<\/ul>\n\n\n\n
Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to add HTTP authentication with username and password to your ESP32 and ESP8266 NodeMCU web server projects using Arduino IDE. You can only access your web server if … <\/p>\n
- Home Automation using ESP8266<\/a><\/li>\n\n\n\n
- ESP32\/ESP8266 Web Server: Control Outputs with Momentary Switch<\/a><\/li>\n\n\n\n
- ESP8266:<\/strong> install the ESPAsyncWebServer<\/a> and the ESPAsyncTCP<\/a> libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n
- ESP32:<\/strong> install the ESPAsyncWebServer<\/a> and the AsyncTCP <\/a>libraries (by ESP32Async).<\/li>\n\n\n\n
- Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n