feat: add auth wall to report issue modal (#1332)

Signed-off-by: Efren Lim <[email protected]>

Author: emlimlf

frontend/app/components/shared/modules/report/store/report.store.ts

@@ -3,11 +3,20 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import type { ReportDataForm } from '~/components/shared/modules/report/types/report.types';
+import { useAuth } from '~~/composables/useAuth';
 
 export const useReportStore = defineStore('report', () => {
   const isReportModalOpen = ref(false);
   const reportDataDefaults = ref<Partial<ReportDataForm>>({});
+
+  const { isAuthenticated, login } = useAuth();
+
   const openReportModal = (defaults: Partial<ReportDataForm> = {}) => {
+    if (!isAuthenticated.value) {
+      login(window.location.pathname + window.location.search + window.location.hash);
+      return;
+    }
+
     reportDataDefaults.value = defaults;
     isReportModalOpen.value = true;
   };

frontend/composables/useAuth.ts

@@ -25,6 +25,16 @@ const setSilentLoginAttempted = (value: boolean): void => {
   localStorage.setItem('lfx-silent-login-attempted', value.toString());
 };
 
+const getWasUserLoggedIn = (): boolean => {
+  if (!process.client) return false;
+  return localStorage.getItem('lfx-user-logged-in') === 'true';
+};
+
+const setWasUserLoggedIn = (value: boolean): void => {
+  if (!process.client) return;
+  localStorage.setItem('lfx-user-logged-in', value.toString());
+};
+
 export const useAuth = () => {
   // Fetch user data from server
   const { data: userData, refresh: refreshAuth } = useAsyncData<AuthData>(
@@ -47,14 +57,20 @@ export const useAuth = () => {
       authState.value = userData.value;
 
       // Attempt silent login if suggested by the server and not already attempted
-      if (userData.value.shouldAttemptSilentLogin && process.client && !getSilentLoginAttempted()) {
+      if (
+        userData.value.shouldAttemptSilentLogin &&
+        process.client &&
+        !getSilentLoginAttempted() &&
+        getWasUserLoggedIn() // Only attempt silent login if the user has logged in previously
+      ) {
         const currentPath =
           window.location.pathname + window.location.search + window.location.hash;
         login(currentPath, true);
       }
 
       if (userData.value.isAuthenticated) {
         setSilentLoginAttempted(false);
+        setWasUserLoggedIn(true);
       }
     }
   });
@@ -184,6 +200,8 @@ export const useAuth = () => {
         } else {
           await navigateTo(response.logoutUrl, { external: true });
         }
+
+        setWasUserLoggedIn(false);
       }
     } catch (error) {
       console.error('Logout error:', error);

frontend/server/middleware/jwt-auth.ts

@@ -13,9 +13,14 @@ const isJWT = (token: string) => {
 export default defineEventHandler(async (event) => {
   const url = getRouterParam(event, '_') || event.node.req.url || '';
 
-  const protectedRoutes = ['/api/chat/'];
+  const protectedRoutes = ['/api/report'];
+  const protectedAndPermissionRoutes = ['/api/chat'];
 
-  const isProtectedRoute = protectedRoutes.some((route) => url.startsWith(route));
+  const isProtectedRoute = [...protectedRoutes, ...protectedAndPermissionRoutes].some((route) =>
+    url.startsWith(route),
+  );
+
+  const isPermissionRequired = protectedAndPermissionRoutes.some((route) => url.startsWith(route));
 
   if (!isProtectedRoute) {
     return;
@@ -24,8 +29,6 @@ export default defineEventHandler(async (event) => {
   const config = useRuntimeConfig();
   const oidcToken = getCookie(event, 'auth_oidc_token');
 
-  // Read authorization header
-  // const authHeader = getHeader(event, 'authorization')
   if (!oidcToken) {
     throw createError({
       statusCode: 401,
@@ -42,7 +45,7 @@ export default defineEventHandler(async (event) => {
     if (decodedToken.original_id_token && isJWT(decodedToken.original_id_token)) {
       event.context.user = decodedToken;
 
-      if (!isLocal && !decodedToken.hasLfxInsightsPermission) {
+      if (!isLocal && isPermissionRequired && !decodedToken.hasLfxInsightsPermission) {
         throw createError({
           statusCode: 401,
           statusMessage: `User does not belong to ${config.lfxAuth0TokenClaimGroupName}`,
@@ -58,7 +61,7 @@ export default defineEventHandler(async (event) => {
     console.error('JWT verification failed:', jwtError);
     throw createError({
       statusCode: 401,
-      statusMessage: 'Invalid JWT token',
+      statusMessage: jwtError instanceof Error ? jwtError.message : 'Invalid JWT token',
     });
   }
 });