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 you type the correct user and pass. If you logout, you can only access again if you enter the right credentials.

The method we’ll use can be applied to web servers built using the ESPAsyncWebServer library.

Project Overview

Let’s take a quick look at the features of the project we’ll build.

ESP32 ESP8266 NodeMCU Password Protected Web Server Project Overview

Installing Libraries – Async Web Server

To build the web server you need to install the following libraries:

These libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation Libraries folder. Alternatively, in your Arduino IDE, you can go to Sketch Include Library > Add .zip Library and select the libraries you’ve just downloaded.

Web Server Code with Authentication

Copy the following code to your Arduino IDE.

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 and ESP8266 boards.

As an example, we’re building a web server that controls GPIO 2. You can use the HTTP authentication with any web server built with the ESPAsyncWebServer library.

How the Code Works

We’ve already explained in great details how web servers like this work in previous tutorials (DHT Temperature Web Server or Relay Web Server), so we’ll just take a look at the relevant parts to add username and password authentication to the web server.

Network Credentials

As mentioned previously, you need to insert your network credentials in the following lines:

Setting Your Username and Password

In the following variables set the username and password for your web server. By default, the username is admin and the password is also admin. We definitely recommend to change them.

Logout Button

In the index_html 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.

When clicked, the button calls the logoutButton() JavaScript function. This function makes an HTTP GET request to your ESP32/ESP8266 on the /logout URL. Then, in the ESP code, you should handle what happens after receiving this request.

Handle Requests with Authentication

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.

Basically, to add authentication to your web server, you just need to add the following lines after each request:

These lines continuously pop up the authentication window until you insert the right credentials.

You need to do this for all requests. This way, you ensure that you’ll only get responses if you are logged in.

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.

Here’s another example for when the ESP receives a request on the /state URL.

Handle Logout Button

When you click the logout button, the ESP receives a request on the /logout URL. When that happens send the response code 401.

The 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.

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.

Open a browser in your local network and type the ESP IP address.

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 and the password is admin.

After typing the right username and password, you should get access to the web server.

You can play with the web server and see that it actually controls the ESP32 or ESP8266 on-board LED.

In the web server page, there’s a logout button. If you click that button, the authentication window pops up again and you only have access to the web server again if you enter the right credentials.

You also need to enter the username and password if you try to get access using a different device on the local network, even tough you have access on another device.

Wrapping Up

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.

Thanks for reading.

This content was originally published here.