IoT WiFi Credential Manager With ESP32

by Tech_Demons in Circuits > Arduino

57 Views, 1 Favorites, 0 Comments

IoT WiFi Credential Manager With ESP32

wifi.png

This project creates a self-configuring WiFi manager that stores credentials in non-volatile storage (NVS) and provides a web interface for management. Perfect for IoT devices needing flexible network configuration.

Supplies

The IoT WiFi Credential Manager project utilizing the ESP32 serves as a versatile tool for managing WiFi connections in Internet of Things (IoT) applications. Its primary function is to allow users to easily configure and store WiFi credentials through a user-friendly web interface. By leveraging the ESP32's capabilities, the project enables devices to connect to different WiFi networks without requiring hard-coded credentials in the firmware, which enhances flexibility and usability.When powered on, the ESP32 attempts to connect to previously stored WiFi credentials. If it fails, it automatically switches to Access Point (AP) mode, allowing users to connect directly to the device via a dedicated network. Through a simple web page hosted on the ESP32, users can input new SSID and password information, which is then securely stored in non-volatile memory. This ensures that the credentials persist even after power cycles. Additionally, users can remove stored credentials if needed.Overall, this project is particularly useful for developers and hobbyists working on IoT devices that require dynamic network configurations, making it easier to deploy devices in various environments without needing to reprogram them for different networks.

Required Components

  1. ESP32 development board
  2. Micro-USB cable
  3. Computer with Arduino IDE
  4. WiFi network (2.4GHz)


  1. Source Code: Link

Library Imports:

#include <WiFi.h>

#include <WebServer.h>

#include <FS.h>

#include <SPIFFS.h>

#include <Preferences.h>

HTML Web Interface

wifi.png

const char* html_page = R"=====(

<!DOCTYPE html>

<html>

<head>

<title>WiFi Manager</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

}

h1 {

color: #333;

}

form {

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

margin-bottom: 20px;

}

input[type="text"], input[type="password"] {

width: calc(100% - 22px);

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 4px;

}

input[type="submit"] {

background-color: #4CAF50;

color: white;

padding: 10px 15px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type="submit"]:hover {

background-color: #45a049;

}

.container {

max-width: 400px;

margin: auto;

}

</style>

</head>

<body>

<div class="container">

<h1>Manage WiFi Connections</h1>

<form action="/save">

<label for="ssid">SSID:</label><br>

<input type="text" id="ssid" name="ssid" required><br>

<label for="password">Password:</label><br>

<input type="password" id="password" name="password" required><br>

<input type="submit" value="Save">

</form>

<form action="/remove">

<input type="submit" value="Remove Credentials">

</form>

</div>

</body>

</html>

)=====";

Core Functions: WiFi Connection Handler

void connectToWiFi() {

// Attempts connection using stored credentials

// Falls back to AP mode after 10 seconds

}


Credential Management

void handleSave() {

// Saves new credentials to NVS

preferences.putString("ssid", newSSID);

preferences.putString("password", newPassword);

}


void handleRemove() {

// Clears stored credentials

preferences.clear();

}


Step-by-Step Working

  1. Initial Boot SequenceChecks SPIFFS initialization
  2. Loads credentials from NVS
  3. Attempts WiFi connection
  4. Network ModesStation Mode: Connected to existing WiFi
  5. AP Mode: Creates config hotspot (192.168.4.1)
  6. Web Server WorkflowAccess http://[IP]/ for interface
  7. /save endpoint stores new credentials
  8. /remove deletes existing credentials
  9. Credential StorageEncrypted storage in NVS
  10. Automatic reboot after changes

ESP32 Board

│

├── USB Cable ↔ Computer (Power/Programming)

└── WiFi ↔ Router/AP (Wireless Connection)


Testing & Usage


  1. Upload code via Arduino IDE
  2. Initial boot connects to stored network
  3. If unavailable:Connect to "ESP32-Setup" AP
  4. Visit 192.168.4.1
  5. Enter new credentials