ESP32 Password protected web server in Arduino IDE

In this tutorial, we will be designing a password-protected web server with ESP32 and Arduino IDE. If you have made the home automation project using ESP32 and you are accessing all information on the web server, and you want to make your web server confidential by adding a password login information, this tutorial will help you to add the password to your web server. It will make your web server protected and will be accessible through a password and user name only. When you try to access it, you will see a window to enter ‘password’ and ‘user name”. So now let’s get started with this tutorial.

Prerequisites for this tutorial

You should know how to upload code to ESP32 in Arduino IDE: installing ESP32 library in Arduino IDE and upload code.

You should know how to make the Web server with ESP32. You can check these two ESP32 based projects:

Now first we will create a simple web server which will display text using HTML on the web page like this:

On the right-hand side is an HTML code and on the left side is what you will see on the web page.

Simple ESP32 Web Server

Code for the simple ESP32 web server is given below. Copy this code and upload it to the ESP32 development board.

#include <WiFi.h>

const char* ssid = "PTCL-BB";  // make sure to change it with your Wifi name
const char* password = "5387c614";  // change this with your WiFi password 

WiFiServer server(80);
String header;


void setup() {
Serial.begin(115200);

Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) 
{ // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {

client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html>\n");
client.println("<html>\n");
client.println("<body>\n");
client.println("<center>\n");
client.println("<h1 style=\"color:blue;\">ESP32 webserver</h1>\n");
client.println("<h2 style=\"color:green;\">Hello World Web Sever</h2>\n");
client.println("<h2 style=\"color:blue;\">Password protected Web server</h2>\n");
client.println("</center>\n");
client.println("</body>\n");
client.println("</html>");
break;

} 
else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

After uploading the code, click on serial monitor and get the IP address as shown below:
Now paste this IP address in any web browser and hit the enter button. You will see this web page displaying in the web browser.
You will see that you will be able to access this web page by using the IP address which is assigned to ESP32 board.
Anyone who has this IP address can access this web page.
Now if you want to make it password protected, we need to add authentication code in the above code.
I am not explaining the above code in this tutorial. Because it is similar to the codes discussed in create ESP32 web server tutorial and displaying sensors values on the web server using ESP32.
I recommend you to check these articles for more information on how this code works? Like how to connect with WiFi and how to serve web pages with ESP32.

Now let’s move to the main part of this tutorial.

Password protected web page


//This is a complete code on password protected web server using ESP32. 
//This code is same as the above code except the authentication part 
//which I will discuss in code working part. 
// Load Wi-Fi library
#include <WiFi.h>

// Replace with your network credentials
const char* ssid = "PTCL-BB"; 
const char* password = "5387c614";

// Set web server port number to 80
WiFiServer server(80);
String header;

// Variable to store the HTTP request

