![\"Building](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Servers-Beginners-guide.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWe’ll cover creating a web server to control outputs and display sensor readings, adding authentication to the web server, setting the ESP32 as an access point, and more. To make things as simple as possible, we’ll use the built-in WebServer.h<\/span> library.<\/p>\n\n\n\n New to the ESP32? We recommend following these getting-started guides first:<\/strong><\/p>\n\n\n\n In this tutorial, we’ll cover the following subjects. If you’re new to ESP32 web servers and you want to learn more about this subject, we recommend following these sections in order.<\/p>\n\n\n\n Recommended eBook<\/strong>: Build Web Servers with the ESP32 and ESP8266 (3rd edition)<\/a><\/p>\n\n\n\n This tutorial focuses on programming the ESP32 using the Arduino core. Before proceeding, you should have the ESP32 Arduino core installed in your Arduino IDE. Follow the next tutorial to install the ESP32 on the Arduino IDE, if you haven\u2019t already.<\/p>\n\n\n\n In simple terms, a web server is a \u201ccomputer\u201d that delivers web pages. It stores the website\u2019s files, including HTML documents and related assets like images, CSS style sheets, fonts, and other files. When a user makes a request, the server sends those files to the user\u2019s web browser.<\/p>\n\n\n\n When you access a web page in your browser, you\u2019re actually sending a request to a server using the Hypertext Transfer Protocol (HTTP). This protocol handles how information is requested and delivered on the Internet. The server then responds by sending the web page you asked for\u2014also through HTTP.<\/p>\n\n\n\n To better understand how all of this works with your ESP32 boards, let\u2019s go over some terms you\u2019ve probably heard before\u2014but might not fully understand yet.<\/p>\n\n\n\n Request-response is a message exchange pattern, in which a requestor (your browser) sends a request message to a replier system (the ESP32 as a web server) that receives and processes the request, and returns a message in response.<\/p>\n\n\n In most of our projects, the response message will be a web page that displays the latest sensor readings or that provides an interface to control outputs.<\/p>\n\n\n\n This is a simple, yet powerful messaging pattern, especially in client-server architectures.<\/p>\n\n\n\n When you type a URL in your browser, your device (the client) sends a request to a server using the Hypertext Transfer Protocol (HTTP). The server receives the request and responds\u2014also via HTTP\u2014by sending back the web page. This exchange between clients and servers happens over a computer network.<\/p>\n\n\n In simple terms, clients make requests to servers. Servers handle the clients\u2019 requests. <\/p>\n\n\n\n Throughout this tutorial, we\u2019ll treat the ESP32 as the server, and you\u2014using your browser\u2014as the client. In our projects, there\u2019s only one server (the ESP32 board), but there can be multiple clients. These could be different web browsers on various devices like computers, smartphones, or tablets, all connected to the same network, or even multiple browser tabs opened on the same device.<\/p>\n\n\n\n An IP address is a numerical label assigned to each device connected to a computer network.<\/p>\n\n\n\n It is a series of four values separated by periods, with each value ranging from 0 to 255. Here\u2019s an example:<\/p>\n\n\n\n At home, your devices are connected to a private network through your router (local network). All devices connected to your router are part of your local network. Inside this network, each device has its own IP address.<\/p>\n\n\n\n Devices connected to the same router can access each other via the IP address. Devices outside your local network can\u2019t access your local devices using their local IP address.<\/p>\n\n\n\n When you connect your ESP32 boards to your router, they become part of your local network. So, your ESP32 boards are assigned an IP address.<\/p>\n\n\n On your local network, the IP address of the ESP32 (and other devices) is assigned by the router using something called DHCP (Dynamic Host Configuration Protocol). You don\u2019t need to worry about the details. You just need to know that DHCP automatically assigns an IP address and other network settings to each device on the network.<\/p>\n\n\n\n The router keeps track of every device on the network and maps an IP address to each device every time it joins the network. Two devices on the same network can\u2019t have the same IP address.<\/p>\n\n\n\n Again, when the ESP32 is connected to your router, the IP address it gets is a local address. This means you can only access it from devices that are also connected to the same network. As shown in the previous image, you can access the ESP32 using a computer or smartphone that\u2019s on the same network.<\/p>\n\n\n\n The ESP32 board can act as Wi-Fi Station, Access Point, or both.<\/p>\n\n\n\n When the ESP32 is set to work as a Wi-Fi station, it connects to an existing network, like your home router. In this setup, the router gives the ESP32 a unique local IP address. You can then communicate with the ESP32 from other devices (like your phone or computer) that are connected to the same network, simply by using that IP address.<\/p>\n\n\n Since the router is also connected to the internet, we can request information from the internet using our ESP32 boards like data from APIs, publish data to online platforms, use icons and images from the internet in our web server pages, or include JavaScript libraries. <\/p>\n\n\n\n However, in some cases, we may not have a router nearby to connect the ESP32. In this scenario, you must set your ESP32 board as an access point.<\/p>\n\n\n\n When your ESP32 is set up as an Access Point, other devices (such as your smartphone, tablet, or computer) can connect to it without the need for a router; the ESP controls its own Wi-Fi network.<\/p>\n\n\n Unlike a router, an ESP32 Access Point doesn\u2019t connect further to a wired network or the Internet, so you can\u2019t access external libraries, publish sensor readings to the cloud, or use services like mail. In most of our examples, we usually set the ESP32 boards as stations. You can easily modify our examples and set the boards as access points instead if that\u2019s more suitable for your projects.<\/p>\n\n\n\n There are several ways to communicate between the client and the server: HTTP Polling, Server-Sent Events (SSE), and WebSocket. We\u2019ll focus on HTTP Polling, which is the easiest protocol to get started with and better understand how web servers work.<\/p>\n\n\n\n We have an eBook dedicated to web servers that explores in great detail those three communication protocols:<\/p>\n\n\n\n In HTTP polling, the client repeatedly asks the server for new information. When the server receives a request, it responds with the requested data. The server only sends information when the client asks for it.<\/p>\n\n\n For example, your browser sends a request to the ESP32, and it responds with whatever you\u2019ve programmed it to provide, like a web page showing the latest sensor readings. To keep the web page updated using this method, the browser needs to keep sending requests at regular intervals.<\/p>\n\n\n\n Let\u2019s take a look at a practical example with the ESP32 that acts as a web server in the local network.<\/p>\n\n\n\n Typically, a web server with the ESP32 in the local network looks like this: the ESP32 running as a web server is connected via Wi-Fi to your router. Your computer, smartphone, or tablet, are also connected to your router via Wi-Fi or Ethernet cable. So, the ESP32 and your browser are on the same network.<\/p>\n\n\n When you type the ESP32 IP address in your browser, you are sending an HTTP request to your ESP32. Then, the ESP32 responds with a response that can contain a value, a reading, HTML text to display a web page, or any other data.<\/p>\n\n\n Based on what we\u2019ve learned so far about web servers and the ESP32, how can you put it all together to build IoT projects? Since the ESP32 has GPIO pins, you can connect sensors, actuators, and other devices, and then control or monitor them through a web interface.<\/p>\n\n\n\n Here\u2019s an example of a web server we\u2019ve built to control an output. The following web page shows up when you enter the ESP32 IP address in a browser.<\/p>\n\n\n When you press the ON button, the URL changes to the ESP IP address followed by \/on<\/span>. The ESP receives a request on that new URL, it checks which URL is being requested, and changes the LED state accordingly.<\/p>\n\n\n\n When you press the OFF button, a new request is made to the ESP32 in the \/off<\/span> URL. The ESP checks once again which URL is being requested and turns the LED off.<\/p>\n\n\n\n The same concept can be applied to control multiple outputs.<\/p>\n\n\n\n Before going straight to the project, it is important to outline what our web server will do so that it is easier to follow and understand the steps later on.<\/p>\n\n\n\n This is a simple example that illustrates how to build a web server that controls two LEDs. The idea is to replace those LEDs with a relay<\/a>, or any other electronic components you want to control.<\/p>\n\n\n\n Start by building the circuit. Connect two LEDs to your ESP32 as shown in the following schematic diagram\u2014with one LED connected to GPIO 26 and another to GPIO 27.<\/p>\n\n\n\n Here\u2019s a list of parts you need to assemble the circuit:<\/p>\n\n\n\n You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> Recommended reading: ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n After wiring the circuit, the next step is uploading the code to your ESP32. Copy the code below to your Arduino IDE, but don\u2019t upload it yet. You need to make some changes to make it work.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n You have to modify the following lines with your network credentials: SSID and password.<\/p>\n\n\n\n Now, you can upload the code, and it will work straight away. Don\u2019t forget to check if you have the right board and COM port selected.<\/p>\n\n\n\n Open the Serial Monitor at a baud rate of 115200.<\/p>\n\n\n\n The ESP32 connects to Wi-Fi and prints its IP address on the Serial Monitor. Copy that IP address because you need it to access the ESP32 web server.<\/p>\n\n\n Note:<\/strong> If nothing shows up on the Serial Monitor, press the ESP32 \u201cEN\u201d button (ENABLE\/RESET button next to the microUSB port).<\/p>\n\n\n\n Open your browser, paste the ESP32 IP address, and you\u2019ll see the following page.<\/p>\n\n\n Let\u2019s test the web server. Click the button to turn GPIO 26 ON. You can see on the Serial Monitor that the ESP32 receives a request on the \/26\/on<\/strong> URL.<\/p>\n\n\n When the ESP receives that request, it turns the LED attached to GPIO 26 ON, and its state is also updated on the web page. Test the button for GPIO 27 and see that it works similarly.<\/p>\n\n\n You can also access the web server on your smartphone as long as it is connected to the same network.<\/p>\n\n\n\n Now, let\u2019s take a closer look at the code to see how it works.<\/p>\n\n\n\n The first thing you need to do is include the necessary libraries for Wi-Fi connectivity and set up a web server.<\/p>\n\n\n\n As mentioned previously, you need to insert your ssid and password in the following lines inside the double quotes.<\/p>\n\n\n\n Assign GPIO pins to each of your outputs. In this example, we are using GPIO 26 and GPIO 27, but you can use any other suitable GPIOs.<\/p>\n\n\n\n Then, create variables to store the states of those outputs. You can add more outputs by defining additional variables.<\/p>\n\n\n\n Create a web server object on port 80 called server<\/span>.<\/p>\n\n\n\n Now, let\u2019s go into the setup()<\/span>. First, we start a serial communication at a baud rate of 115200 for debugging purposes.<\/p>\n\n\n\n You also define your GPIOs as OUTPUTs and set them to LOW<\/span>.<\/p>\n\n\n\n The following lines begin the Wi-Fi connection with WiFi.begin(ssid, password)<\/span>, wait for a successful connection, and print the ESP32 IP address in the Serial Monitor.<\/p>\n\n\n\n Read this guide to learn more about Wi-Fi with the ESP32<\/strong>: ESP32 Useful Wi-Fi Library Functions (Arduino IDE)<\/a>.<\/p>\n\n\n\n Finally, we set up the web server and define the routes it should handle. These routes will be requested when you click on the different buttons on the web page.<\/p>\n\n\n\n For example, when you make a request on the root \/<\/strong> URL (you simply paste the ESP32 IP address on the web browser), it will run the handleRoot()<\/span> function. When you click on the GPIO 26 ON button, it will make a request on the \/26\/on<\/strong> route and the board will run the handleGPIO26On()<\/span> function, and so on\u2026 Those functions are defined at the beginning of the code before the setup()<\/span>. We\u2019ll take a look at them next.<\/p>\n\n\n\n In the loop()<\/span>, we continuously listen for incoming client requests. This ensures that the ESP32 is always ready to respond to requests from your browser.<\/p>\n\n\n\n On the web page, you\u2019ve seen that you have four buttons to control the GPIOs:<\/p>\n\n\n\n Let\u2019s take a look at the GPIO 26 ON button. When you click that button, it makes a request to the ESP32 on the \/26\/on<\/strong> URL. When that happens, the handleGPIO26On()<\/span> function will run.<\/p>\n\n\n\n That function updates the state of the GPIO on the output26State<\/span> variable and turns the GPIO on. Finally, it calls the handleRoot()<\/span> function to display the web page with the right GPIO state.<\/p>\n\n\n\n This works similarly to the other buttons and corresponding routes and functions. Notice that all of these functions call the handleRoot()<\/span> function to display the web page with the right GPIO states.<\/p>\n\n\n\n The handleRoot()<\/span> function is responsible for generating the web page. It sends the HTML and CSS needed to build the page. The HTML and CSS text required to build the web page are saved in the html<\/span> variable.<\/p>\n\n\n\n Note that to generate the buttons, we use if<\/span> and else<\/span> statements to display the correct button and state according to the current state of the GPIOs.<\/p>\n\n\n\n Finally, the web page is sent to the client:<\/p>\n\n\n\n In some projects, you might want to keep your ESP32 web server protected with username and password. The following code protects access to the web server with a username and password.<\/p>\n\n\n\n
Tutorial Overview<\/h2>\n\n\n\n
\n
Prerequisites<\/h2>\n\n\n\n
\n
\n\n\n\n1) Introducing Web Servers<\/h2>\n\n\n\n
Request-response<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/request-response-esp32.png?resize=770%2C191&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nClient-Server<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/esp32-client-server-communication-f.png?resize=750%2C271&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIP Address<\/h3>\n\n\n\n
192.168.1.75<\/code><\/pre>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-explaining-IP-address.png?resize=750%2C359&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWi-Fi Station and Wi-Fi Access Point<\/h3>\n\n\n\n
Wi-Fi Station<\/h4>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Wi-Fi-Station.png?resize=605%2C320&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAccess Point<\/h4>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-access-point.png?resize=605%2C320&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nClient-Server Communication<\/h3>\n\n\n\n
\n
HTTP Polling<\/h4>\n\n\n\n
![\"Client-Server](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-HTTP-Polling.jpg?resize=750%2C637&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP32 Web Server<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-Wi-Fi-Client-Connected-1.png?resize=750%2C200&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-Wi-Fi-Clients-Request-Response.png?resize=750%2C214&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n2) ESP32 Web Server Example (Control Outputs)<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-Example-Control-Outputs.png?resize=712%2C459&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
\n
Project Overview<\/h3>\n\n\n\n
\n
Wiring the Circuit<\/h3>\n\n\n\n
\n
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-connected-to-two-LEDs.png?resize=750%2C552&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nBuilding the Web Server<\/h3>\n\n\n\n
\/* \n Rui Santos & Sara Santos - Random Nerd Tutorials\n https:\/\/RandomNerdTutorials.com\/esp32-web-server-beginners-guide\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n\n#include <WiFi.h>\n#include <WebServer.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Assign output variables to GPIO pins\nconst int output26 = 26;\nconst int output27 = 27;\nString output26State = "off";\nString output27State = "off";\n\n\/\/ Create a web server object\nWebServer server(80);\n\n\/\/ Function to handle turning GPIO 26 on\nvoid handleGPIO26On() {\n output26State = "on";\n digitalWrite(output26, HIGH);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 26 off\nvoid handleGPIO26Off() {\n output26State = "off";\n digitalWrite(output26, LOW);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 27 on\nvoid handleGPIO27On() {\n output27State = "on";\n digitalWrite(output27, HIGH);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 27 off\nvoid handleGPIO27Off() {\n output27State = "off";\n digitalWrite(output27, LOW);\n handleRoot();\n}\n\n\/\/ Function to handle the root URL and show the current states\nvoid handleRoot() {\n String html = "<!DOCTYPE html><html><head><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">";\n html += "<link rel=\\"icon\\" href=\\"data:,\\">";\n html += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}";\n html += ".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}";\n html += ".button2 { background-color: #555555; }<\/style><\/head>";\n html += "<body><h1>ESP32 Web Server<\/h1>";\n\n \/\/ Display GPIO 26 controls\n html += "<p>GPIO 26 - State " + output26State + "<\/p>";\n if (output26State == "off") {\n html += "<p><a href=\\"\/26\/on\\"><button class=\\"button\\">ON<\/button><\/a><\/p>";\n } else {\n html += "<p><a href=\\"\/26\/off\\"><button class=\\"button button2\\">OFF<\/button><\/a><\/p>";\n }\n\n \/\/ Display GPIO 27 controls\n html += "<p>GPIO 27 - State " + output27State + "<\/p>";\n if (output27State == "off") {\n html += "<p><a href=\\"\/27\/on\\"><button class=\\"button\\">ON<\/button><\/a><\/p>";\n } else {\n html += "<p><a href=\\"\/27\/off\\"><button class=\\"button button2\\">OFF<\/button><\/a><\/p>";\n }\n\n html += "<\/body><\/html>";\n server.send(200, "text\/html", html);\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n \/\/ Initialize the output variables as outputs\n pinMode(output26, OUTPUT);\n pinMode(output27, OUTPUT);\n \/\/ Set outputs to LOW\n digitalWrite(output26, LOW);\n digitalWrite(output27, LOW);\n\n \/\/ Connect to Wi-Fi network\n Serial.print("Connecting to ");\n Serial.println(ssid);\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(".");\n }\n Serial.println("");\n Serial.println("WiFi connected.");\n Serial.println("IP address: ");\n Serial.println(WiFi.localIP());\n\n \/\/ Set up the web server to handle different routes\n server.on("\/", handleRoot);\n server.on("\/26\/on", handleGPIO26On);\n server.on("\/26\/off", handleGPIO26Off);\n server.on("\/27\/on", handleGPIO27On);\n server.on("\/27\/off", handleGPIO27Off);\n\n \/\/ Start the web server\n server.begin();\n Serial.println("HTTP server started");\n}\n\nvoid loop() {\n \/\/ Handle incoming client requests\n server.handleClient();\n}\n<\/code><\/pre>\n\tSetting Your Network Credentials<\/h4>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \" REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nGetting the ESP32 IP Address<\/h4>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-web-server-get-ip-address-serial-monitor.png?resize=666%2C375&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAccessing the Web Server<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\nTesting the Web Server<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-web-server-control-output-explained.png?resize=712%2C459&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-basic-web-server.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nHow the Code Works<\/h3>\n\n\n\n
#include <WiFi.h>\n#include <WebServer.h><\/code><\/pre>\n\n\n\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \" REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nconst int output26 = 26;\nconst int output27 = 27;<\/code><\/pre>\n\n\n\nString output26State = \"off\";\nString output27State = \"off\";<\/code><\/pre>\n\n\n\n\/\/ Create a web server object\nWebServer server(80);<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
Serial.begin(115200);<\/code><\/pre>\n\n\n\n\/\/ Initialize the output variables as outputs\npinMode(output26, OUTPUT);\npinMode(output27, OUTPUT);\n\/\/ Set outputs to LOW\ndigitalWrite(output26, LOW);\ndigitalWrite(output27, LOW);<\/code><\/pre>\n\n\n\n\/\/ Connect to Wi-Fi network\nSerial.print(\"Connecting to \");\nSerial.println(ssid);\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n}\nSerial.println(\"\");\nSerial.println(\"WiFi connected.\");\nSerial.println(\"IP address: \");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\n\/\/ Set up the web server to handle different routes\nserver.on(\"\/\", handleRoot);\nserver.on(\"\/26\/on\", handleGPIO26On);\nserver.on(\"\/26\/off\", handleGPIO26Off);\nserver.on(\"\/27\/on\", handleGPIO27On);\nserver.on(\"\/27\/off\", handleGPIO27Off);\n\n\/\/ Start the web server\nserver.begin();\nSerial.println(\"HTTP server started\");<\/code><\/pre>\n\n\n\nloop()<\/h4>\n\n\n\n
server.handleClient();<\/code><\/pre>\n\n\n\nHandling GPIO Control<\/h4>\n\n\n\n
\n
\/\/ Function to handle turning GPIO 26 on\nvoid handleGPIO26On() {\n output26State = \"on\";\n digitalWrite(output26, HIGH);\n handleRoot();\n}<\/code><\/pre>\n\n\n\n\/\/ Function to handle turning GPIO 26 off\nvoid handleGPIO26Off() {\n output26State = \"off\";\n digitalWrite(output26, LOW);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 27 on\nvoid handleGPIO27On() {\n output27State = \"on\";\n digitalWrite(output27, HIGH);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 27 off\nvoid handleGPIO27Off() {\n output27State = \"off\";\n digitalWrite(output27, LOW);\n handleRoot();\n}<\/code><\/pre>\n\n\n\nDisplaying the Web Page<\/h3>\n\n\n\n
\/\/ Function to handle the root URL and show the current states\nvoid handleRoot() {\n String html = \"<!DOCTYPE html><html><head><meta name=\\\"viewport\\\"\n content=\\\"width=device-width, initial-scale=1\\\">\";\n html += \"<link rel=\\\"icon\\\" href=\\\"data:,\\\">\";\n html += \"<style>html { font-family: Helvetica; display: inline-block; \n margin: 0px auto; text-align: center;}\";\n html += \".button { background-color: #4CAF50; border: none; color: white; \n padding: 16px 40px; text-decoration: none; font-size: 30px; \n margin: 2px; cursor: pointer;}\";\n html += \".button2 { background-color: #555555; }<\/style><\/head>\";\n html += \"<body><h1>ESP32 Web Server<\/h1>\";\n\n \/\/ Display GPIO 26 controls\n html += \"<p>GPIO 26 - State \" + output26State + \"<\/p>\";\n if (output26State == \"off\") {\n html += \"<p><a href=\\\"\/26\/on\\\"><button class=\\\"button\\\">ON<\/button><\/a><\/p>\";\n } else {\n html += \"<p><a href=\\\"\/26\/off\\\"><button \n class=\\\"button button2\\\">OFF<\/button><\/a><\/p>\";\n }\n\n \/\/ Display GPIO 27 controls\n html += \"<p>GPIO 27 - State \" + output27State + \"<\/p>\";\n if (output27State == \"off\") {\n html += \"<p><a href=\\\"\/27\/on\\\"><button class=\\\"button\\\">ON<\/button><\/a><\/p>\";\n } else {\n html += \"<p><a href=\\\"\/27\/off\\\"><button \n class=\\\"button button2\\\">OFF<\/button><\/a><\/p>\";\n }\n\n html += \"<\/body><\/html>\";\n server.send(200, \"text\/html\", html);\n}\n<\/code><\/pre>\n\n\n\n\/\/ Display GPIO 26 controls\nhtml += \"<p>GPIO 26 - State \" + output26State + \"<\/p>\";\nif (output26State == \"off\") {\n html += \"<p><a href=\\\"\/26\/on\\\"><button class=\\\"button\\\">ON<\/button><\/a><\/p>\";\n} else {\n html += \"<p><a href=\\\"\/26\/off\\\"><button class=\\\"button button2\\\">OFF<\/button><\/a><\/p>\";\n}\n\n\/\/ Display GPIO 27 controls\nhtml += \"<p>GPIO 27 - State \" + output27State + \"<\/p>\";\nif (output27State == \"off\") {\n html += \"<p><a href=\\\"\/27\/on\\\"><button class=\\\"button\\\">ON<\/button><\/a><\/p>\";\n} else {\n html += \"<p><a href=\\\"\/27\/off\\\"><button class=\\\"button button2\\\">OFF<\/button><\/a><\/p>\";\n}<\/code><\/pre>\n\n\n\nserver.send(200, \"text\/html\", HTML);<\/code><\/pre>\n\n\n\n
\n\n\n\n3) Add Authentication to your Web Server<\/h2>\n\n\n\n
\/* \n Rui Santos & Sara Santos - Random Nerd Tutorials\n https:\/\/RandomNerdTutorials.com\/esp32-web-server-beginners-guide\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n\n#include <WiFi.h>\n#include <WebServer.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\n\/\/ Username and password for web page access\nconst char* http_username = "admin";\nconst char* http_password = "admin";\n\n\/\/ Assign output variables to GPIO pins\nconst int output26 = 26;\nconst int output27 = 27;\nString output26State = "off";\nString output27State = "off";\n\n\/\/ Create a web server object\nWebServer server(80);\n\n\/\/ Function to authenticate user\nbool isAuthenticated() {\n if (!server.authenticate(http_username, http_password)) {\n server.requestAuthentication();\n return false;\n }\n return true;\n}\n\n\/\/ Function to handle turning GPIO 26 on\nvoid handleGPIO26On() {\n if (!isAuthenticated()) return;\n output26State = "on";\n digitalWrite(output26, HIGH);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 26 off\nvoid handleGPIO26Off() {\n if (!isAuthenticated()) return;\n output26State = "off";\n digitalWrite(output26, LOW);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 27 on\nvoid handleGPIO27On() {\n if (!isAuthenticated()) return;\n output27State = "on";\n digitalWrite(output27, HIGH);\n handleRoot();\n}\n\n\/\/ Function to handle turning GPIO 27 off\nvoid handleGPIO27Off() {\n if (!isAuthenticated()) return;\n output27State = "off";\n digitalWrite(output27, LOW);\n handleRoot();\n}\n\n\/\/ Function to handle the root URL and show the current states\nvoid handleRoot() {\n if (!isAuthenticated()) return;\n\n String html = "<!DOCTYPE html><html><head><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">";\n html += "<link rel=\\"icon\\" href=\\"data:,\\">";\n html += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}";\n html += ".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}";\n html += ".button2 { background-color: #555555; }<\/style><\/head>";\n html += "<body><h1>ESP32 Web Server<\/h1>";\n\n \/\/ Display GPIO 26 controls\n html += "<p>GPIO 26 - State " + output26State + "<\/p>";\n if (output26State == "off") {\n html += "<p><a href=\\"\/26\/on\\"><button class=\\"button\\">ON<\/button><\/a><\/p>";\n } else {\n html += "<p><a href=\\"\/26\/off\\"><button class=\\"button button2\\">OFF<\/button><\/a><\/p>";\n }\n\n \/\/ Display GPIO 27 controls\n html += "<p>GPIO 27 - State " + output27State + "<\/p>";\n if (output27State == "off") {\n html += "<p><a href=\\"\/27\/on\\"><button class=\\"button\\">ON<\/button><\/a><\/p>";\n } else {\n html += "<p><a href=\\"\/27\/off\\"><button class=\\"button button2\\">OFF<\/button><\/a><\/p>";\n }\n\n html += "<\/body><\/html>";\n server.send(200, "text\/html", html);\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n \/\/ Initialize the output variables as outputs\n pinMode(output26, OUTPUT);\n pinMode(output27, OUTPUT);\n \/\/ Set outputs to LOW\n digitalWrite(output26, LOW);\n digitalWrite(output27, LOW);\n\n \/\/ Connect to Wi-Fi network\n Serial.print("Connecting to ");\n Serial.println(ssid);\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(".");\n }\n Serial.println("");\n Serial.println("WiFi connected.");\n Serial.println("IP address: ");\n Serial.println(WiFi.localIP());\n\n \/\/ Set up the web server to handle different routes with authentication\n server.on("\/", handleRoot);\n server.on("\/26\/on", handleGPIO26On);\n server.on("\/26\/off", handleGPIO26Off);\n server.on("\/27\/on", handleGPIO27On);\n server.on("\/27\/off", handleGPIO27Off);\n\n \/\/ Start the web server\n server.begin();\n Serial.println("HTTP server started");\n}\n\nvoid loop() {\n \/\/ Handle incoming client requests\n server.handleClient();\n}\n<\/code><\/pre>\n\t
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-with-Authentication.png?resize=699%2C435&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Setting](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Access-Point-Ready-Serial-Monitor.png?resize=750%2C329&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Connecting](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/Wi-Fi-Settings-ESP32-Access-Point.jpg?ssl=1\")
<\/figure><\/div>![\"Inserting](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/Connecting-to-ESP32-Access-Point-Insert-Password.jpg?ssl=1\")
<\/figure><\/div>![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-in-access-point-mode.jpg?ssl=1\")
<\/figure><\/div><\/div><\/div><\/div><\/div>\n\n\n\n