ESP32/ESP8266 Web Server HTTP Authentication (Username and Password Protected)
Learn how to add HTTP authentication with username and password to your ESP32 and ESP8266 NodeMCU web server projects using Arduino IDE. You can only access your web server if you type the correct user and pass. If you logout, you can only access again if you enter the right credentials.
The method we’ll use can be applied to web servers built using the ESPAsyncWebServer library.
The ESP32/ESP8266 boards will be programmed using Arduino IDE. So make sure you have these boards installed:
- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux)
- Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux)
Security Concerns
This project is meant to be used in your local network to protect from anyone just typing the ESP IP address and accessing the web server (like unauthorized family member or friend).
If your network is properly secured, running an HTTP server with basic authentication is enough for most applications. If someone has managed to hack your network, it doesn’t matter if you use HTTP or HTTPS. The hacker can bypass HTTPS and get your user/pass.
Project Overview
Let’s take a quick look at the features of the project we’ll build.
- In this tutorial you’ll learn how to password protect your web server;
- When you try to access the web server page on the ESP IP address, a window pops up asking for a username and password;
- To get access to the web server page, you need to enter the right username and password (defined in the ESP32/ESP8266 sketch);
- There’s a logout button on the web server. If you click the logout button, you’ll be redirected to a logout page. Then, close all web browser tabs to complete the logout process;
- You can only access the web server again if you login with the right credentials;
- If you try to access the web server from a different device (on the local network) you also need to login with the right credentials (even if you have a successful login on another device);
- The authentication is not encrypted.
Note: this project was tested on Google Chrome and Firefox web browsers and Android devices.
Installing Libraries – Async Web Server
To build the web server you need to install the following libraries:
- ESP32: install the ESPAsyncWebServer and the AsyncTCP libraries (by ESP32Async).
- ESP8266: install the ESPAsyncWebServer and the ESPAsyncTCP libraries (by ESP32Async).
You can install those libraries in the Arduino IDE Library Manager. Go toSketch>Include Library >Manage Libraries and search for the libraries’ names.
Web Server Code with Authentication
Copy the following code to your Arduino IDE.
/********* Rui Santos & Sara Santos - Random Nerd Tutorials Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-web-server-http-authentication/ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.*********/// Import required libraries#ifdef ESP32 #include <WiFi.h> #include <AsyncTCP.h>#else #include <ESP8266WiFi.h> #include <ESPAsyncTCP.h>#endif#include <ESPAsyncWebServer.h>// Replace with your network credentialsconst char* ssid = "REPLACE_WITH_YOUR_SSID";const char* password = "REPLACE_WITH_YOUR_PASSWORD";const char* http_username = "admin";const char* http_password = "admin";const char* PARAM_INPUT_1 = "state";const int output = 2;// Create AsyncWebServer object on port 80AsyncWebServer server(80);const char index_html[] PROGMEM = R"rawliteral(<!DOCTYPE HTML><html><head> <title>ESP Web Server</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html {font-family: Arial; display: inline-block; text-align: center;} h2 {font-size: 2.6rem;} body {max-width: 600px; margin:0px auto; padding-bottom: 10px;} .switch {position: relative; display: inline-block; width: 120px; height: 68px} .switch input {display: none} .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px} .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px} input:checked+.slider {background-color: #2196F3} input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)} </style></head><body> <h2>ESP Web Server</h2> <button onclick="logoutButton()">Logout</button> <p>Ouput - GPIO 2 - State <span id="state">%STATE%</span></p> %BUTTONPLACEHOLDER%<script>function toggleCheckbox(element) { var xhr = new XMLHttpRequest(); if(element.checked){ xhr.open("GET", "/update?state=1", true); document.getElementById("state").innerHTML = "ON"; } else { xhr.open("GET", "/update?state=0", true); document.getElementById("state").innerHTML = "OFF"; } xhr.send();}function logoutButton() { var xhr = new XMLHttpRequest(); xhr.open("GET", "/logout", true); xhr.send(); setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);}</script></body></html>)rawliteral";const char logout_html[] PROGMEM = R"rawliteral(<!DOCTYPE HTML><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <p>Logged out or <a href="/">return to homepage</a>.</p> <p><strong>Note:</strong> close all web browser tabs to complete the logout process.</p></body></html>)rawliteral";// Replaces placeholder with button section in your web pageString processor(const String& var){ //Serial.println(var); if(var == "BUTTONPLACEHOLDER"){ String buttons =""; String outputStateValue = outputState(); buttons+= "<p><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"output\" " + outputStateValue + "><span class=\"slider\"></span></label></p>"; return buttons; } if (var == "STATE"){ if(digitalRead(output)){ return "ON"; } else { return "OFF"; } } return String();}String outputState(){ if(digitalRead(output)){ return "checked"; } else { return ""; } return "";}void setup(){ // Serial port for debugging purposes Serial.begin(115200); pinMode(output, OUTPUT); digitalWrite(output, LOW); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi.."); } // Print ESP Local IP Address Serial.println(WiFi.localIP()); // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ if(!request->authenticate(http_username, http_password)) return request->requestAuthentication(); request->send(200, "text/html", index_html, processor); }); server.on("/logout", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(401); }); server.on("/logged-out", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(200, "text/html", logout_html, processor); }); // Send a GET request to <ESP_IP>/update?state=<inputMessage> server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) { if(!request->authenticate(http_username, http_password)) return request->requestAuthentication(); String inputMessage; String inputParam; // GET input1 value on <ESP_IP>/update?state=<inputMessage> if (request->hasParam(PARAM_INPUT_1)) { inputMessage = request->getParam(PARAM_INPUT_1)->value(); inputParam = PARAM_INPUT_1; digitalWrite(output, inputMessage.toInt()); } else { inputMessage = "No message sent"; inputParam = "none"; } Serial.println(inputMessage); request->send(200, "text/plain", "OK"); }); // Start server server.begin();} void loop() { }You just need to enter your network credentials (SSID and password) and the web server will work straight away. The code is compatible with both theESP32 andESP8266 boards.
As an example, we’re building a web server that controlsGPIO 2. You can use the HTTP authentication with any web server built with theESPAsyncWebServer library.
How the Code Works
We’ve already explained in great details how web servers like this work in previous tutorials (DHT Temperature Web Server orRelay Web Server), so we’ll just take a look at the relevant parts to add username and password authentication to the web server.
Network Credentials
As mentioned previously, you need to insert your network credentials in the following lines:
const char* ssid = "REPLACE_WITH_YOUR_SSID";const char* password = "REPLACE_WITH_YOUR_PASSWORD";Setting Your Username and Password
In the following variables set the username and password for your web server. By default, the username isadmin and the password is alsoadmin. We definitely recommend to change them.
const char* http_username = "admin";const char* http_password = "admin";Logout Button
In theindex_html variable you should add some HTML text to add a logout button. In this example, it’s a simple logout button without styling to make things simpler.
<button>Logout</button>When clicked, the button calls thelogoutButton() JavaScript function. This function makes an HTTP GET request to your ESP32/ESP8266 on the/logout URL. Then, in the ESP code, you should handle what happens after receiving this request.
function logoutButton() { var xhr = new XMLHttpRequest(); xhr.open("GET", "logout", true); xhr.send();One second after you click the logout button, you are redirected to the logout page on the/logged-out URL.
setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);}Handle Requests with Authentication
Every time you make a request to the ESP32 or ESP8266 to access the web server, it will check whether you’ve already entered the correct username and password to authenticate.
Basically, to add authentication to your web server, you just need to add the following lines after each request:
if(!request->authenticate(http_username, http_password)) return request->requestAuthentication();These lines continuously pop up the authentication window until you insert the right credentials.
You need to do this for all requests. This way, you ensure that you’ll only get responses if you are logged in.
For example, when you try to access the root URL (ESP IP address), you add the previous two lines before sending the page. If you enter the wrong credentials, the browser will keep asking for them.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ if(!request->authenticate(http_username, http_password)) return request->requestAuthentication(); request->send_P(200, "text/html", index_html, processor);});Here’s another example for when the ESP receives a request on the/state URL.
server.on("/state", HTTP_GET, [] (AsyncWebServerRequest *request) { if(!request->authenticate(http_username, http_password)) return request->requestAuthentication(); request->send(200, "text/plain", String(digitalRead(output)).c_str());});Handle Logout Button
When you click the logout button, the ESP receives a request on the/logout URL. When that happens send the response code 401.
server.on("/logout", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(401);});The response code 401 is an unauthorized error HTTP response status code indicating that the request sent by the client could not be authenticated. So, it will have the same effect as a logout – it will ask for the username and password and won’t let you access the web server again until you login.
When you click the web server logout button, after one second, the ESP receives another request on the/logged-out URL. When that happens, send the HTML text to build the logout page (logout_html variable).
server.on("/logged-out", HTTP_GET, [](AsyncWebServerRequest *request){ request->send_P(200, "text/html", logout_html, processor);});Demonstration
Upload the code to your ESP32 or ESP8266 board. Then, open the Serial Monitor and press the on-board RST/EN button to get is IP address.
Open a browser in your local network and type the ESP IP address.
The following page should load asking for the username and password. Enter the username and password and you should get access to the web server. If you haven’t modified the code, the username isadminand the password isadmin.
After typing the right username and password, you should get access to the web server.
You can play with the web server and see that it actually controls the ESP32 or ESP8266 on-board LED.
In the web server page, there’s a logout button. If you click that button, you’ll be redirected to a logout page as shown below.
If you click the “return to homepage” link, you’ll be redirected to the main web server page.
If you’re using Google Chrome, you’ll need to enter the username and password to access the web server again.
If you’re using Firefox, you need to close all web browser tabs to completely logout. Otherwise, if you go back to the main web server page, you’ll still have access.
So, we advise that you close all web browser tabs after clicking the logout button.
You also need to enter the username and password if you try to get access using a different device on the local network, even though you have access on another device.
Wrapping Up
In this tutorial, you’ve learned how to add authentication to your ESP32 and ESP8266 web servers (password protected web server). You can apply what you learned in this tutorial to any web server built with the ESPAsyncWebServer library.
We hope you’ve found this tutorial useful. Other web server projects you may like:
- ESP32/ESP8266: Control Outputs with Web Server and a Physical Button Simultaneously
- ESP32/ESP8266 Web Server: Control Outputs with Momentary Switch
- ESP32/ESP8266 Relay Module Web Server using Arduino IDE
Learn more about the ESP32 and ESP8266 boards with our resources:
- Learn ESP32 with Arduino IDE
- Home Automation using ESP8266
- Free ESP32 Projects, Tutorials and Guides
- Free ESP8266 NodeMCU Projects, Tutorials and Guides
Thanks for reading.
Recommended Resources
Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, Arduino, and Node-RED.
Home Automation using ESP8266 eBook and video course » Build IoT and home automation projects.
Arduino Step-by-Step Projects »Build 25 Arduino projects with our course, even with no prior experience!
What to Read Next…
Enjoyed this project? Stay updated by subscribing our newsletter!
81 thoughts on “ESP32/ESP8266 Web Server HTTP Authentication (Username and Password Protected)”
Again, nice tutorial. Works fine, but need more explanation on the controlling of GPIO 2.
Reply
I’m confused on how that part works. Since a NodeMCU is backwards with the LED, tried to make it look correct, but really got messed up.good afternoon,
Reply
LOGOUT button (esp32) does not workGood Afternoon,
I have the same error with the Logout-Button (no reaction, no login window).Kind Regards
Reply
Juergen B.Hi.
Reply
It works fine on our end. However, we’re currently trying to solve the problem and we’ll update the tutorial when it is solved.
Regards,
SaraBoa tarde Sara.
Bom funciona tudo menos botão LOGOUT, não faz nada, parece que não gera o 401.
Fico muito grato pela pronta resposta.
BeiralOIII Sara
voltei a carregar o exemplo e funcionou diferente. agora ele sai da pagina porem se vc pedir para entrar ele não pede a autenticação“Logged out or return to homepage.
Note: close all web browser tabs to complete the logout process.
Reply
ok, fico grato por informações
Beiralhi Sara can you help me please. i upload the code no problem at all. but the serial monitor is always connecting to wifi. i cant find also the wifi credential can you help me how? thank in advance love your project.
Reply
Good Afternoon,
Reply
My solution:
server.on(“/logout”, HTTP_GET, [](AsyncWebServerRequest *request){
//request->send(401);
return request->requestAuthentication();
});
Would that be okay?
Kind Regards
Juergen B.what is the command line to authenticate automatically the admin & password?
ReplyHello Paulo. In the past, you could type in the browser URL bar:http://admin:[email protected]
However, that methodno longer works.
ReplyComo posso adicionar outro user ao programa? Tentei assim e não consigo autenticar
const char* http_username = “admin”;
const char* http_password = “admin”;const char* user1 = “arroz”;
const char* user1_password = “arroz”;server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request)
{
Serial.println(request->authenticate(http_username, http_password));
if(!request->authenticate(user1, user1_password))
return request->requestAuthentication();
if(!request->authenticate(http_username, http_password) || !request->authenticate(user1, user1_password))
return request->requestAuthentication();server.on(“/update”, HTTP_GET, [] (AsyncWebServerRequest *request) {
Reply
if(!request->authenticate(http_username, http_password) || !request->authenticate(user1, user1_password))
return request->requestAuthentication();Boa Tarde !, Rui como seria o caso inverso disso ? , ex : consumir uma API web que precise autenticar . Ao invés de conexão com ESP32 o próprio se conectar em uma API web .
Reply
Hi Sara
Very good tutorial. I am fan of of random nerd tutorials. The tutorials are very
well explained. I request you to add a wi-fi manager so the wifi credentials
hard coding can be avoided.Regards
Reply
HarnamCan you also do this on micropython? Thank you.
ReplyHi,
Thanks for great tutorials.
how can I add second button to control another device.thanks for great Job.
Junaid
ReplyHi people, im daniel from colombia, its exciting, i made this application 3 months ago and i would like to know if it is possible to do it with an https server ?, i was following this tutorial youtube.com/watch?v=Wm1xKj4bKsY and i achieve to implement the https server. but i did not succeed in implementing the authentication, greetings to all and thank you very much in advance
ReplyHi! Thanks for a cool tutorial. For anyone trying this. When using ASYNCTCP and webservers you can not add delay. Instead of that you should “manage” your relay buttons in the loop() function and make an constant state.
void loop() {
if(doorState == 1){
Serial.println(“opa”);
digitalWrite(5, 1);
delay(3000);
digitalWrite(5, 0);
doorState = 0;
Serial.println(“opa baiges”);
}
}And instead of doing digitalWrite(pin, inputMassage.toInt())
Reply
you would do
doorState = inputMassage.toInt()
Then it would trigger the relay in the loop() function.Hi!.. nice tutorial. can i add a program so that when i access the ESP 32/8266 web server i could change the username and password so the next time you access the Authentication you input the new username and password? Thanks in advance!.
ReplyHi.
Reply
Yes, you can do that.
You need to create a page with an HTML form that updates the username and password variables and saves them in SPIFFS, for example.
You can take a look at this tutorial that might help:https://randomnerdtutorials.com/esp32-esp8266-input-data-html-form/
Regards,
SaraHi Sara!
Reply
Thanks for replying.. so i still need to program/create a button just like the “Log Out” button already in the program so that it can go the HTML form that updates the username and password? .. sorry, im a newbee.. hope you could share a sketch on how i can incorporate the two (authenticated web server and the html form to change username and password).. thanks again in advance.. 🙂
Olá mais uma ves um ótimo post meus parabéns , mas ao invés de criar uma pagina assincrona no espteria como puxar a pagina do spiffs.
Reply
Obrigado !ESP32/ESP8266 Web Server HTTP Authentication (Username and Password ProtectedHello,
Reply
I created a project on ESP8266 with your arduino sketch and it works fine and thank you for it. However, I believe the program does not quite match the photos. Indeed, we can see the return of the state of the relay, while on my order web page there is no state displayed. Could you please correct this flaw? Being a beginner in this field, I failed to get it. On the other hand I managed to add a second channel and it works well. I thank you in advance. Cordially. Jean YvesHi.
Reply
You are right.
I’m sorry about that.
I didn’t notice that those lines were missing.
The code is now updated and should work as expected.
Regards,
SaraHello Sara,
Thank you for correcting the program. I have tested this program but still get a compilation error. (Compilation error for the Generic ESP8266 Module board).
I tried to change ESP8266 version card: 2.5.1 – 2.5.2 – 2.6.0 – 2.6.1 – 2.6.2 – 2.7.4. Always a card error.
Question: Which ESP8266 card should I install?
Thank you for your help. Best regards,
Jean YvesOtherwise, here is the result after compilation:
In file included from /Users/admin/Documents/Arduino/Serveur_1OUT_AURHENTIF_STATE/Serveur_1OUT_AURHENTIF_STATE.ino:15:0:
Reply
/Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/ESP8266WiFi.h: In function ‘void setup ()’:
/Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/ESP8266WiFi.h:27:8: error: expected unqualified-id before string constant
extern “C” {
^
In file included from /Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/WiFiClientSecure.h:41:0,
from /Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/WiFiServerSecure.h:20,
from /Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/ESP8266WiFi.h:41,
from /Users/admin/Documents/Arduino/Serveur_1OUT_AURHENTIF_STATE/Serveur_1OUT_AURHENTIF_STATE.ino:15:
/Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/WiFiClientSecureBearSSL.h:148:28: error: expected ‘}’ before end of line
#pragma GCC diagnostic push
^
/Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/WiFiClientSecureBearSSL.h: At global scope:
/Users/admin/Library/Arduino15/packages/esp8266/hardware/esp8266/2.5.1/libraries/ESP8266WiFi/src/WiFiClientSecureBearSSL.h:148:28: error: expected declaration before end of line
exit status 1
Compilation error for the Generic ESP8266 Module board
Greetings dear SARA SANTOS could you help me I have a question how could I place a second button without losing security but I can not do it I tried everything but I can not place it, please help me since this is the basis of my thesis I will wait for your prompt response . greetings from Ecuador
saludos querida SARA SANTOS me podria ayudar tengo una pregunta como podria colocar un segundo boton sin perder la seguridad pero no puedo lo puedo realizar lo intentado de todo pero no logro colocarlo, ayudeme porfavor ya que esta es la base de mi tesis esperare su pronta respuesta . saludos desde ecuador
Replyfeedback : Good job .
ReplyHi
Reply
Thanks for this nice post.it works fine for ESP8266-01.i want define GPIO-0 how can i add second on-off button to web page?
thanks in advanceHello
please, how can i change : request->send_P(200, “text/html”, index_html, processor); when i have index.html and logout.html codes ans js codes in different foldes ?thank you
ReplyHi.
Reply
Yes, you just need to adjust the file path.
Regards,
Sarahi thank you your answer, but it does not worl yet for me, i have a problem with the word : index_html , because my index.html is inside data file !!!
can you show me how i have to change this line please ?
Reply
request->send_P(200, “text/html”, index_html, processor);Hi.
You should specify the filesystem as follows:
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, “/index.html”, String(), false, processor);
});You can follow this tutorial to learn how to serve HTML files saved on the data folder:
https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/I hope this helps.
Reply
Regards,
Sara
Como posso adicionar mais 1 utilizador?
Fiz assim mas não consigo logar com nenhum:const char* http_username = “admin”;
const char* http_password = “admin”;const char* user1 = “arroz”;
const char* user1_password = “arroz”;server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request){
if(!request->authenticate(http_username, http_password) || !request->authenticate(user1, user1_password))
return request->requestAuthentication();server.on(“/update”, HTTP_GET, [] (AsyncWebServerRequest *request) {
Reply
if(!request->authenticate(http_username, http_password) || !request->authenticate(user1, user1_password))
return request->requestAuthentication();Hey,
Very nice tutorial as always!
Is there a possibility to change the style of the login?Thank you for any help in advance!
Regards,
Reply
ImmanuelHi! I tried to use your example and get this errors: “Uncaught ReferenceError: logoutButton is not defined” and “Uncaught ReferenceError: toggleCheckbox is not defined”, logout button and check box dont work
ReplyHi there
Reply
i tried your project and i got this error “AsyncTCP.h: No such file or directory
” so where can i find AsyncTCP.h file.thanksHi
Reply
Click the following link to download the library:https://github.com/me-no-dev/AsyncTCP/archive/refs/heads/master.zip
In the Arduino IDE, go to Sketch > Include Library > Add ZIP library.
Regards,
Sarai have problems while changing the username and password on webpage.
can you please help me ?
when i define global values out of setup()
i can use them in this form :
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request) {
if(!request->authenticate(hUsername, hPassword)){
return request->requestAuthentication();
}
Serial.println(“root /index.html should be here!!”);
});but when my user decide to change those usernames and pass
Reply
the program returns wrong value : and then crashes
.
excuse me for my poor english .
Hi, is it able to have multiple usernames & passwords for the http authentication?
ReplyWas having a hard time for the logout for ESP8266. There was no documentation to do it, you did great thanks!
ReplyHello, How are you?
Reply
I just want to know how can I login to wifi network using esp32, there are a lot of networks that needs to login before access to the internet, how can I login using esp32. Thank you?Hello, I am new to programming and this my first time I visit this quote
Reply
I would like to use a wifi manager and have an authentication page
And use my esp 8266 in wifi repeater mode and have access to my esp8266 even if it is not connected to any network I do not want it to be able to restart if it has missed or c connectedSara,
Reply
everything works great, but I couldn’t get more buttons…
Could you make it work with an option for more buttons?Hi, in the projects “ESP32-CAM Car Robot” you use the library “esp_http_server.h” instead of “ESPAsyncWebServer.h”
Reply
How can i use Authentication with esp_http_server.h ?
Thank you so much.I am wondering how all this could be done if I had all the files (index.html, style.css for the root webpage(index.html) and logout.html) in SPIFFS inside the folder “data”.
The line: Logout would be inside index.html file? and inside the script tags of this html file would be the definition of the logoutButton function? here in this function xhr is used, how that can be changed so as not having xhr but only SSE events inside my sketch?
we would have inside sketch something like that: (??)
// Route for root / web page
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request) {
if(!request->authenticate(http_username, http_password))
return request->requestAuthentication();
request->send(SPIFFS, “/index.html”, “text/html”);
});// Route to load style.css file
server.on(“/style.css”, HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, “/style.css”, “text/css”);
});server.on(“/logout”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send(401);
});server.on(“/logged-out”, HTTP_GET, [](AsyncWebServerRequest *request){
Reply
request->send(SPIFFS, “logout.html”, “text/html”);
});Hello Sara,
With an ESP8266-01, I would like to carry out a circuit allowing the switching of an output (for example activating a relay) and an entry of detection of an event (for the opening of a door) with an authentication by words of pass. I failed to achieve this. However, I made and modified two of your sketches.
1- Sketche for the web server with password authentication that I modified in two outputs.
2- Sketche to warn via Telegram when a door is open, I changed it for two doors and it works perfectly.With these two sketches, I wanted to transform them to have an output order (relay) and an entry (door detection) with password for the internet all via Telegram. But I can’t do it, and I have mistakes. I didn’t find this sketche on your presentation Internet page but maybe you have it somewhere? If not, do you think of such an achievement soon? With my thanks for your answer. Best regards. Jean Yves
ReplyHello Sara,
I love your nice tutorials. They helped me a much getting started with ESPs.I have the same problems logging out like others befor. It seems that it doesn’t work. I found out that you need to close the whole browser, closing only the website-tab from the tabbar is not enough.
Anyway, I browse a bit about logging out from a simple HTTP connection and it looks like I found a way to do.xhr.open(“GET”, “/logout”, true, “log”, “out”);
I simply open the XMLHttpRequest() with a “dummy login” (User=”log”, Password=”out”). The connection is now authorized with this new dumm login.
If you then try to open the “/” page (also works in the same tab) the “request->authenticate(http_username, http_password))” returns “false” and you will be asked for the correct login.
Thanks a lot,
Reply
DominikCODE NOT WORKING
ReplyHi, what a wonderful tutorials those ones you make, thank you so mucho for all of them.
I need to ask you something about it: I’m working on an applicatio that in certain cases updates one page at a regular intervals and because of that every time the page is updated it ask me to load again the credentials but, the authentication emerging window doesn’t shows the checkbox to allow the browser to remember the user and password, just like the authentication window you showed. How can I make the browser to allow remember the user and password?. Thanks in advance for the help.
ReplyHi, testing the login/logout code in February 2025 in the latest version of well-known browsers, using Dominik’s (see above) suggestion of a dummy login (which defintiely makes it better but doesn’t solve all problems)
Firefox/Librewolf : behaviour as exptected: logout actually logs you out and clicking ‘return to homepage’ requires you to enter credentials again
Chrome/Opera/Edge : code NOT working, clicking ‘return to homepage’ immediately logs you in again using the credentials that worked, DESPITE using the dummy credentials “log”/”out”. Even closing the tab makes NO difference.
Please revisit this problem and offer a solution that works with current browsers.
ReplyHi Sara,
I am using the following:
esp32 core 3.0.7
ESPAsyncWebSrv 1.2.9 by dvarrelI just tested again and Firefox/LibreWolf works as expected. Chrome/Opera/Edge fail.
When I visit my page I am prompted for username/pwd, I supply these and I get to see the page. On this (configuration) page there are some buttons, clicking them will get my ESP to do something eg light an LED. So far so good.
When I logout of the page (I have a button for that) I get the “Logged out. Return to homepage. Note: close all web browser tabs to complete the logout process.” page. Now if I click the back arrow in my Chrome/Opera/Edge browser I get back to the configuration page and clicking one of the buttons STILL gets the ESP to perform the action!
When I do the same in FireFox/LibreWolf I also still get to see the configuration page but as soon as I click a button I am prompted for username/pwd again (as it should).
If after logging out I click ‘Return to homepage’ then in Chrome/Opera/Edge I immediately get to the page again (as if I never logged out), in Firefox/LibreWolf I need to enter username/pwd again.
I made sure there were no other tabs open. It looks liks every browser based on Chromium has some caching mechanism that does not respect the logout.
ReplyHi Sara,
I have done some testing using the very code of the project above and have reached the following conclusion, for you to verify:
In function logoutButton:
xhr.open(“GET”, “/logout”, true); -> code WORKS in Chromium based browsers, code FAILS in Firefox
if I change it (Dominik’s suggestion above) to:
xhr.open(“GET”, “/logout”, true, “log”, “out”); -> code FAILS in Chromium based browsers, code WORKS in Firefox
I don’t understand the mechanism behind this. The problem is that there seems to be NO way to get it to work in ALL browers (Chromium based AND Firefox).
The temporary solution I have is this change to your code:
Logout Chromium
Logout Firefox…
function logoutButton() {
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “/logout”, true);
xhr.send();
setTimeout(function(){ window.open(“/logged-out”,”_self”); }, 1000);
}
function logoutButtonFF() {
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “/logout”, true, “log”, “out”);
xhr.send();
setTimeout(function(){ window.open(“/logged-out”,”_self”); }, 1000);
}Can you please investigate and confirm this and if possible come up with a solution?
Kind regards,
edwinov
ReplyMy post above failed to correctly display some code but I added a SECOND button with onclick = “logoutButtonFF()”.
ReplyHi Sara,
Thanks for your reply.
I am now using the exact libraries you link to:
Version 3.7.2 ofhttps://github.com/ESP32Async/ESPAsyncWebServer
Version 3.3.8 ofhttps://github.com/ESP32Async/AsyncTCPAnd STILL the same problem.
Chrome works fine. Firefox not. In Firefox even closing the tab does not make a difference, when visiting the page again I do not have to log in and can still access the slider.
Again, using
xhr.open(“GET”, “/logout”, true, “log”, “out”);
instead of
xhr.open(“GET”, “/logout”, true);
reverses everything: Chrome fails and Firefox works.
Please at least install Firefox and see for yourself.
There has to be some solution that works on all browsers.
Kind regards,
edwinov
ReplyHi Sara,
Has my previous comment been deleted?
I posted that I am now using the exact versions you refer to:
v3.7.6. of ESP32Async/ESPAsyncWebServer
v3.3.8 of ESP32Async/AsyncTCPAnd that I STILL have the same problem.
xhr.open(“GET”, “/logout”, true); -> works on Chrome, fails on Firefox
xhr.open(“GET”, “/logout”, true ,”foo”, “bar”); -> fails on Chrome, works on FirefoxSurely there has to be a way to make it work on both.
Kind regards,
edwinov
ReplyHi.
No. Your comment was not deleted.
We don’t delete comments unless they are inappropriate.It seems that issue is related to the way Firefox handles the logout. It caches the credentials. So, to logo out, what you’re doing is sending a wrong username and password, which works. I think this comment explains pretty well what is happening:https://github.com/arangodb/arangodb/issues/688#issuecomment-37061076
I tried two new different methods, include the one you’re suggesting. I couldn’t find a way to make it work on both chrome and Firefox.
In Firefox, if you logout and close the web browser window, when yo try to access again, it will ask for the credentials again.
So, I guess this is a limitation. Make sure to close the web browser window, after logging out.Regards,
Reply
Sara
