backend: cmd: pkg: Add oidc autologin flag and config

Author: mudit06mah

backend/cmd/headlamp.go

@@ -97,6 +97,7 @@ const (
 type clientConfig struct {
 	Clusters                []Cluster `json:"clusters"`
 	IsDynamicClusterEnabled bool      `json:"isDynamicClusterEnabled"`
+	OidcAutoLogin           bool      `json:"oidcAutoLogin"`
 }
 
 type OauthConfig struct {
@@ -1749,7 +1750,11 @@ func parseClusterFromKubeConfig(kubeConfigs []string) ([]Cluster, []error) {
 func (c *HeadlampConfig) getConfig(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json")
 
-	clientConfig := clientConfig{c.getClusters(), c.EnableDynamicClusters}
+	clientConfig := clientConfig{
+		Clusters:                c.getClusters(),
+		IsDynamicClusterEnabled: c.EnableDynamicClusters,
+		OidcAutoLogin:           c.OidcAutoLogin,
+	}
 
 	if err := json.NewEncoder(w).Encode(&clientConfig); err != nil {
 		logger.Log(logger.LevelError, nil, err, "encoding config")

backend/cmd/server.go

@@ -125,6 +125,7 @@ func createHeadlampConfig(conf *config.Config) *HeadlampConfig {
 
 	cfg := &headlampconfig.HeadlampConfig{
 		HeadlampCFG:               buildHeadlampCFG(conf, kubeConfigStore),
+		OidcAutoLogin:             conf.OidcAutoLogin,
 		OidcClientID:              conf.OidcClientID,
 		OidcValidatorClientID:     conf.OidcValidatorClientID,
 		OidcClientSecret:          conf.OidcClientSecret,

backend/cmd/stateless.go

@@ -178,7 +178,7 @@ func (c *HeadlampConfig) parseKubeConfig(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	clientConfig := clientConfig{contexts, c.EnableDynamicClusters}
+	clientConfig := clientConfig{contexts, c.EnableDynamicClusters, c.OidcAutoLogin}
 
 	if err := json.NewEncoder(w).Encode(&clientConfig); err != nil {
 		logger.Log(logger.LevelError, nil, err, "encoding config")

backend/pkg/config/config.go

@@ -55,6 +55,7 @@ type Config struct {
 	UserPluginsDir            string `koanf:"user-plugins-dir"`
 	BaseURL                   string `koanf:"base-url"`
 	ProxyURLs                 string `koanf:"proxy-urls"`
+	OidcAutoLogin             bool   `koanf:"oidc-auto-login"`
 	OidcClientID              string `koanf:"oidc-client-id"`
 	OidcValidatorClientID     string `koanf:"oidc-validator-client-id"`
 	OidcClientSecret          string `koanf:"oidc-client-secret"`
@@ -437,6 +438,7 @@ func addGeneralFlags(f *flag.FlagSet) {
 }
 
 func addOIDCFlags(f *flag.FlagSet) {
+	f.Bool("oidc-auto-login", false, "Automatic Redirect to OIDC provider")
 	f.String("oidc-client-id", "", "ClientID for OIDC")
 	f.String("oidc-client-secret", "", "ClientSecret for OIDC")
 	f.String("oidc-validator-client-id", "", "Override ClientID for OIDC during validation")

backend/pkg/headlampconfig/headlampConfig.go

@@ -17,6 +17,7 @@ type WebSocketMultiplexer interface {
 // HeadlampConfig holds full server config. Lives here so packages (e.g. k8cache) can import without cmd.
 type HeadlampConfig struct {
 	*HeadlampCFG
+	OidcAutoLogin             bool
 	OidcClientID              string
 	OidcValidatorClientID     string
 	OidcClientSecret          string

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 { useCluster, useClustersConf } from '../../lib/k8s';
@@ -146,7 +148,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));
@@ -191,6 +197,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
@@ -235,6 +242,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.