Optional fetch with credentials

docs/configuration.md

@@ -131,6 +131,7 @@ services:
         tag: "other"
         url: "http://192.168.0.151/admin"
         type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`
+        # fetchWithCredentials: true # optional adds cookies to fetch calls for external data. Useful for services running behind SSO clients e.g. Authelia
         target: "_blank" # optional html a tag target attribute
         # class: "green" # optional custom CSS class for card, useful with custom stylesheet
         # background: red # optional color for card to set color directly without custom stylesheet

docs/development.md

@@ -27,3 +27,27 @@ body #app.theme-my-awesome-theme. { ... }
 ...
 @import "./themes/my-awesome-theme.scss";
 ```
+
+## Fetch Options
+
+In order to make your service work with the global `fetchWithCredentials` attribute, you need to include a call to `this.fetchOptions()` as the optional second parameter of your `fetch` call. This allows us to hook in and add global options for all fetch calls as needed.
+
+`fetchOptions()` itself takes an optional object just like the usual `fetch` param, and would conditionally add other options as needed.
+
+### Basic example
+```js
+fetch(
+  `${this.item.url}/api/health?apikey=${this.item.apikey}`,
+  this.fetchOptions()
+)
+```
+
+### Example with other fetch options
+```js
+fetch(
+  `${this.item.url}/api/v2/config`,
+  this.fetchOptions({
+    headers: { "X-Api-Key": `${this.item.apikey}` },
+  })
+)
+```

docs/troubleshooting.md

@@ -17,3 +17,18 @@ To resolve this, you can either:
 * Host all your target service under the same domain & port.
 * Modify the target sever configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
 * Use a cors proxy sever like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.
+
+
+## I use a single sign on tool, like Authelia. How do I get the service calls to not hit the login page?
+
+All the services use the JS `fetch` function. By default, a `fetch` call doesn't include the browser cookies that store your SSO session credentials. If you want to include cookie info in the API calls, you can add the global `fetchWithCredentials` attribute to your service item. Here's an example below for PiHole.
+
+```yml
+- name: "Pi-Hole"
+  logo: "assets/icons/pihole.svg"
+  url: "https://pihole.mydomain.com/admin"
+  type: "PiHole"
+  fetchWithCredentials: true
+```
+
+> **Note for developers:** Read the information in `docs/development.md` for how to make sure your service template works with `fetchWithCredentials`

src/assets/app.scss

@@ -13,7 +13,9 @@
   text-overflow: ellipsis;
 }
 
-html, body, body #app {
+html,
+body,
+body #app {
   height: 100%;
   background-color: var(--background);
 }
@@ -152,8 +154,8 @@ body {
           background-color: var(--highlight-hover);
         }
       }
