refactor(greenhouse): add TypeScript types and Zod validation for auth system (#1532)

* chore(greenhouse): adds authentication types to improve readability and simplify code

* chore(greenhouse): fix tests

* chore(greenhouse): remove @ts-expect-error directives

* chore(greenhouse): addressed copilot issues

* chore(greenhouse): removed warnings

* chore(greenhouse): adds changeset

* chore(greenhouse): added appProp basePath to the readme

* chore(greenhouse): fix type

* chore(greenhouse): removes as OidcSessionInstance

Author: ArtieReus

.changeset/happy-pigs-think.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-greenhouse": patch
+---
+
+Correctly extract organisation name from URL with basePath and add TypeScript types and Zod validation for auth system.

apps/greenhouse/README.md

@@ -52,6 +52,8 @@ These are the customizable application properties (appProps) that you can define
 - **demoOrg** (optional): `"demo"`. If the organization name matches this value, the app will use the demo user token for authentication.
 - **demoUserToken** (optional): `"token for demo user"`. Used for authentication if `demoOrg` and `demoUserToken` are set, and the organization name matches `demoOrg`.
   **Note:** This is ignored if `mockAuth` is set.
+- **basePath** (optional, default: `/`):  
+  Specifies the root path under which the application is served. Useful for deploying the app to a subdirectory. If not provided, defaults to the root path `/`.
 
 ## Contributing
 

apps/greenhouse/package.json

@@ -47,6 +47,7 @@
     "clean:cache": "rm -rf .turbo"
   },
   "dependencies": {
+    "@cloudoperators/greenhouse-auth-provider": "workspace:*",
     "@cloudoperators/juno-app-doop": "workspace:*",
     "@cloudoperators/juno-app-heureka": "workspace:*",
     "@cloudoperators/juno-app-supernova": "workspace:*",
@@ -55,7 +56,6 @@
     "@cloudoperators/juno-oauth": "workspace:*",
     "@cloudoperators/juno-ui-components": "workspace:*",
     "@cloudoperators/juno-url-state-provider": "workspace:*",
-    "@cloudoperators/greenhouse-auth-provider": "workspace:*",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.12.2",
     "@codemirror/state": "^6.5.4",
@@ -64,6 +64,7 @@
     "@tanstack/react-query": "5.90.21",
     "@tanstack/react-router": "1.161.3",
     "js-yaml": "4.1.1",
-    "lodash": "4.17.23"
+    "lodash": "4.17.23",
+    "zod": "4.3.6"
   }
 }

apps/greenhouse/src/Shell.tsx

@@ -16,6 +16,7 @@ import StoreProvider, { useGlobalsApiEndpoint } from "./components/StoreProvider
 import { AuthProvider, useAuth } from "./components/AuthProvider"
 import { routeTree } from "./routeTree.gen"
 import { getRouterBasePath } from "./utils/organizationResolver"
+import type { AuthContextValue, MockAuthValue } from "./types/auth"
 
 // Create a new query client instance
 const queryClient = new QueryClient()
@@ -44,24 +45,21 @@ export type AppProps = {
   authClientId?: string
   authIssuerUrl?: string
   demoOrg?: string
-  mockAuth?: boolean
+  mockAuth?: MockAuthValue
   demoUserToken?: string
   currentHost?: string
   enableHashedRouting?: boolean
   basePath?: string
 }
 
