frontend: components: redux: Add oidc autologin and config

Author: mudit06mah

frontend/src/components/App/Layout.tsx

@@ -24,8 +24,11 @@ import { styled } from '@mui/material/styles';
 import { Dispatch, UnknownAction } from '@reduxjs/toolkit';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
+import React 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 +146,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 +195,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 +232,30 @@ export default function Layout({}: LayoutProps) {
 
   const panels = useUIPanelsGroupedBySide();
 
+  const oauthUrl = `${getAppUrl()}oidc?dt=${Date()}&cluster=${getCluster()}`;
+  const oidcAutoLogin = useTypedSelector(state => state.config.oidcAutoLogin);
+
+  React.useEffect(() => {
+    if (oidcAutoLogin === undefined || !clusters) {
+      return;
+    }
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const isLoggingOut = urlParams.get('logout') === 'true';
+    const isCallbackPath = window.location.pathname.includes('oidc-callback');
+
+    const currentClusterName = getCluster();
+    const currentCluster = currentClusterName ? clusters[currentClusterName] : null;
+    const isOIDC = currentCluster?.auth_type === 'oidc';
+
+    if (oidcAutoLogin && isOIDC && !isLoggingOut && !error && !isCallbackPath) {
+      const hasToken = !!currentCluster?.useToken;
+      if (!hasToken) {
+        window.location.href = oauthUrl;
+      }
+    }
+  }, [oidcAutoLogin, clusters, error, oauthUrl, location]);
+
   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,7 @@ export interface ConfigState {
     useEvict: boolean;
     [key: string]: any;
   };
+  oidcAutoLogin?: boolean | null;
 }
 
 export const defaultTableRowsPerPageOptions = [15, 25, 50];
@@ -71,6 +72,7 @@ export const initialState: ConfigState = {
   clusters: null,
   statelessClusters: null,
   allClusters: null,
+  oidcAutoLogin: false,
   settings: {
     tableRowsPerPageOptions:
       storedSettings.tableRowsPerPageOptions || defaultTableRowsPerPageOptions,
@@ -89,8 +91,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.