ESP32 WiFi Manager – No Hard Coding for SSID & Password
Table of Contents
Description:
ESP32 WiFi Manager – No Hard Coding for SSID & Password – Now, you can use WiFi Manager on your mobile phone to change the WiFi credentials (SSID and Password) on your ESP32 board wirelessly. You do not need to connect ESP32 board to your laptop or PC. No more hard coding for the SSID and Password!
If you have created a project for personal use that connects to your WiFi router or mobile hotspot, and later you decide to change the router or hotspot SSID and password, then after changing the WiFi credentials, your ESP32 won’t connect anymore. You will need to physically connect your ESP32 to a laptop and manually update the SSID and password, then re-upload the program. You will have to repeat this time-consuming and tiring process each time you change the SSID and password of an existing WiFi network or want to connect to a new WiFi network.
Project: Retrieve WiFi Password using ESP8266.
So, if you want to change WiFi credentials on your ESP32 wirelessly in just 1 minute – without any hard coding – then you should use WiFi Manager. It’s faster and easier than you might think!
The biggest advantage of using WiFi Manager is this: let’s say you have made a product that you sell on Amazon or any other online store. Now, if someone buys your product, how will they change the SSID and Password? Obviously, you will not give them the code. In this situation, they can use WiFi Manager to change the WiFi credentials (SSID and Password) on the ESP32 without hard coding. So, if you also want to sell your IoT-based products, make sure to read this article until the end.
You will find many articles and videos on WiFi Manager that explain how to change the SSID and Password. But no one has explained:
- How to implement it in a working project.
- How to save the SSID and Password in EEPROM and access them later from EEPROM.
- How to use a button at a professional level, so the user can securely change their SSID and Password anytime using a cell phone or Laptop/PC.
So, today, I am going to explain and show all of this in a practical way.
And let me tell you, even though I am using the WiFi Manager Library, but still I have done 90% of the programming myself to simplify the code. Trust me, when you see the code, you will be amazed at how I have made such complex work so simple.
So, without any further delay, let’s get started!!!
Amazon Links:
ESP32 WiFi + Bluetooth Module (Recommended)
*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!
For this project, you only need one ESP32 board and a button. One leg of the button is connected to 3.3V, and the other leg is connected to GPIO13. You can use any other pin as well, but you will need to change the pin number in the programming.
I already have a detailed article on the ESP32 and Blynk v2.0, so I will not explain how to set up the Blynk IoT application on your smartphone. I am sure 95% of you already know how to use the Blynk application to control an LED and for the 5% who don’t, you can read that getting started article.
ESP32 Blynk Led Controller without WiFi Manager:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#define BLYNK_TEMPLATE_ID "TMPL6icEIuQgP" #define BLYNK_TEMPLATE_NAME "Blynk Led" #define BLYNK_AUTH_TOKEN "2sPO5ZiTsE3QsYswHuV1fRRj7IEByssX" #include <BlynkSimpleEsp32.h> char auth[] = BLYNK_AUTH_TOKEN; int led = 5; // Your WiFi credentials. char ssid[] = "Mycell"; char pass[] = "lipo1234"; void setup() { Serial.begin(115200); Blynk.begin(auth, ssid, pass); pinMode(led, OUTPUT); } void loop() { Blynk.run(); } |
This is the basic code without using the WiFi manager. On the top we have BLYNK_TEMPLATE_ID, BLYNK_TEMPLATE_NAME, and BLYNK_AUTH_TOKEN.
1 |
#include <BlynkSimpleEsp32.h> |
Then we have the BlynkSimpleEsp32 library.
1 |
int led = 5; |
This is the onboard Led connected to the GPIO 5.
1 2 3 4 5 |
// Your WiFi credentials. char ssid[] = "Mycell"; char pass[] = "lipo1234"; |
And these are the WiFi credentials: the SSID and Password. In this type of programming, if you want to change the SSID and Password, you will have to connect the ESP32 to a laptop each time and then change the SSID and Password here. I have already uploaded this code.
Using my cell phone, I can control the onboard LED of the ESP32. So, this is what we have been doing for years.
Now, imagine if this were a product that I was selling. How would the people who buy this product connect it to their WiFi network? To change the WiFi credentials in the ESP32 without hard coding, I am going to use WiFi Manager.
WiFi Manager ESP32 Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
#define BLYNK_TEMPLATE_ID "TMPL6icEIuQgP" #define BLYNK_TEMPLATE_NAME "Blynk Led" #define BLYNK_AUTH_TOKEN "2sPO5ZiTsE3QsYswHuV1fRRj7IEByssX" #include <WiFiManager.h> #include <BlynkSimpleEsp32.h> #include <EEPROM.h> WiFiManager wm; char auth[] = BLYNK_AUTH_TOKEN; int led = 5; int button = 13; bool shouldSaveConfig = false; // Buffer for Wi-Fi credentials char ssid[32]; char pass[32]; // Callback to save config after web server updates SSID and password void saveConfigCallback() { Serial.println("Should save config"); shouldSaveConfig = true; } // Save SSID and password to EEPROM void saveCredentials(const char* newSSID, const char* newPass) { Serial.println("Saving WiFi credentials to EEPROM..."); // Save SSID for (int i = 0; i < 32; i++) { EEPROM.write(0 + i, newSSID[i]); } // Save Password for (int i = 0; i < 32; i++) { EEPROM.write(100 + i, newPass[i]); } EEPROM.commit(); } // Read SSID and password from EEPROM void readCredentials() { Serial.println("Reading WiFi credentials from EEPROM..."); for (int i = 0; i < 32; i++) { ssid[i] = EEPROM.read(0 + i); } ssid[31] = '\0'; for (int i = 0; i < 32; i++) { pass[i] = EEPROM.read(100 + i); } pass[31] = '\0'; Serial.println("SSID: "); Serial.println(ssid); Serial.println("Password: "); Serial.println(pass); delay(5000); } void setup() { Serial.begin(115200); EEPROM.begin(512); pinMode(led, OUTPUT); pinMode(button, INPUT_PULLUP); // Set WiFiManager save config callback wm.setSaveConfigCallback(saveConfigCallback); if (digitalRead(button) == LOW) { Serial.println("Button pressed, starting WiFiManager..."); //wm.resetSettings(); // Reset to enable setup mode wm.startConfigPortal("ESP32_Config"); // Save config if needed if (shouldSaveConfig) { saveCredentials(wm.getWiFiSSID().c_str(), wm.getWiFiPass().c_str()); Serial.println("Credentials saved."); ESP.restart(); // Restart to apply settings } } else { // Load credentials from EEPROM readCredentials(); Serial.print("Connecting to: "); Serial.println(ssid); Blynk.begin(auth, ssid, pass); } } void loop() { Blynk.run(); } |
As you can see, I have modified the previous code.
1 2 3 4 5 |
#include <WiFiManager.h> #include <BlynkSimpleEsp32.h> #include <EEPROM.h> |
This time, I have added 2 more libraries: WiFiManager and EEPROM. You do not need to install EEPROM because it gets installed automatically when you set up the ESP32 board. But you will need to install the WiFiManager library.
For this simply go to the Sketch Menu, then to Include Library, and click on the Manage Libraries.
Search for the WiFiManger and Scroll down.
You need to install this specific WiFi manager library.
In the same way, you also need to install the Blynk library. If you are using a different IoT platform, then there is no need to install the Blynk library.
1 |
WiFiManager wm; |
This creates a WiFiManager object to handle WiFi connections.
1 |
char auth[] |
This stores the Blynk authentication token.
1 |
int led = 5; |
Sets up the LED pin number.
1 |
int button = 13; |
Sets up the button pin number.
1 |
bool shouldSaveConfig = false; |
Tracks if the configuration needs saving.
1 2 3 |
char ssid[32]; char pass[32]; |
These are arrays to store the WiFi SSID and password.
1 2 3 4 5 6 7 8 9 |
// Callback to save config after web server updates SSID and password void saveConfigCallback() { Serial.println("Should save config"); shouldSaveConfig = true; } |
This function sets shouldSaveConfig to true when the SSID and password are updated, signaling that they should be saved.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
void saveCredentials(const char* newSSID, const char* newPass) { Serial.println("Saving WiFi credentials to EEPROM..."); // Save SSID for (int i = 0; i < 32; i++) { EEPROM.write(0 + i, newSSID[i]); } // Save Password for (int i = 0; i < 32; i++) { EEPROM.write(100 + i, newPass[i]); } EEPROM.commit(); } |
saveCredentials() function writes the WiFi SSID and password to EEPROM so that the ESP32 remembers them after a restart.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
void readCredentials() { Serial.println("Reading WiFi credentials from EEPROM..."); for (int i = 0; i < 32; i++) { ssid[i] = EEPROM.read(0 + i); } ssid[31] = '\0'; for (int i = 0; i < 32; i++) { pass[i] = EEPROM.read(100 + i); } pass[31] = '\0'; Serial.println("SSID: "); Serial.println(ssid); Serial.println("Password: "); Serial.println(pass); delay(5000); } |
readCredentials() function reads the saved SSID and password from EEPROM when the ESP32 starts, allowing it to reconnect to WiFi automatically.
1 2 3 4 5 6 7 |
Serial.begin(115200); EEPROM.begin(512); pinMode(led, OUTPUT); pinMode(button, INPUT_PULLUP); |
In the setup() function, we Initialize serial communication and EEPROM, and set the LED and button pins.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if (digitalRead(button) == LOW) { Serial.println("Button pressed, starting WiFiManager..."); //wm.resetSettings(); // Reset to enable setup mode wm.startConfigPortal("ESP32_Config"); // Save config if needed if (shouldSaveConfig) { saveCredentials(wm.getWiFiSSID().c_str(), wm.getWiFiPass().c_str()); Serial.println("Credentials saved."); ESP.restart(); // Restart to apply settings } } |
If the button is pressed during startup, it starts the WiFi configuration mode, allowing the user to enter new WiFi credentials through a web page. If shouldSaveConfig is true, it saves the new credentials and restarts the ESP32.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
else { // Load credentials from EEPROM readCredentials(); Serial.print("Connecting to: "); Serial.println(ssid); Blynk.begin(auth, ssid, pass); } |
If the button is not pressed, it reads the saved WiFi credentials from EEPROM and tries to connect to WiFi and Blynk Iot application.
Finally, in the loop() function, Blynk.run(); keeps the ESP32 connected to the Blynk platform, allowing it to send or receive data as needed.
You can see how simple and straightforward the code is. You won’t find such a simple code anywhere else. Anyway, I have already uploaded this program, and now let’s watch this in action.
Practical Demonstration:
I have powered this device for the first time, so it’s not connected to any WiFi network yet. Make sure the WiFi you want to connect your ESP32 module to is already ON. For demonstration, I will use my phone’s hotspot.
The ESP32 is already powered on, and my phone’s hotspot is active. Let’s check the WiFi list to see if “ESP32_Config” is available.
As you can see, there is no WiFi network named “ESP32_Config” in the list. This means the ESP32 is running in normal mode. When it’s in normal mode, you can’t change the WiFi SSID or password. To switch to configuration mode and change the SSID and Password, you need to press that Red button. You can use a small slide button instead of a big one if you prefer.
Anyway, turn ON this button, then press the reset button to restart the ESP32 module. After a few seconds, “ESP32_Config” will appear in the WiFi list.
You can see “ESP32_Config” has just appeared in the WiFi list. Next, click on “ESP32_Config”.
Then, click on “Configure WiFi”.
At the top, you can see the available WiFi networks. Select the one you want your ESP32 Module to connect to. In my case, I am going to select “Mycell”. And then I can type in my password, which is “lipo1234”.
Finally, click on the “Save” button, and that’s it.
The SSID and password are now permanently saved in the ESP32’s EEPROM. You can follow the same exact steps if you want to change the SSID and password again.
Now, turn OFF the button and press the reset button to activate the normal execution mode. Now, I can go ahead, open my Blynk application, and start controlling the onboard LED.
Let me tell you, since the SSID and password are stored in the ESP32’s EEPROM, even if we disconnect or reset the ESP32, the SSID and password will still be saved.
Now, let’s do it on a laptop.
Open the Serial Monitor.
Press the reset button on the ESP32 to check the stored SSID and password.
The SSID is “Mycell” and the password is “lipo1234”. This time I am going to connect ESP32 Module to another WiFi network. For this;
Turn ON the button connected to the GPOIO13 that allows ESP32 Module to enter into the configuration mode, then press the reset button to restart the ESP32 module.
Go to the WiFi list, and you will see “ESP32_Config”. From here, all the other steps are exactly the same.
Next, click on the ESP32_Config. This will open the WiFiManager Web Portal for you.
Just go ahead and click on the Configure WiFi Button.
Another page will open for entering the SSID and Password. At the top you will see the available WiFi networks. Simply, click on the name of the WiFi network, In my case, this time, I am going to use Engr Fahad WiFi Network. So, I simply clicked on it and then entered my password.
Finally, I clicked on the Save button. So, that’s all for now.
For practical demonstration, watch video tutorial given below. And don’t forget to subscribe to my YouTube channel.
Watch Video Tutorial: