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. ESP32 password protected web server in Arduino IDE with examples




Prerequisites for this tutorial

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: HTML file ESP32 web server password protected




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: ESP32 password protected web server IP address
  • 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. ESP32 password protected web server display page
  • 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>");
} 
} 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:

ESP32 password protected web server in Arduino IDE

  • 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. ESP32 password protected web server display page
  • 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 ‘:’.changing user name and password ESP32
  • After that press the ‘ENCODE button’. You will see the encoded message in string format. Encoded message ESP32 password protected web server
  • 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.



Leave a Comment