ESP32 Password protected web server in Arduino IDE (original) (raw)

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("");
}
}

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


//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:

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: