Until now the SSID and password for connecting the ESP8266 to the Wi-Fi network have been hardcoded in the sketch using these lines:

const char* ssid = "YOUR_WIFI_SSID"; 
const char* password = "YOUR_WIFI_PASSWORD";

To stop using the hardcoded values we need to first start the ESP8266 in AP mode and expose the user as a web interface served by an embedded web server hosted inside the ESP8266.

We will learn how to use the WiFiManager library to expose a configuration web page; we will take the data and save it to a SPIFFS like we did in the previous chapter and use it to start our module in station mode and connect to an MQTT server.

If you didn't install the WiFiManager library in Chapter 1, Getting Started with the ESP8266 you can do it now, going to Sketch | Include Library | Manage libraries and search for wifimanager, as seen in the following screenshot:

After the installation of the library, let's see how you can use it to set the Wi-Fi network and Wi-Fi password.

Use the following code to see how it looks and how to use the WiFiManager:

#include "FS.h" 
#include <ESP8266WiFi.h> 
#include <DNSServer.h> 
#include <ESP8266WebServer.h> 
#include <WiFiManager.h> 

In case you need to clear the previously saved values in the SPIFFS you can set init_esp to true to clean the previously stored Wi-Fi credentials and to format the SPIFFS. This can be the case when you want to move the ESP8266 module to a different WiFi network.After you flash the code the setup() function will format the SPIFFS. Change then the value back to false so you will not format the flash every time when the ESP8266 is starting:

boolean init_esp = false; 
void setup()  
{ 
  Serial.begin(115200); delay(10); 
 
  if(init_esp) 
  { 
    SPIFFS.format(); 
    WiFi.disconnect(); 
  } 

Instantiate the wifiManager object. This will start the ESP in the access Point mode and a captive portal that will redirect you to a configuration web page:

  WiFiManager wifiManager; 

Set the expiration timeout to 240 seconds:

  wifiManager.setConfigPortalTimeout(240); 
  if (!wifiManager.autoConnect("ESP_AP", "changeit"))  
  { 
    Serial.println(F("Failed to connect. Reset and try again...")); 
    delay(3000); 
    //reset and try again 
    ESP.reset(); 
    delay(5000); 
  } 

At this point we are connected now to the Wi-Fi network, after we selected the Wi-Fi network and password from a web browser:

  //if you get here you have connected to the WiFi 
  Serial.println(F("Connected to Wifi.")); 
  Serial.print(F("My IP: ")); 
  Serial.println(WiFi.localIP()); 
} 
 
void loop() { 
  //add your code for loop() 
} 

After you compile and flash the ESP8266 with this code, take your phone and look for surrounding Wi-Fi networks. You will see a network named ESP_AP. Connect to it, enter the password changeit, and click on Sign in to network. If you don't see this message, go to your web browser and try to access any link or enter 192.168.4.1 in the address bar. You will be redirected to this page:

In this page you will see the access point name that was defined, ESP_AP and four buttons, which are explained in the following list:

• Configure WiFi: Scan surrounding Wi-Fi networks around and it will show you a list of them together with their signal power. If you have multiple Wi-Fi networks you can choose the one with the most power, as shown in the following screenshot:

• Configure WiFi (No Scan): If your Wi-Fi network has a hidden SSID or your Wi-Fi network is not online you can enter the name of the network and the password, skipping the scanning feature, as seen in the following screenshot:

• Info: As shown in the following screenshot, this page will read the Chip Id, MAC address for the access point or Station Mode of the ESP8266, and the flash details such as flash size and flash Id:

• Reset: Pressing the Reset button will reset the ESP8266 chip. In the Serial console from the Arduino IDE after the ESP is started, you will see some debug information about WiFiManager. If you want more information, then add the following line into your sketch:

wifiManager.setDebugOutput(false); 

• After the line:

WiFiManager wifiManager; 

• After the Wi-Fi network selected and the password introduced, the output in the serial console will show that the ESP is connected to the Wi-Fi; it will and also will show the IP address assigned by your router, as shown in the following screenshot: