feature: move oidc config to frontend-config

frontend-config.json

@@ -2,5 +2,12 @@
   "backendUrl": "http://localhost:3000",
   "gatewayUrl": "https://gateway.ui.dev-core.mcpd.shoot.canary.k8s-hana.ondemand.com/kubernetes/graphql",
   "landscape": "LOCAL",
-  "documentationBaseUrl": "http://localhost:3000"
+  "documentationBaseUrl": "http://localhost:3000",
+  "oidcConfig": {
+    "clientId": "clientId",
+    "issuerUrl": "issuer-url",
+    "scopes": [
+      ""
+    ]
+  }
 }

src/context/AuthProviderOnboarding.tsx

@@ -1,26 +1,17 @@
-import { ReactNode, use } from 'react';
-import { AuthProvider, AuthProviderProps } from 'react-oidc-context';
+import { ReactNode } from 'react';
+import { AuthProvider } from 'react-oidc-context';
 import { useFrontendConfig } from './FrontendConfigContext.tsx';
-import { LoadCrateKubeConfig } from '../lib/oidc/crate.ts';
+import { buildAuthProviderProps } from '../lib/oidc/onboardingApi.ts';
 
 interface AuthProviderOnboardingProps {
   children?: ReactNode;
 }
 
-// Promise needs to be cached
-// https://react.dev/blog/2024/12/05/react-19#use-does-not-support-promises-created-in-render
-const fetchAuthPromiseCache = new Map<string, Promise<AuthProviderProps>>();
-
 export function AuthProviderOnboarding({
   children,
 }: AuthProviderOnboardingProps) {
-  const { backendUrl } = useFrontendConfig();
-
-  const fetchAuthConfigPromise =
-    fetchAuthPromiseCache.get(backendUrl) ?? LoadCrateKubeConfig(backendUrl);
-  fetchAuthPromiseCache.set(backendUrl, fetchAuthConfigPromise);
-
-  const authConfig = use(fetchAuthConfigPromise);
+  const { oidcConfig } = useFrontendConfig();
 
+  const authConfig = buildAuthProviderProps(oidcConfig);
   return <AuthProvider {...authConfig}>{children}</AuthProvider>;
 }

src/context/FrontendConfigContext.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, createContext, use } from 'react';
 import { DocLinkCreator } from '../lib/shared/links';
+import { OIDCConfig } from '../lib/oidc/onboardingApi';
 
 export enum Landscape {
   Live = 'LIVE',
@@ -9,11 +10,15 @@ export enum Landscape {
   Local = 'LOCAL',
 }
 
-interface FrontendConfigContextProps {
+type FrontendConfig = {
   backendUrl: string;
   gatewayUrl: string;
   landscape?: Landscape;
   documentationBaseUrl: string;
+  oidcConfig: OIDCConfig;
+}
+
+interface FrontendConfigContextProps extends FrontendConfig {
   links: DocLinkCreator;
 }
 
@@ -22,7 +27,7 @@ export const FrontendConfigContext = createContext<FrontendConfigContextProps |
 );
 
 
-const fetchPromise = fetch('/frontend-config.json').then((res) => res.json());
+const fetchPromise = fetch('/frontend-config.json').then((res) => res.json()).then((data) => data as FrontendConfig);
 
 interface FrontendConfigProviderProps {
   children: ReactNode;
@@ -33,12 +38,8 @@ export function FrontendConfigProvider({ children }: FrontendConfigProviderProps
   const docLinks = new DocLinkCreator(config.documentationBaseUrl);
   const value: FrontendConfigContextProps = {
     links: docLinks,
-    backendUrl: config.backendUrl,
-    gatewayUrl: config.gatewayUrl,
-    landscape: config.landscape,
-    documentationBaseUrl: config.documentationBaseUrl,
+    ...config,
   };
-
   return (
     <FrontendConfigContext value={value}>{children}</FrontendConfigContext>
   );

src/lib/oidc/onboardingApi.ts

@@ -0,0 +1,29 @@
+import { WebStorageStateStore } from "oidc-client-ts";
+import { AuthProviderProps } from "react-oidc-context";
+
+export interface OIDCConfig {
+  clientId: string;
+  issuerUrl: string;
+  scopes: string[];
+}
+
+export function buildAuthProviderProps(oidcConfig: OIDCConfig) {
+  const userStore = new WebStorageStateStore({ store: window.localStorage });
+
+  const props: AuthProviderProps = {
+    authority: oidcConfig.issuerUrl,
+    client_id: oidcConfig.clientId,
+    redirect_uri: getDefaultRedirectUri(),
+    scope: oidcConfig.scopes.join(' '),
+    userStore: userStore,
+    automaticSilentRenew: false, // we show a window instead that asks the user to renew the token
+    onSigninCallback: () => {
+      window.history.replaceState({}, document.title, window.location.pathname);
+    },
+  };
+  return props;
+}
+
+function getDefaultRedirectUri() {
+  return window.location.origin;
+}