ESP32: Create a Wi-Fi Manager (Using AsyncWebServer Library)

Index

Why Create a Wi-Fi Manager with AsyncWebServer?

Normally, libraries like WiFiManager (by tzapu) handle the Wi-Fi portal for you, but if you want full control over the web interface (your own HTML/CSS/JS), you can create a custom Wi-Fi Manager using the ESPAsyncWebServer library.

This gives you:

Custom web pages (your design)
Add extra fields (like device name, API keys)
Faster and non-blocking webserver
Better control over timeouts, redirects, storage

How It Works

ESP32 creates a Wi-Fi AP called ESP32-Setup.
You connect your mobile or laptop to it.
Visit 192.168.4.1 manually (captive portal is not automatic here by default).
Fill SSID and password.
ESP32 connects to your entered Wi-Fi network.

What You Need

ESP32 board
Arduino IDE installed and ESP32 board package

Arduino Code

Install Libraries

Go to the “Libraries” tab on the left side (or click Tools > Manage Libraries).
Click the “Library Manager” button (book icon).
In the Library Manager window, type the name of the library in the search bar.
Find the correct library (ESPAsyncWebServer, AsyncTCP.).

Click on the “Install” button next to it.
Wait for the installation to complete — and you’re ready to use the library in your code!

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

const char* ssid_ap = "ESP32-Setup"; // AP name
const char* password_ap = "12345678"; // AP password

AsyncWebServer server(80);

// HTML form for Wi-Fi credentials
const char* htmlForm = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>Wi-Fi Setup</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head><body>
  <h2>Configure Wi-Fi</h2>
  <form action="/get">
    SSID:<br><input type="text" name="ssid"><br>
    Password:<br><input type="password" name="pass"><br><br>
    <input type="submit" value="Save">
  </form>
</body></html>)rawliteral";

void setup() {
  Serial.begin(115200);

  // Start Access Point
  WiFi.softAP(ssid_ap, password_ap);

  Serial.println("Access Point started");
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", htmlForm);
  });

  // Route to get Wi-Fi credentials
  server.on("/get", HTTP_GET, [](AsyncWebServerRequest *request){
    String ssid, pass;
    if (request->hasParam("ssid") && request->hasParam("pass")) {
      ssid = request->getParam("ssid")->value();
      pass = request->getParam("pass")->value();

      Serial.println("Received Credentials:");
      Serial.print("SSID: ");
      Serial.println(ssid);
      Serial.print("Password: ");
      Serial.println(pass);

      request->send(200, "text/html", "<h3>Wi-Fi Credentials Received! Rebooting...</h3>");

      delay(3000);
      WiFi.softAPdisconnect(true);
      WiFi.begin(ssid.c_str(), pass.c_str());
    } else {
      request->send(400, "text/plain", "Bad Request");
    }
  });

  server.begin();
}

void loop() {
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("Connected to Wi-Fi!");
    Serial.print("Local IP: ");
    Serial.println(WiFi.localIP());
    delay(10000); // check every 10 seconds
  }
}

ESP32 Auto Restart After Upload

As soon as you upload the code, the ESP32 will automatically restart.
Open the Serial Monitor:
- Set Baud Rate to 115200.
You should see output like:

(This means your ESP32 has created a Wi-Fi hotspot.)

Connect Your Phone or Laptop to ESP32’s Wi-Fi

Open your device’s Wi-Fi settings.
Look for a network called:
ESP32-Setup
Enter the password:
12345678
Connect to this network.

Important:
You may get a warning like “No Internet Connection” —
Ignore it and stay connected.

Open a Browser

Open Chrome, Safari, Firefox — any browser.
In the address bar, manually type:

192.168.4.1

Press Enter.

Fill in Wi-Fi Credentials Form

You will see a simple form:

Configure Wi-Fi
SSID: _______
Password: _______

Enter your real Wi-Fi network name (SSID) and password.
Click the Save button.

ESP32 Receives and Processes Credentials

After saving, the browser will display:

Wi-Fi Credentials Received! Rebooting...

On the Serial Monitor, you will see:

Received Credentials:
SSID: YourNetworkName
Password: YourPassword

ESP32 will wait for 3 seconds, then:

Disconnect its hotspot (Access Point).
Try to connect to the Wi-Fi network you entered.

ESP32 Connects to Wi-Fi

If the SSID and password are correct:

Serial Monitor will show:

Connected to Wi-Fi!
Local IP: 192.168.X.X

You have successfully connected the ESP32 to your real Wi-Fi!

(Optional) Access ESP32 on New IP

You can now access ESP32 by typing the new IP address you got (shown on Serial Monitor) into the browser.

(Currently, there is no new web page after connecting — but you can build one later.)

Advanced Improvements

Auto Scan Nearby Wi-Fi Networks
Save credentials in EEPROM or SPIFFS
Auto Restart after connection
Timeout if no user connects
Redirect to main page after setup

Important Notes

You have to manually visit 192.168.4.1 (no auto popup unless extra DNS redirect code added).
Make sure your mobile stays connected to ESP32 AP during configuration.
ESP32 works best with 2.4 GHz networks (5 GHz not supported).

Use Case Ideas

IoT Home Devices (like smart switches)
Portable ESP32 gadgets
User-configurable Wi-Fi based products
Rental devices or demo boards

Conclusion

Using ESPAsyncWebServer to create a custom Wi-Fi Manager gives you ultimate control over your ESP32’s configuration.
You can style your pages, add extra settings, and make your projects much more user-friendly and professional!