Adding support for enabling/disabling authentication

Author: jasontaylordev

src/Frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import { RouterView } from "vue-router";
 import PageFooter from "./components/PageFooter.vue";
 import PageHeader from "./components/PageHeader.vue";
@@ -12,16 +12,24 @@ import { useAuthStore } from "@/stores/AuthStore";
 
 const { authenticate } = useAuth();
 const authStore = useAuthStore();
-const { isAuthenticating, isAuthenticated } = storeToRefs(authStore);
+const { isAuthenticating, isAuthenticated, authEnabled } = storeToRefs(authStore);
+const shouldShowApp = computed(() => !authEnabled.value || isAuthenticated.value);
 
 onMounted(async () => {
   try {
     // Attempt to authenticate when the app first loads
     await authStore.refresh();
 
+    // If authentication is not enabled, skip authentication
+    if (!authStore.authEnabled) {
+      console.debug("Authentication is disabled");
+      authStore.setAuthenticating(false);
+      return;
+    }
+
     // Check if auth config is available
     if (!authStore.authConfig) {
-      console.debug("Auth configuration not available, skipping authentication");
+      console.debug("Authentication is enabled but configuration not available");
       authStore.setAuthenticating(false);
       return;
     }
@@ -53,7 +61,7 @@ onMounted(async () => {
       <p class="auth-loading-text">Authenticating...</p>
     </div>
   </div>
-  <template v-else-if="isAuthenticated">
+  <template v-if="shouldShowApp">
     <page-header />
     <div class="container-fluid" id="main-content">
       <RouterView />

src/Frontend/src/composables/useAuthenticatedFetch.ts

@@ -1,26 +1,38 @@
 import { useAuthStore } from "@/stores/AuthStore";
 
+const UNAUTHENTICATED_ENDPOINTS = ["/api/authentication/configuration"];
+
+function isUnauthenticatedEndpoint(url: string): boolean {
+  return UNAUTHENTICATED_ENDPOINTS.some((endpoint) => url.includes(endpoint));
+}
+
 /**
  * Authenticated fetch wrapper that automatically includes JWT token
- * in the Authorization header for all requests
+ * in the Authorization header when authentication is enabled.
  */
-export async function authFetch(input: RequestInfo, init?: RequestInit): Promise<Response> {
+export function authFetch(input: RequestInfo, init?: RequestInit): Promise<Response> {
   const authStore = useAuthStore();
-  const token = authStore.token;
-
-  // Allow unauthenticated requests to the auth configuration endpoint
   const url = typeof input === "string" ? input : input.url;
-  if (url.includes("/api/authentication/configuration")) {
-    return await fetch(input, init);
+
+  // Allow unauthenticated requests to specific endpoints
+  if (isUnauthenticatedEndpoint(url)) {
+    return fetch(input, init);
+  }
+
+  // If authentication is disabled, make request without token
+  if (!authStore.authEnabled) {
+    return fetch(input, init);
   }
 
-  // todo: potentially handle token refresh here if expired, however it shouldnt be required due to silent renew
+  // If authentication is enabled, require a token
+  // TODO: potentially handle token refresh here if expired, however it shouldnt be required due to silent renew
+  const token = authStore.token;
   if (!token) {
     throw new Error("No authentication token available. Please authenticate first.");
   }
 
   const headers = new Headers(init?.headers);
   headers.set("Authorization", `Bearer ${token}`);
 
-  return await fetch(input, { ...init, headers });
+  return fetch(input, { ...init, headers });
 }

src/Frontend/src/stores/AuthStore.ts

@@ -1,4 +1,4 @@
-import { defineStore } from "pinia";
+import { acceptHMRUpdate, defineStore } from "pinia";
 import { ref } from "vue";
 import { useServiceControlStore } from "./ServiceControlStore";
 import type { AuthConfig } from "@/types/auth";
@@ -19,14 +19,16 @@ export const useAuthStore = defineStore("auth", () => {
   const isAuthenticating = ref(false);
   const authError = ref<string | null>(null);
   const authConfig = ref<AuthConfig | null>(null);
+  const authEnabled = ref(true);
   const loading = ref(false);
 
   async function refresh() {
     loading.value = true;
     try {
       const config = await getAuthConfig();
       if (config) {
-        authConfig.value = transformToAuthConfig(config);
+        authEnabled.value = config.enabled;
+        authConfig.value = config.enabled ? transformToAuthConfig(config) : null;
       }
     } finally {
       loading.value = false;
@@ -38,7 +40,7 @@ export const useAuthStore = defineStore("auth", () => {
       const [, data] = await serviceControlStore.fetchTypedFromServiceControl<AuthConfigResponse>("authentication/configuration");
       return data;
     } catch (err) {
-      console.error("Error fetching auth config information", err);
+      console.error("Error fetching auth configuration", err);
       return null;
     }
   }
@@ -65,7 +67,6 @@ export const useAuthStore = defineStore("auth", () => {
     isAuthenticated.value = !!newToken;
 
     if (newToken) {
-      // Store token in sessionStorage for persistence across page reloads
       sessionStorage.setItem("auth_token", newToken);
     } else {
       sessionStorage.removeItem("auth_token");
@@ -99,6 +100,7 @@ export const useAuthStore = defineStore("auth", () => {
     isAuthenticating,
     authError,
     authConfig,
+    authEnabled,
     loading,
     refresh,
     setToken,
@@ -108,3 +110,9 @@ export const useAuthStore = defineStore("auth", () => {
     setAuthError,
   };
 });
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot));
+}
+
+export type AuthStore = ReturnType<typeof useAuthStore>;