-const getUser = (auth: unknown) => ({
-  // @ts-expect-error - auth?.data type needs to be properly defined
-  organization: auth?.data?.raw?.groups?.find((g: any) => g.startsWith("organization:"))?.split(":")[1] ?? "",
-  // @ts-expect-error - auth?.data type needs to be properly defined
+const getUser = (auth: AuthContextValue) => ({
+  organization: auth?.data?.raw?.groups?.find((g) => g.startsWith("organization:"))?.split(":")[1] ?? "",
   supportGroups: auth?.data?.parsed?.supportGroups ?? [],
 })
 
 function App(props: AppProps) {
   const auth = useAuth()
   const apiEndpoint = useGlobalsApiEndpoint()
-  // @ts-expect-error - useAuth return type is not properly typed
   const token = auth?.data?.JWT
   // Create k8s client if apiEndpoint and token are available
   // @ts-expect-error - apiEndpoint type needs to be properly typed as string
@@ -75,7 +73,6 @@ function App(props: AppProps) {
    * want the app to use browser history.
    */
   router.update({
-    // @ts-expect-error - auth?.data type needs to be properly defined
     basepath: getRouterBasePath(auth?.data?.raw?.groups, props.basePath),
     context: { appProps: props, apiClient, user },
     stringifySearch: encodeV2,

apps/greenhouse/src/components/Auth.tsx

@@ -19,7 +19,6 @@ import { useAuth } from "./AuthProvider"
  *
  */
 const Auth = ({ children }: any) => {
-  // @ts-expect-error TS(2339): Property 'isProcessing' does not exist on type 'un... Remove this comment to see the full error message
   const { isProcessing: authIsProcessing, loggedIn: authLoggedIn, error: authError, login } = useAuth()
 
   if (authLoggedIn) {

apps/greenhouse/src/components/AuthProvider.test.tsx

@@ -23,11 +23,8 @@ describe("AuthProvider", () => {
     it("initializes default the oidc session but return error because no issuerUrl or clientId provided", () => {
       const wrapper = ({ children }: any) => <AuthProvider options={{}}>{children}</AuthProvider>
       const { result } = renderHook(() => useAuth(), { wrapper })
-      // @ts-expect-error TS(2531): Object is possibly 'null'.
       expect(result.current.loggedIn).toBe(false)
-      // @ts-expect-error TS(2531): Object is possibly 'null'.
       expect(result.current.isDemoMode).toBe(false)
-      // @ts-expect-error TS(2531): Object is possibly 'null'.
       expect(result.current.error).not.toBe(null)
     })
   })
@@ -107,6 +104,52 @@ describe("AuthProvider", () => {
       // @ts-expect-error TS(2531): Object is possibly 'null'.
       expect(result.current.data.parsed.groups).toEqual(mockAuthData.groups)
     })
+
+    it("preserves case in JSON string mockAuth data", () => {
+      const replaceStateSpy = vi.spyOn(window.history, "replaceState").mockImplementation(() => {})
+
+      // Test with mixed-case data that should NOT be lowercased
+      const mockAuthData = {
+        email: "Jane.Doe@Example.com",
+        name: "Jane Doe",
+        groups: ["organization:TestOrg", "team:DevTeam"],
+      }
+      const mockAuthDataString = JSON.stringify(mockAuthData)
+
+      const wrapper = ({ children }: any) => (
+        <AuthProvider options={{ mockAuth: mockAuthDataString }}>{children}</AuthProvider>
+      )
+
+      const { result } = renderHook(() => useAuth(), { wrapper })
+
+      expect(replaceStateSpy).toHaveBeenCalledTimes(1)
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
+      expect(result.current.data.raw.email).toEqual("Jane.Doe@Example.com")
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
+      expect(result.current.data.raw.name).toEqual("Jane Doe")
+      // @ts-expect-error TS(2531): Object is possibly 'null'.
+      expect(result.current.data.raw.groups).toContain("organization:TestOrg")
+    })
+
+    it("rejects invalid mockAuth values (number, array, etc)", () => {
+      const consoleWarnSpy = vi.spyOn(console, "warn").mockImplementation(() => {})
+
+      // Test with number (invalid)
+      const wrapper1 = ({ children }: any) => <AuthProvider options={{ mockAuth: 123 }}>{children}</AuthProvider>
+      const { result: result1 } = renderHook(() => useAuth(), { wrapper: wrapper1 })
+      expect(result1.current.loggedIn).toBe(false)
+      expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining("Invalid mockAuth value"), 123)
+
+      consoleWarnSpy.mockClear()
+
+      // Test with array (invalid)
+      const wrapper2 = ({ children }: any) => <AuthProvider options={{ mockAuth: [1, 2, 3] }}>{children}</AuthProvider>
+      const { result: result2 } = renderHook(() => useAuth(), { wrapper: wrapper2 })
+      expect(result2.current.loggedIn).toBe(false)
+      expect(consoleWarnSpy).toHaveBeenCalledWith(expect.stringContaining("Invalid mockAuth value"), [1, 2, 3])
+
+      consoleWarnSpy.mockRestore()
+    })
   })
 
   describe("initializes demo auth session", () => {

apps/greenhouse/src/components/AuthProvider.tsx

@@ -7,9 +7,11 @@ import React, { createContext, useContext, useState, useMemo, useRef, useEffect
 import { oidcSession, mockedSession, tokenSession } from "@cloudoperators/juno-oauth"
 import { createAuthStore, AuthStore } from "@cloudoperators/greenhouse-auth-provider"
 import { extractOrganizationName } from "../utils/organizationResolver"
+import { TokenDataSchema } from "../types/auth"
+import type { OidcSessionState, AuthContextValue, OidcSessionInstance, TokenData, MockAuthValue } from "../types/auth"
 
-const setOrganizationToUrl = (groups: any, enableHashedRouting: boolean) => {
-  const orgName = groups?.find((g: any) => g.startsWith("organization:"))?.split(":")[1]
+const setOrganizationToUrl = (groups: string[] | undefined, enableHashedRouting: boolean) => {
+  const orgName = groups?.find((g: string) => g.startsWith("organization:"))?.split(":")[1]
 
   if (!orgName) return
 
@@ -34,43 +36,58 @@ const setOrganizationToUrl = (groups: any, enableHashedRouting: boolean) => {
   } else {
     url.pathname = pathWithOrg
   }
-  // @ts-expect-error TS(2345): Argument of type 'null' is not assignable to param... Remove this comment to see the full error message
-  window.history.replaceState(null, null, url.href)
+  window.history.replaceState({}, "", url.href)
 }
 
-function resolveMockAuth(value: any) {
-  const result = { isMock: false, parsedAuth: null }
-
+/**
+ * Resolves mock authentication configuration with runtime validation
+ *
+ * @param value - Can be:
+ *   - boolean: true enables mock with default token, false disables
+ *   - TokenData: Plain object with token attributes (iss, sub, aud, exp, iat, nonce, email, groups, etc.)
+ *   - string: "true" or JSON string that will be parsed
+ *
+ * @returns Object with isMock flag and parsedAuth token data
+ */
+function resolveMockAuth(value: MockAuthValue): { isMock: boolean; parsedAuth: TokenData | null } {
   if (typeof value === "boolean") {
-    // If value is a boolean, set `isMock` accordingly
-    // and return an empty object for `true`, otherwise `null`
-    result.isMock = value
-    // @ts-expect-error TS(2322): Type '{} | null' is not assignable to type 'null'.
-    result.parsedAuth = value ? {} : null
-  } else if (typeof value === "string") {
-    const trimmed = value.trim().toLowerCase()
-    if (trimmed === "true") {
-      // If the string is "true", treat it as a mock with an empty object
-      result.isMock = true
-      // @ts-expect-error TS(2322): Type '{}' is not assignable to type 'null'.
-      result.parsedAuth = {}
-    } else {
-      try {
-        // Try parsing the string as JSON
-        result.isMock = true
-        result.parsedAuth = JSON.parse(value)
-      } catch {
-        result.isMock = false
-        result.parsedAuth = null
+    return {
+      isMock: value,
+      parsedAuth: value ? {} : null,
+    }
+  }
+
+  if (typeof value === "string") {
+    const trimmed = value.trim()
+    // Only lowercase for boolean check, not for JSON parsing
+    if (trimmed.toLowerCase() === "true") {
+      return { isMock: true, parsedAuth: {} }
+    }
+
+    // Try parsing JSON string (use original case-sensitive trimmed string)
+    try {
+      const parsed = JSON.parse(trimmed)
+      // Validate the parsed JSON
+      const validation = TokenDataSchema.safeParse(parsed)
+      if (validation.success) {
+        return { isMock: true, parsedAuth: validation.data }
       }
+    } catch {
+      // Invalid JSON, return disabled mock
     }
-  } else if (typeof value === "object" && value !== null) {
-    // If value is a non-null object, treat it as a mock
-    result.isMock = true
-    result.parsedAuth = value
+
+    return { isMock: false, parsedAuth: null }
+  }
+
+  // It's an object - validate with Zod to ensure runtime safety
+  const validation = TokenDataSchema.safeParse(value)
+  if (validation.success) {
+    return { isMock: true, parsedAuth: validation.data }
   }
 
-  return result
+  // Invalid object (e.g., array, number, invalid structure)
+  console.warn("Invalid mockAuth value: expected boolean, TokenData object, or JSON string", value)
+  return { isMock: false, parsedAuth: null }
 }
 
 const initializeDemoAuth = (
@@ -163,14 +180,13 @@ const initializeRealOidc = (
   })
 }
 
-// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
-const AuthContext = createContext()
+const AuthContext = createContext<AuthContextValue | undefined>(undefined)
 
 export const AuthProvider = ({ options, children }: any) => {
-  const [authData, setAuthData] = useState(null)
+  const [authData, setAuthData] = useState<OidcSessionState | null>(null)
   const [isDemoMode, setIsDemoMode] = useState(false)
-  const [oidcError, setOidcError] = useState(null)
-  const oidcInstance = useRef(null)
+  const [oidcError, setOidcError] = useState<string | null>(null)
+  const oidcInstance = useRef<OidcSessionInstance | null>(null)
   const pluginAuthRef = useRef<AuthStore | null>(null)
 
   if (!pluginAuthRef.current) {
@@ -201,7 +217,6 @@ export const AuthProvider = ({ options, children }: any) => {
     if (demoOrg === orgName && !isMock) {
       console.debug("Initializing new demo auth session")
       setIsDemoMode(true)
-      // @ts-ignore
       oidcInstance.current = initializeDemoAuth(
         orgName,
         demoUserToken,
@@ -245,42 +260,34 @@ export const AuthProvider = ({ options, children }: any) => {
 
     const error = "Invalid OIDC configuration, issuerURL and clientID are required"
     console.error(error)
-    // @ts-expect-error TS(2345): Argument of type '"Invalid OIDC configuration, iss... Remove this comment to see the full error message
     setOidcError(error)
-    return
+    return null
   }
 
   // Memoized login function
   const login = () => {
-    // @ts-expect-error TS(2339): Property 'login' does not exist on type 'never'.
-    oidcInstance.current?.login?.()
+    oidcInstance.current?.login()
   }
 
   // Memoized logout function
-  const logout = () => {
-    // @ts-expect-error TS(2339): Property 'logout' does not exist on type 'never'.
-    oidcInstance.current?.logout?.({
-      resetOIDCSession: true,
-      silent: true,
+  const logout = (options?: { resetOIDCSession?: boolean; silent?: boolean }) => {
+    oidcInstance.current?.logout({
+      resetOIDCSession: options?.resetOIDCSession ?? true,
+      silent: options?.silent ?? true,
     })
     setAuthData(null)
     setOidcError(null)
   }
 
   useEffect(() => {
-    // @ts-expect-error TS(2322): Type 'null | undefined' is not assignable to type ... Remove this comment to see the full error message
     oidcInstance.current = initializeOidc()
   }, [options])
 
   const contextValue = useMemo(
     () => ({
-      // @ts-expect-error TS(2339): Property 'isProcessing' does not exist on type 'ne... Remove this comment to see the full error message
       isProcessing: authData ? authData?.isProcessing : false,
-      // @ts-expect-error TS(2339): Property 'loggedIn' does not exist on type 'never'... Remove this comment to see the full error message
       loggedIn: authData ? authData?.loggedIn : false,
-      // @ts-expect-error TS(2339): Property 'error' does not exist on type 'never'.
       error: authData ? authData?.error : oidcError,
-      // @ts-expect-error TS(2339): Property 'auth' does not exist on type 'never'.
       data: authData ? authData?.auth : null,
       pluginAuth,
       isDemoMode,
@@ -293,6 +300,10 @@ export const AuthProvider = ({ options, children }: any) => {
   return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
 }
 
-export const useAuth = () => {
-  return useContext(AuthContext)
+export const useAuth = (): AuthContextValue => {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider")
+  }
+  return context
 }

apps/greenhouse/src/components/NotificationsContainer.tsx

@@ -9,7 +9,6 @@ import { Messages } from "@cloudoperators/juno-messages-provider"
 import { useAuth } from "./AuthProvider"
 
 const NotificationsContainer = () => {
-  // @ts-expect-error TS(2339): Property 'isDemoMode' does not exist on type 'unkn... Remove this comment to see the full error message
   const { isDemoMode } = useAuth()
 
   return (

apps/greenhouse/src/components/nav/PluginNav.tsx

@@ -70,7 +70,6 @@ const PluginNav = () => {
   const isAdminRoute = matches.some((match) => match.routeId.startsWith("/admin"))
   // If we're on /admin route, set activeApp to "admin", otherwise use extension ID
   const activeApp = isAdminRoute ? "admin" : extensionIdMatch
-  // @ts-expect-error TS(2339): Property 'data' does not exist on type 'unknown'.
   const { data: authData, loggedIn, login, logout } = useAuth()
 
   const navigateToApp = (appId: string) => {

apps/greenhouse/src/hooks/useApi.ts

@@ -14,7 +14,6 @@ import { useAuth } from "../components/AuthProvider"
 // get plugin configs from k8s api
 // @ts-ignore
 const useApi = () => {
-  // @ts-expect-error TS(2339): Property 'data' does not exist on type 'unknown'.
   const { data: authData } = useAuth()
   const apiEndpoint = useGlobalsApiEndpoint()
   const assetsHost = useGlobalsAssetsHost()