frontend: components: redux: Add oidc autologin and config

Author: mudit06mah

frontend/src/components/App/Layout.tsx

@@ -26,6 +26,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router';
+import { getAppUrl } from '../../helpers/getAppUrl';
 import { getCluster } from '../../lib/cluster';
 import { getSelectedClusters } from '../../lib/cluster';
 import { useClustersConf } from '../../lib/k8s';
@@ -143,7 +145,11 @@ const fetchConfig = (dispatch: Dispatch<UnknownAction>) => {
       clustersToConfig[cluster.name] = cluster;
     });
 
-    const configToStore = { ...config, clusters: clustersToConfig };
+    const configToStore = {
+      ...config,
+      clusters: clustersToConfig,
+      oidcAutoLogin: config.oidcAutoLogin,
+    };
 
     if (clusters === null) {
       dispatch(setConfig(configToStore));
@@ -188,6 +194,7 @@ export default function Layout({}: LayoutProps) {
   const isFullWidth = useTypedSelector(state => state.ui.isFullWidth);
   const { t } = useTranslation();
   const allClusters = useClustersConf();
+  const location = useLocation();
 
   /** This fetches the cluster config from the backend and updates the redux store on an interval.
    * When stateless clusters are enabled, it also fetches the stateless cluster config from the
@@ -224,6 +231,36 @@ export default function Layout({}: LayoutProps) {
 
   const panels = useUIPanelsGroupedBySide();
 
+  const oidcAutoLogin = useTypedSelector(state => state.config.oidcAutoLogin);
+
+  useEffect(() => {
+    if (!oidcAutoLogin || !clusters) {
+      return;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    const isLoggingOut = urlParams.get('logout') === 'true';
+    if (isLoggingOut || !!error) {
+      return;
+    }
+    const isCallbackPath =
+      window.location.pathname.includes('oidc-callback') ||
+      urlParams.has('code') ||
+      urlParams.has('state');
+    if (isCallbackPath) {
+      return;
+    }
+    const currentClusterName = getCluster();
+    const currentCluster = currentClusterName ? clusters[currentClusterName] : null;
+    const isOIDC = currentCluster?.auth_type === 'oidc';
+    if (!isOIDC) {
+      return;
+    }
+    if (currentCluster.useToken === undefined) {
+      const oauthUrl = `${getAppUrl()}oidc?dt=${Date.now()}&cluster=${getCluster()}`;
+      window.location.href = oauthUrl;
+    }
+  }, [oidcAutoLogin, clusters, error, location.pathname]);
+
   if (!disableBackendLoader) {
     if (error && !config) {
       return <ErrorPage message={<Trans>Failed to connect to the backend</Trans>} error={error} />;

frontend/src/redux/configSlice.ts

@@ -57,6 +57,10 @@ export interface ConfigState {
     useEvict: boolean;
     [key: string]: any;
   };
+  /**
+   * Whether OIDC auto-login is enabled. Null indicates the value hasn't been loaded from the backend yet.
+   */
+  oidcAutoLogin?: boolean | null;
 }
 
 export const defaultTableRowsPerPageOptions = [15, 25, 50];
@@ -71,6 +75,7 @@ export const initialState: ConfigState = {
   clusters: null,
   statelessClusters: null,
   allClusters: null,
+  oidcAutoLogin: null,
   settings: {
     tableRowsPerPageOptions:
       storedSettings.tableRowsPerPageOptions || defaultTableRowsPerPageOptions,
@@ -89,8 +94,15 @@ const configSlice = createSlice({
      * @param state - The current state.
      * @param action - The payload action containing the config.
      */
-    setConfig(state, action: PayloadAction<{ clusters: ConfigState['clusters'] }>) {
+    setConfig(
+      state,
+      action: PayloadAction<{ clusters: ConfigState['clusters']; oidcAutoLogin?: boolean }>
+    ) {
       state.clusters = action.payload.clusters;
+
+      if (state.oidcAutoLogin !== undefined) {
+        state.oidcAutoLogin = action.payload.oidcAutoLogin;
+      }
     },
     /**
      * Save the config. To both the store, and localStorage.