diff --git a/docs/widgets/services/esphome.md b/docs/widgets/services/esphome.md
index e14431fd8..07e511e37 100644
--- a/docs/widgets/services/esphome.md
+++ b/docs/widgets/services/esphome.md
@@ -16,4 +16,5 @@ To group both `offline` and `unknown` devices together, users should use the `of
 widget:
   type: esphome
   url: http://esphome.host.or.ip:port
+  key: myesphomecookie # only if auth enabled, get the value from a request from the frontend e.g. `authenticated=myesphomecookie`
 ```
diff --git a/src/utils/proxy/handlers/credentialed.js b/src/utils/proxy/handlers/credentialed.js
index 870d5b155..f09d0fe94 100644
--- a/src/utils/proxy/handlers/credentialed.js
+++ b/src/utils/proxy/handlers/credentialed.js
@@ -84,6 +84,10 @@ export default async function credentialedProxyHandler(req, res, map) {
         headers.Key = `${widget.key}`;
       } else if (widget.type === "myspeed") {
         headers.Password = `${widget.password}`;
+      } else if (widget.type === "esphome") {
+        if (widget.key) {
+          headers.Cookie = `authenticated=${widget.key}`;
+        }
       } else {
         headers["X-API-Key"] = `${widget.key}`;
       }
diff --git a/src/widgets/esphome/widget.js b/src/widgets/esphome/widget.js
index c5a87b682..5a628ad88 100644
--- a/src/widgets/esphome/widget.js
+++ b/src/widgets/esphome/widget.js
@@ -1,8 +1,8 @@
-import genericProxyHandler from "utils/proxy/handlers/generic";
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
 
 const widget = {
   api: "{url}/ping",
-  proxyHandler: genericProxyHandler,
+  proxyHandler: credentialedProxyHandler,
 };
 
 export default widget;