load oidc config dynamically

yuvipanda · Sep 17, 2024 · 6f2c789 · 6f2c789
1 parent 646d5eb
commit 6f2c789
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 45 deletions.
diff --git a/veda-auth-portal/src/index.tsx b/veda-auth-portal/src/index.tsx
@@ -1,11 +1,11 @@
 import { createRoot } from 'react-dom/client';
 import App from './App';
-import { extendTheme, ChakraProvider } from '@chakra-ui/react'
-import { AuthProvider, AuthProviderProps } from "react-oidc-context";
-import localOidcConfig from './lib/localOidcConfig.json';
-import prodOidcConfig from './lib/prodOidcConfig.json';
-import { BACKEND_URL, CLIENT_ID } from './lib/constants';
+import { extendTheme, ChakraProvider } from '@chakra-ui/react';
+import { AuthProvider, AuthProviderProps } from 'react-oidc-context';
+import { APP_REDIRECT_URI, BACKEND_URL, CLIENT_ID, TENANT_ID } from './lib/constants';
 import { WebStorageStateStore } from 'oidc-client-ts';
+import React, { useEffect, useState } from 'react';
+import localOidcConfig from './lib/localOidcConfig.json';
 
 const theme = extendTheme({
   colors: {
@@ -24,48 +24,70 @@ const theme = extendTheme({
   },
 });
 
-let theOidcConfig;
-let redirect_uri:string;
+const Index = () => {
+  const [oidcConfig, setOidcConfig] = useState<AuthProviderProps | null>(null);
 
-if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
-  theOidcConfig = localOidcConfig;
-  redirect_uri = 'http://localhost:5173/oauth-callback';
-} else {
-  // production code
-  theOidcConfig = prodOidcConfig;
-  redirect_uri = 'https://veda.usecustos.org/oauth-callback';
-}
+  useEffect(() => {
+    const fetchOidcConfig = async () => {
+      try {
+        let data;
+        if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+          data = localOidcConfig;
+        } else {
+          const response = await fetch(`${BACKEND_URL}/api/v1/identity-management/tenant/${TENANT_ID}/.well-known/openid-configuration`); // Replace with actual API endpoint
+          data = await response.json();
+        }
 
-const theConfig:AuthProviderProps = {
-  authority: `${BACKEND_URL}/api/v1/identity-management/`,
-  client_id: CLIENT_ID,
-  redirect_uri: redirect_uri,
-  response_type: "code",
-  scope: "openid email",
-  metadata: {
-    authorization_endpoint: theOidcConfig.authorization_endpoint,
-    token_endpoint: theOidcConfig.token_endpoint,
-    revocation_endpoint: theOidcConfig.revocation_endpoint,
-    introspection_endpoint: theOidcConfig.introspection_endpoint,
-    userinfo_endpoint: theOidcConfig.userinfo_endpoint,
-    jwks_uri: theOidcConfig.jwks_uri,
-  },
-  userStore: new WebStorageStateStore({ store: window.localStorage }),
-  automaticSilentRenew: true,
-};
+        // Determine redirect_uri based on environment
+        const redirectUri = APP_REDIRECT_URI;
+
+        // Create the OIDC config based on the fetched data
+        const theConfig: AuthProviderProps = {
+          authority: `${BACKEND_URL}/api/v1/identity-management/`,
+          client_id: CLIENT_ID,
+          redirect_uri: redirectUri,
+          response_type: 'code',
+          scope: 'openid email',
+          metadata: {
+            authorization_endpoint: data.authorization_endpoint,
+            token_endpoint: data.token_endpoint,
+            revocation_endpoint: data.revocation_endpoint,
+            introspection_endpoint: data.introspection_endpoint,
+            userinfo_endpoint: data.userinfo_endpoint,
+            jwks_uri: data.jwks_uri,
+          },
+          userStore: new WebStorageStateStore({ store: window.localStorage }),
+          automaticSilentRenew: true,
+        };
 
+        setOidcConfig(theConfig);
+      } catch (error) {
+        console.error('Error fetching OIDC config:', error);
+      }
+    };
+
+    fetchOidcConfig();
+  }, []);
+
+  if (!oidcConfig) {
+    return <div>Loading OIDC configuration...</div>; // Loading state while config is fetched
+  }
+
+  return (
+    <ChakraProvider theme={theme}>
+      <AuthProvider
+        {...oidcConfig}
+        onSigninCallback={async (user) => {
+          console.log('User signed in', user);
+          window.location.href = '/groups';
+        }}
+      >
+        <App />
+      </AuthProvider>
+    </ChakraProvider>
+  );
+};
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
-root.render(
-  <ChakraProvider theme={theme}>
-    <AuthProvider {...theConfig}
-      onSigninCallback={async (user) => {
-        console.log('User signed in', user);
-        window.location.href = '/groups';
-      }}
-    >
-      <App />
-    </AuthProvider>
-  </ChakraProvider>
-);
+root.render(<Index />);
diff --git a/veda-auth-portal/src/lib/constants.ts b/veda-auth-portal/src/lib/constants.ts
@@ -3,11 +3,17 @@ import packageJson from '../../package.json';
 export const PORTAL_VERSION = packageJson.version;
 export let CLIENT_ID:string;
 export let BACKEND_URL:string;
+export let APP_URL:string;
 
 if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
     CLIENT_ID = 'veda-dafsxhsztbsczrmmbftw-10000000';
     BACKEND_URL = 'http://localhost:8081';
+    APP_URL = 'http://localhost:5173'
 } else {
     CLIENT_ID = 'veda-iui65nmkgaf7bihdyndc-10000000';
     BACKEND_URL = 'https://api.veda.usecustos.org';
-}
+    APP_URL = 'https://veda.usecustos.org'
+}
+
+export const APP_REDIRECT_URI = `${APP_URL}/oauth-callback`;
+export const TENANT_ID = '10000000';