diff --git a/src/WebApi_mqtt.cpp b/src/WebApi_mqtt.cpp
index 78cbbd0..3083851 100644
--- a/src/WebApi_mqtt.cpp
+++ b/src/WebApi_mqtt.cpp
@@ -8,6 +8,7 @@
 #include "Configuration.h"
 #include "MqttHassPublishing.h"
 #include "MqttSettings.h"
+#include "WebApi.h"
 #include "helper.h"
 
 void WebApiMqttClass::init(AsyncWebServer* server)
@@ -54,6 +55,10 @@ void WebApiMqttClass::onMqttStatus(AsyncWebServerRequest* request)
 
 void WebApiMqttClass::onMqttAdminGet(AsyncWebServerRequest* request)
 {
+    if (!WebApi.checkCredentials(request)) {
+        return;
+    }
+
     AsyncJsonResponse* response = new AsyncJsonResponse(false, MQTT_JSON_DOC_SIZE);
     JsonObject root = response->getRoot();
     const CONFIG_T& config = Configuration.get();
@@ -83,6 +88,10 @@ void WebApiMqttClass::onMqttAdminGet(AsyncWebServerRequest* request)
 
 void WebApiMqttClass::onMqttAdminPost(AsyncWebServerRequest* request)
 {
+    if (!WebApi.checkCredentials(request)) {
+        return;
+    }
+
     AsyncJsonResponse* response = new AsyncJsonResponse(false, MQTT_JSON_DOC_SIZE);
     JsonObject retMsg = response->getRoot();
     retMsg[F("type")] = F("warning");
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 357f525..a9bed45 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -100,7 +100,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     // redirect to login page if not logged in and trying to access a restricted page
     const publicPages = ['/', '/login', '/about', '/info/network', '/info/system', '/info/ntp', '/info/mqtt',
-        '/settings/mqtt', '/settings/inverter', '/firmware/upgrade', '/settings/config', ];
+        '/settings/inverter', '/firmware/upgrade', '/settings/config', ];
     const authRequired = !publicPages.includes(to.path);
     const loggedIn = localStorage.getItem('user');
 
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 2ada955..47f3367 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -218,6 +218,7 @@
 import { defineComponent } from 'vue';
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import { handleResponse, authHeader } from '@/utils/authentication';
 import type { MqttConfig } from "@/types/MqttConfig";
 
 export default defineComponent({
@@ -240,8 +241,8 @@ export default defineComponent({
     methods: {
         getMqttConfig() {
             this.dataLoading = true;
-            fetch("/api/mqtt/config")
-                .then((response) => response.json())
+            fetch("/api/mqtt/config", { headers: authHeader() })
+                .then(handleResponse)
                 .then((data) => {
                     this.mqttConfigList = data;
                     this.dataLoading = false;
@@ -255,15 +256,10 @@ export default defineComponent({
 
             fetch("/api/mqtt/config", {
                 method: "POST",
+                headers: authHeader(),
                 body: formData,
             })
-                .then(function (response) {
-                    if (response.status != 200) {
-                        throw response.status;
-                    } else {
-                        return response.json();
-                    }
-                })
+                .then(handleResponse)
                 .then(
                     (response) => {
                         this.alertMessage = response.message;