void setup() {
Serial.begin(115200);

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) 
{ // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// checking if header is valid
// dXNlcjpwYXNz = 'user:pass' (user:pass) base64 encode
// Finding the right credential string, then loads web page
if(header.indexOf("dXNlcjpwYXNz") >= 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html>\n");
client.println("<html>\n");
client.println("<body>\n");
client.println("<center>\n");
client.println("<h1 style=\"color:blue;\">ESP32 webserver</h1>\n");
client.println("<h2 style=\"color:green;\">Hello World Web Sever</h2>\n");
client.println("<h2 style=\"color:blue;\">Password protected Web server</h2>\n");
client.println("</center>\n");
client.println("</body>\n");
client.println("</html>");

break;
}
// Wrong user or password, so HTTP request fails... 
else { 
client.println("HTTP/1.1 401 Unauthorized");
client.println("WWW-Authenticate: Basic realm=\"Secure\"");
client.println("Content-Type: text/html");
client.println();
client.println("<html>Authentication failed</html>");
break;
} 
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

This is the new code added to the above code which adds password protection.

if(header.indexOf("dXNlcjpwYXNz") >= 0)

{
// Your web server HTML and css files 
}

Here ‘if’ condition checks if password and username are found in the string header which is used to store all incoming HTTP requests from the web client. Here this string “dXNlcjpwYXNz” contains both user name and password in base64 encoded. if password and user name is correct, it will display the HTML and CSS files inside this condition.

These lines add the password protected feature to the web server. If the entered password and user name are not correct. You will see the message “Authentication failed” in the web browser.

 else { 
client.println("HTTP/1.1 401 Unauthorized");
client.println("WWW-Authenticate: Basic realm=\"Secure\"");
client.println("Content-Type: text/html");
client.println();
client.println("<html>Authentication failed</html>");
}

So the default password which I have used in this example is:

user name: 'user'
password = 'pass'

I will shortly tell you how to change the password and user name. If you upload this code to ESP32 and try to access the web page through the IP address, you will see this in the web browser:

Now you need to enter the user name and password and press on the sign in button.
You will be able to see the web page as shown below. Otherwise, if the entered details are not correct, you will see “Authentication failed” message in the web browser.
Now if you want to change the user name and password, go to this link https://www.base64encode.org/
In the Encode to Base64 format types, enter your ‘user name: password’. Separate the user name and password with ‘:’.
After that press the ‘ENCODE button’. You will see the encoded message in string format.
As you can see for ‘user: pass’ the encoded string is dXNlcjpwYXNz. Copy this string to the if condition in the code as shown below:

if(header.indexOf("dXNlcjpwYXNz") >= 0)

This how you can change user name and password very quickly. This is all about this password protected web server tutorial. Check our fuhrer ESP32 related project:

10 thoughts on “ESP32 Password protected web server in Arduino IDE”

AliReza
October 5, 2019 at 5:42 pm
There is a problem in this line :
if(header.indexOf(“dXNlcjpwYXNz”) >= 0)
that doesn’t check before of user and after the pass, if the user send something like ouruser:pass123
that isn’t correct user & pass but it passed
I suggest these lines instead of that line
const char* userpass = “user:pass”;
//21 : “Authorization: Basic “.length()
int index = header.indexOf(“Authorization: Basic “) + 21;
if ((index >= 21) && (header.substring(index, header.indexOf(‘\n’, index) – 1) == base64::encode(userpass))) //”dXNlcjpwYXNz”
Francis
November 18, 2019 at 3:43 am
Thank you for this tutorial, but I can’t manage to get the example working with Mozilla or Edge. The browser display the login user/password window and then it hangs. If I kill the request and then renew it, I get the good answer from the server (without the need to give an other time the user/password)
The example works perfectly with Chrome.
Using a ESP32 Wemos/OLED board, with Arduino IDE 1.8.10, WIFI library 1.2.7.
Same problem with an ESP8266 (ESP-12 board)
- Andrea_from_Italy
  November 23, 2019 at 11:40 pm
  Missing a “break;” after:
  client.println(“Authentication failed”);
  - tanveer malik
    November 24, 2019 at 1:32 am
    Thanks for pointing out a mistake. We will update the article.
Martin
December 20, 2019 at 7:37 pm
Thank you posting this How-to. You have explained it in easy to follow steps and good detail. Great job!!
Farcas Claudiu
April 10, 2020 at 12:43 pm
how can i request password on any refresh page?
- Microcontrollers Lab
  April 10, 2020 at 2:40 pm
  Just disconnect the connection after serving web pagefiles and force to load again from the start. Or you can make a separate file for password page and actual web page.
Izsáki Tamás
March 8, 2021 at 12:54 am
Welcome. I cant understand how we get a pop up javascript from this code(that conatin password and login inputs)?
AlexTerechov
September 6, 2022 at 11:46 am
C:\Users\user\Documents\Arduino\libraries\WiFi
exit status 1
‘server’ was not declared in this scope
Hi, whats problem? Libraries installed new
Sonny
November 23, 2024 at 1:44 pm
Any way to incorporate this with the ESP32-CAM script?

Prerequisites for this tutorial

Simple ESP32 Web Server

Password protected web page

Share this:

10 thoughts on “ESP32 Password protected web server in Arduino IDE”

Leave a Comment Cancel reply