-	.navbar-menu {
-      background-color: inherit;
+      .navbar-menu {
+        background-color: inherit;
       }
     }
     .navbar-end {

src/components/services/AdGuardHome.vue

@@ -74,16 +74,18 @@ export default {
   },
   methods: {
     fetchStatus: async function () {
-      this.status = await fetch(`${this.item.url}/control/status`, {
-        credentials: "include",
-      })
+      this.status = await fetch(
+        `${this.item.url}/control/status`,
+        this.fetchOptions()
+      )
         .then((response) => response.json())
         .catch((e) => console.log(e));
     },
     fetchStats: async function () {
-      this.stats = await fetch(`${this.item.url}/control/stats`, {
-        credentials: "include",
-      })
+      this.stats = await fetch(
+        `${this.item.url}/control/stats`,
+        this.fetchOptions()
+      )
         .then((response) => response.json())
         .catch((e) => console.log(e));
     },

src/components/services/Mealie.vue

@@ -52,12 +52,15 @@ export default {
   methods: {
     fetchStatus: async function () {
       if (this.item.subtitle != null) return; // omitting unnecessary ajax call as the subtitle is showing
-      this.meal = await fetch(`${this.item.url}/api/meal-plans/today/`, {
-        headers: {
-          Authorization: "Bearer " + this.item.apikey,
-          Accept: "application/json",
-        },
-      })
+      this.meal = await fetch(
+        `${this.item.url}/api/meal-plans/today/`,
+        this.fetchOptions({
+          headers: {
+            Authorization: "Bearer " + this.item.apikey,
+            Accept: "application/json",
+          },
+        })
+      )
         .then(function (response) {
           if (!response.ok) {
             throw new Error("Not 2xx response");
@@ -68,12 +71,15 @@ export default {
           }
         })
         .catch((e) => console.log(e));
-      this.stats = await fetch(`${this.item.url}/api/debug/statistics/`, {
-        headers: {
-          Authorization: "Bearer " + this.item.apikey,
-          Accept: "application/json",
-        },
-      })
+      this.stats = await fetch(
+        `${this.item.url}/api/debug/statistics/`,
+        this.fetchOptions({
+          headers: {
+            Authorization: "Bearer " + this.item.apikey,
+            Accept: "application/json",
+          },
+        })
+      )
         .then(function (response) {
           if (!response.ok) {
             throw new Error("Not 2xx response");

src/components/services/Medusa.vue

@@ -71,10 +71,12 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/v2/config`, {
-        credentials: "include",
-        headers: { "X-Api-Key": `${this.item.apikey}` },
-      })
+      fetch(
+        `${this.item.url}/api/v2/config`,
+        this.fetchOptions({
+          headers: { "X-Api-Key": `${this.item.apikey}` },
+        })
+      )
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);

src/components/services/OpenWeather.vue

@@ -65,7 +65,7 @@ export default {
       }
 
       const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${this.item.apiKey}&units=${this.item.units}`;
-      fetch(url)
+      fetch(url, this.fetchOptions())
         .then((response) => {
           if (!response.ok) {
             throw Error(response.statusText);

src/components/services/PaperlessNG.vue

@@ -58,12 +58,14 @@ export default {
         return;
       }
       const url = `${this.item.url}/api/documents/`;
-      this.api = await fetch(url, {
-        credentials: "include",
-        headers: {
-          Authorization: "Token " + this.item.apikey,
-        },
-      })
+      this.api = await fetch(
+        url,
+        this.fetchOptions({
+          headers: {
+            Authorization: "Token " + this.item.apikey,
+          },
+        })
+      )
         .then(function (response) {
           if (!response.ok) {
             throw new Error("Not 2xx response");

src/components/services/PiHole.vue

@@ -64,9 +64,8 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}/api.php`;
-      this.api = await fetch(url, {
-        credentials: "include",
-      })
+      const fetchOptions = this.fetchOptions();
+      this.api = await fetch(url, fetchOptions)
         .then((response) => response.json())
         .catch((e) => console.log(e));
     },

src/components/services/Ping.vue

@@ -50,11 +50,13 @@ export default {
   methods: {
     fetchStatus: async function () {
       const url = `${this.item.url}`;
-      fetch(url, {
-        method: "HEAD",
-        cache: "no-cache",
-        credentials: "include",
-      })
+      fetch(
+        url,
+        this.fetchOptions({
+          method: "HEAD",
+          cache: "no-cache",
+        })
+      )
         .then((response) => {
           if (!response.ok) {
             throw Error(response.statusText);

src/components/services/Radarr.vue

@@ -70,9 +70,10 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
+      fetch(
+        `${this.item.url}/api/health?apikey=${this.item.apikey}`,
+        this.fetchOptions()
+      )
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
@@ -94,9 +95,10 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
+      fetch(
+        `${this.item.url}/api/queue?apikey=${this.item.apikey}`,
+        this.fetchOptions()
+      )
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);

src/components/services/Sonarr.vue

@@ -70,9 +70,10 @@ export default {
   },
   methods: {
     fetchConfig: function () {
-      fetch(`${this.item.url}/api/health?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
+      fetch(
+        `${this.item.url}/api/health?apikey=${this.item.apikey}`,
+        this.fetchOptions()
+      )
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);
@@ -94,9 +95,10 @@ export default {
           console.error(e);
           this.serverError = true;
         });
-      fetch(`${this.item.url}/api/queue?apikey=${this.item.apikey}`, {
-        credentials: "include",
-      })
+      fetch(
+        `${this.item.url}/api/queue?apikey=${this.item.apikey}`,
+        this.fetchOptions()
+      )
         .then((response) => {
           if (response.status != 200) {
             throw new Error(response.statusText);

src/main.js

@@ -4,6 +4,7 @@ import "./registerServiceWorker";
 
 import "@fortawesome/fontawesome-free/css/all.css";
 
+import fetchOptions from "./mixins/fetchOptions.js";
 import "./assets/app.scss";
 
 Vue.config.productionTip = false;
@@ -14,6 +15,8 @@ Vue.component("DynamicStyle", {
   },
 });
 
+Vue.mixin(fetchOptions);
+
 new Vue({
   render: (h) => h(App),
 }).$mount("#app");

src/mixins/fetchOptions.js

@@ -0,0 +1,14 @@
+export default {
+  methods: {
+    fetchOptions(options = {}) {
+      if (
+        this.item &&
+        this.item.fetchWithCredentials &&
+        this.item.fetchWithCredentials == true
+      ) {
+        options.credentials = "include";
+      }
+      return options;
+    },
+  },
+};

vue.config.js

@@ -9,6 +9,9 @@ module.exports = {
       .loader("raw-loader")
       .end();
   },
+  configureWebpack: {
+    devtool: "source-map",
+  },
   publicPath: "",
   pwa: {
     manifestPath: "assets/manifest.json",