ESP32: WiFi Manager

Introduction

In this tutorial we will learn how to setup a WiFi Manager portal on our ESP32, using the Arduino core and the WiFiManager library. The tests shown below were performed on a ESP32-E FireBeetle board from DFRobot.

This library offers a very simple way of hosting a portal in the ESP32 that, amongst other functionalities, shows the surrounding WiFi networks and allows to configure access to them. The credentials we choose are saved, meaning that the next time we run our program, the ESP32 will use those credentials to try to connect to that network.

It’s important to mention that the ESP32 will operate in AP mode for serving this portal, meaning that it will host its own WiFi network and we don’t need to have a previously successful connection to any Access Point.

Once we connect to the network hosted by the ESP32, we can use a device such as a computer or a smartphone to access the portal in a web browser. This portal has a nice look and feel, as we will see below, thus offering a nice out of the box solution for WiFi configuration.

As we will see in the code section, the bare minimum example will consist in creating an object, calling a method on that object and checking the outcome of the operation, which is really simple given the whole functionality the library exposes. Naturally, the library allows for many other options and configurations, for more advanced scenarios.

You can check the installation instructions of the library here. In short, the easiest way of installing the is searching it in the Arduino IDE libraries manager.

The code

We will start our code by including the WiFiManager.h library, which will give us access to the functionalities we need to perform the WiFi management through a portal.

#include <WiFiManager.h>

Moving on to the Arduino setup, we will start by opening a serial connection, so we can output some content to later be obtained in the Arduino IDE serial monitor.

Serial.begin(115200);

Then we will create an object of class WiFiManager. This object will allow us to bring up the WiFi manager portal with a single line of code, as we will see below.

WiFiManager manager;   

Now we will call the autoConnect method on our WiFiManager object. This method call will basically take care of everything [1]:

  • If no network credentials are saved, it will serve the WiFi manager portal;
  • If network credentials are saved, it will try to connect to WiFi. If it fails, it will start the AP mode and serve the WiFi Manager portal.

As input, the autoConnect method receives the name of the network that the ESP32 will host and, optionally, a password to be able to connect to it. The autoConnect method can also be called without passing any parameter. In that case, the library will generate a network name.

In our case, we will make use of both parameters the method can receive. We will call our network “ESP32_AP” and our password will be “password“. For a real application scenario, please make sure to use a secure password, as this one that we are using for testing purposes is insecure for real scenarios.

As output, this method call will return a Boolean indicating if it was successful connecting to the WiFi network or not. We will store this result in a variable.

Please take in consideration that, by default, if the configuration portal is launched, the autoConnect method call will block the program execution while waiting for the user to perform the configuration of the network in the portal (or exit it). If you want to set a timeout, you can call this method on the WiFiManager object.

bool success = manager.autoConnect("ESP32_AP","password");

After this, we will check the outcome of the call and print a message to the serial port accordingly to the result.

if(!success) {
    Serial.println("Failed to connect");
} 
else {
    Serial.println("Connected");
}

The complete code can be seen in the snippet below. Note that we have left the Arduino main loop empty since, for this introductory tutorial, we simply want to show the portal.

For testing purposes, if you want to try the portal again after saving the credentials, you can simply call the resetSettings method on the WiFiManager object. This method takes no arguments and it will delete the saved credentials, which is very useful for testing purposes

#include <WiFiManager.h>

void setup() {

    Serial.begin(115200);
    
    WiFiManager manager;    
    
    bool success = manager.autoConnect("ESP32_AP","password");

    if(!success) {
        Serial.println("Failed to connect");
    } 
    else {
        Serial.println("Connected");
    }
}

void loop(){}

Testing the code

To test the code, simply compile it and upload it to your device using the Arduino IDE. Once the procedure finishes, open the list of available networks using a device such as a computer.

You should see a network called ESP32_AP, like shown in figure 1. Connect to it using the password we set before: “password“. Once again, please use an adequate and secure password for real application scenarios.

Network hosted by the ESP32.
Figure 1 – Network hosted by the ESP32.

Also, if you open the Arduino IDE serial monitor, you will see some information getting printed, as shown on figure 2. In particular, we can see the IP address where the WiFi manager portal will be accessible once we connect to the ESP32 network.

Information printed to the serial port.
Figure 2 – Information printed to the serial port.

Once connected to the ESP32 network, open a web browser of your choice and type the address below in the address bar. Please note that the portal is accessible only via HTTP, which means that any network password that you send goes in plain text (not secure).

http://192.168.4.1

Upon accessing the URL, you should get the portal shown in figure 3. As can be seen, this page indicates that there is no Access Point set and we have 3 options: “Configure WiFi“, “Info” and “Exit“.

WiFi Manager portal index page.
Figure 3 – WiFi Manager portal index page.

If we click the “Configure WiFi” option, we are directed to the page shown in figure 4. It shows all the scanned networks and the strength of the sinal of each one. It also has two text boxes to input the credentials of the network we choose to connect to: SSID and Password.

Upon inserting the credentials, we can click the save button to finish the configuration and close the WiFi Manager portal. If the credentials are correct, the ESP32 will connect to the network and the autoConnect method will return the value true.

WiFi network configuration page.
Figure 4 – WiFi network configuration page. Names hidden for privacy reasons.

Just to illustrate the two other pages that we can navigate to from the index, figure 5 shows the “Info” page. It shows some information about the ESP32 and from the network it is hosting.

WiFi Manager portal info page.
Figure 5 – WiFi Manager portal info page.

If we scroll down, we can also see some additional information about other available pages that we don’t see right away in the index page. This is shown in figure 6.

Available pages.
Figure 6 – Available pages.

If we choose to exit the portal without putting the credentials of a network, then the ESP32 won’t be able to connect and the autoConnect method will return false.

Suggested ESP32 Readings

References

[1] https://github.com/tzapu/WiFiManager

1 thought on “ESP32: WiFi Manager”

  1. Sorry, I am missing something? Everything working as stated but after a reboot it comes back with an “unloading” status. Browser is unable to connect. Even after reloading a different ino and then reloading this ino I do not get back to the wifimanager page.

    Great basis for many apps.

    13:55:10.795 -> *WM: [3] WiFi station enable
    13:55:10.828 -> *WM: [1] connectTimeout not set, ESP waitForConnectResult…
    13:55:13.116 -> *WM: [2] Connection result: WL_CONNECTED
    13:55:13.116 -> *WM: [3] lastconxresult: WL_CONNECTED
    13:55:13.116 -> *WM: [1] AutoConnect: SUCCESS
    13:55:13.116 -> *WM: [1] STA IP Address: 192.168.0.126
    13:55:13.116 -> Connected
    13:55:13.116 -> *WM: [3] unloading

Leave a Reply