fix opa env varaible by intruducing a server side API

components/WfoAuthWithPolicy.tsx

@@ -35,7 +35,7 @@ type Policy =
 
 export const WfoAuthWithPolicy: FC<WfoAuthWithPolicyProps> = ({ children }) => {
   const { authActive } = useContext(OrchestratorConfigContext);
-  const { opaPublicBundleUrl, oidcClientId } = useGsoConfig();
+  const config = useGsoConfig();
   const { status: sessionStatus, session } = useWfoSession({
     required: authActive,
   });
@@ -46,8 +46,16 @@ export const WfoAuthWithPolicy: FC<WfoAuthWithPolicyProps> = ({ children }) => {
 
   useEffect(() => {
     const getPolicy = async () => {
+      if (!config) {
+        setPolicy({
+          loadedPolicy: null,
+          policyLoadingStatus: PolicyLoadingStatus.FAILED,
+        });
+        return;
+      }
+
       try {
-        const policyResult = await fetch(opaPublicBundleUrl);
+        const policyResult = await fetch(config.opaPublicBundleUrl);
         const policyWasm = await policyResult.arrayBuffer();
         const loadedPolicy = await loadPolicy(policyWasm);
 
@@ -74,7 +82,7 @@ export const WfoAuthWithPolicy: FC<WfoAuthWithPolicyProps> = ({ children }) => {
     }
 
     getPolicy();
-  }, [authActive, opaPublicBundleUrl, oidcClientId]);
+  }, [authActive, config]);
 
   const isAllowedHandler = (routerPath: string, resource?: string) => {
     if (session && policy.policyLoadingStatus === PolicyLoadingStatus.SUCCESS) {
@@ -88,7 +96,7 @@ export const WfoAuthWithPolicy: FC<WfoAuthWithPolicyProps> = ({ children }) => {
       const policyInput = {
         resource: resource ?? routerPath,
         active: true,
-        client_id: oidcClientId,
+        client_id: config?.oidcClientId ?? '',
         method: 'GET',
         ...profile,
       };
@@ -96,7 +104,7 @@ export const WfoAuthWithPolicy: FC<WfoAuthWithPolicyProps> = ({ children }) => {
       return policyTestResult[0].result === true;
     }
 
-    return true;
+    return false;
   };
 
   if (

configuration/configuration.ts

@@ -2,14 +2,6 @@ import {
   Environment,
   OrchestratorConfig,
 } from '@orchestrator-ui/orchestrator-ui-components';
-import getConfig from 'next/config';
-
-export type gsoConfig = {
-  opaPublicBundleUrl: string;
-  oidcClientId: string;
-};
-
-const { publicRuntimeConfig } = getConfig();
 
 const DEFAULT_GRAPHQL_CORE_ENDPOINT = 'http://localhost:8080/api/graphql';
 const DEFAULT_ORCHESTRATOR_API_BASE_URL = 'http://localhost:8080/api';
@@ -54,10 +46,3 @@ export const getInitialOrchestratorConfig = (): OrchestratorConfig => {
       process.env.SHOW_WORKFLOW_INFORMATION_LINK?.toLowerCase() === 'true',
   };
 };
-
-export const getInitialGsoConfig = (): gsoConfig => {
-  return {
-    opaPublicBundleUrl: publicRuntimeConfig.OPA_PUBLIC_BUNDLE_URL ?? '',
-    oidcClientId: publicRuntimeConfig.NEXTAUTH_CLIENT_ID ?? '',
-  };
-};

contexts/GsoConfigContext.tsx

 import React, { createContext, useContext, ReactNode } from 'react';
 
-interface GsoConfig {
+export interface GsoConfig {
   opaPublicBundleUrl: string;
   oidcClientId: string;
 }
 
-const defaultGsoConfig: GsoConfig = {
-  opaPublicBundleUrl: '',
-  oidcClientId: '',
-};
-
-const GsoConfigContext = createContext<GsoConfig>(defaultGsoConfig);
+const GsoConfigContext = createContext<GsoConfig | undefined>(undefined);
 
 interface GsoConfigProviderProps {
-  initialOrchestratorConfig: GsoConfig;
+  config?: GsoConfig;
   children: ReactNode;
 }
 
 export const GsoConfigProvider: React.FC<GsoConfigProviderProps> = ({
-  initialOrchestratorConfig,
+  config,
   children,
 }) => {
   return (
-    <GsoConfigContext.Provider value={initialOrchestratorConfig}>
+    <GsoConfigContext.Provider value={config}>
       {children}
     </GsoConfigContext.Provider>
   );
 };
 
 export const useGsoConfig = () => {
-  return useContext(GsoConfigContext);
+  const context = useContext(GsoConfigContext);
+  if (!context) {
+    throw new Error('useGsoConfig must be used within a GsoConfigProvider');
+  }
+  return context;
 };
 
 export default GsoConfigContext;

pages/_app.tsx

+// Adjust the import path as necessary
 import '../font/inter.css';
 import { getAppLogo } from '@/components/AppLogo/AppLogo';
 import { WfoAuthWithPolicy } from '@/components/WfoAuthWithPolicy';
-import {
-  getInitialGsoConfig,
-  getInitialOrchestratorConfig,
-} from '@/configuration';
-import { gsoConfig } from '@/configuration/configuration';
-import { GsoConfigProvider } from '@/contexts/GsoConfigContext';
+import { getInitialOrchestratorConfig } from '@/configuration';
+// Adjust the import path as necessary
+import { GsoConfigProvider, GsoConfig } from '@/contexts/GsoConfigContext';
 import { TranslationsProvider } from '@/translations/translationsProvider';
 import { EuiProvider, EuiThemeColorMode } from '@elastic/eui';
 import '@elastic/eui/dist/eui_theme_dark.min.css';
@@ -34,10 +32,7 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { QueryClientConfig } from 'react-query/types/core/types';
 import { QueryParamProvider } from 'use-query-params';
 
-type AppOwnProps = {
-  orchestratorConfig: OrchestratorConfig;
-  gsoConfig: gsoConfig;
-};
+type AppOwnProps = { orchestratorConfig: OrchestratorConfig };
 
 const queryClientConfig: QueryClientConfig = {
   defaultOptions: {
@@ -52,13 +47,12 @@ function CustomApp({
   Component,
   pageProps,
   orchestratorConfig,
-  gsoConfig,
 }: AppProps & AppOwnProps) {
   const [queryClient] = useState(() => new QueryClient(queryClientConfig));
-
   const [themeMode, setThemeMode] = useState<EuiThemeColorMode>(
     ColorModes.LIGHT,
   );
+  const [config, setConfig] = useState<GsoConfig | undefined>(undefined);
 
   const handleThemeSwitch = (newThemeMode: EuiThemeColorMode) => {
     setThemeMode(newThemeMode);
@@ -66,6 +60,7 @@ function CustomApp({
   };
 
   useEffect(() => {
+    // Initialize theme mode from localStorage or set it to 'light' if not present
     const storedTheme = localStorage.getItem('themeMode');
     if (
       !storedTheme ||
@@ -75,15 +70,29 @@ function CustomApp({
     }
   }, []);
 
+  useEffect(() => {
+    const fetchConfig = async () => {
+      const res = await fetch('/api/runtime-config');
+      const data: GsoConfig = await res.json();
+      setConfig(data);
+    };
+
+    fetchConfig();
+  }, []);
+
+  if (!config) {
+    return null;
+  }
+
   return (
     <WfoErrorBoundary>
       <OrchestratorConfigProvider
         initialOrchestratorConfig={orchestratorConfig}
       >
-        <GsoConfigProvider initialOrchestratorConfig={gsoConfig}>
-          <StoreProvider initialOrchestratorConfig={orchestratorConfig}>
-            <SessionProvider session={pageProps.session}>
-              <NoSSR>
+        <StoreProvider initialOrchestratorConfig={orchestratorConfig}>
+          <SessionProvider session={pageProps.session}>
+            <NoSSR>
+              <GsoConfigProvider config={config}>
                 <WfoAuthWithPolicy>
                   <EuiProvider
                     colorMode={themeMode}
@@ -124,10 +133,10 @@ function CustomApp({
                     </ApiClientContextProvider>
                   </EuiProvider>
                 </WfoAuthWithPolicy>
-              </NoSSR>
-            </SessionProvider>
-          </StoreProvider>
-        </GsoConfigProvider>
+              </GsoConfigProvider>
+            </NoSSR>
+          </SessionProvider>
+        </StoreProvider>
       </OrchestratorConfigProvider>
     </WfoErrorBoundary>
   );
@@ -137,10 +146,10 @@ CustomApp.getInitialProps = async (
   context: AppContext,
 ): Promise<AppOwnProps & AppInitialProps> => {
   const ctx = await App.getInitialProps(context);
+
   return {
     ...ctx,
     orchestratorConfig: getInitialOrchestratorConfig(),
-    gsoConfig: getInitialGsoConfig(),
   };
 };
 

pages/api/runtime-config.ts

+import { NextApiRequest, NextApiResponse } from 'next';
+
+interface RuntimeConfig {
+  opaPublicBundleUrl: string;
+  oidcClientId: string;
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<RuntimeConfig>,
+) {
+  const config: RuntimeConfig = {
+    opaPublicBundleUrl: process.env.OPA_PUBLIC_BUNDLE_URL || '',
+    oidcClientId: process.env.NEXTAUTH_CLIENT_ID || '',
+  };
+
+  res.status(200).json(config);
+}