SAML SLO support

shell/assets/translations/en-us.yaml

@@ -507,6 +507,11 @@ authConfig:
     UID: UID Field
     adfs: Configure an AD FS account
     api: '{vendor} API Host'
+    sloTitle: Log Out behavior
+    sloOptions:
+      onlyRancher: Log out of Rancher and not {name}
+      logoutAll: Log out of Rancher and {name} (includes all other applications registered with {name})
+      choose: Allow the user to choose one of the above in an additional log out step
     cert:
       label: Certificate
       placeholder: Paste in the certificate, starting with -----BEGIN CERTIFICATE-----
@@ -3265,6 +3270,7 @@ login:
   welcome: Welcome to {vendor}
   loggedOut: You have been logged out.
   loggedOutFromSso: You've been logged out of Rancher, however you may still be logged in to your single sign-on identity provider.
+  loggedOutFromSlo: You've been logged out of Rancher and from your single sign-on identity provider.
   loginAgain: Log in again to continue.
   serverError:
     authFailedCreds: "Logging in failed: Check credentials, or your account may not be authorized to log in."
@@ -3289,6 +3295,10 @@ login:
 
 logout:
   message: Logging Out...
+  error: 'An error occurred logging out: {msg}'
+  specificError:
+    unknown: Unknown.\n\nPlease contact your system administrator.
+    500: "Server-side error.\n\nPlease contact your system administrator."
 
 managementNode:
   customName: Custom Name
@@ -4648,6 +4658,15 @@ promptScaleMachineDown:
   retainedMachine1: At least one Machine must exist for roles Control Plane and Etcd.
   retainedMachine2: <b>{ name }</b> will remain
 
+promptSlo:
+  title: "Log out"
+  text: "Log out of only Rancher, or all {name} applications."
+  rancher:
+    active: Only log out of Rancher
+  all:
+    active: Log out of {name}
+    waiting: Logging Out
+
 promptRemove:
   title: Are you sure?
   andOthers: |-

shell/components/nav/Header.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import debounce from 'lodash/debounce';
-import { NORMAN, STEVE } from '@shell/config/types';
+import { NORMAN, STEVE, MANAGEMENT } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
 import { isAlternate, isMac } from '@shell/utils/platform';
 import Import from '@shell/components/Import';
@@ -20,6 +20,7 @@ import { ActionLocation, ExtensionPoint } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
+import { authProvidersInfo, parseAuthProvidersInfo } from '@shell/utils/auth';
 
 export default {
 
@@ -43,11 +44,17 @@ export default {
     }
   },
 
+  fetch() {
+    // fetch needed data to check if any auth provider is enabled
+    authProvidersInfo(this.$store);
+  },
+
   data() {
     const searchShortcut = isMac ? '(\u2318-K)' : '(Ctrl+K)';
     const shellShortcut = '(Ctrl+`)';
 
     return {
+      authInfo:               {},
       show:                   false,
       showTooltip:            false,
       kubeConfigCopying:      false,
@@ -66,6 +73,26 @@ export default {
     ...mapGetters(['clusterReady', 'isExplorer', 'isRancher', 'currentCluster',
       'currentProduct', 'rootProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
+    authProviderEnabled() {
+      const authProviders = this.$store.getters['management/all'](MANAGEMENT.AUTH_CONFIG);
+      const authInfo = parseAuthProvidersInfo(authProviders);
+
+      return authInfo.enabled?.[0] || {};
+    },
+
+    shouldShowSloLogoutModal() {
+      if (this.isAuthLocalProvider) {
+        // If the user logged in as a local user... they cannot log out as if they were an auth config user
+        return false;
+      }
+
+      const {
+        logoutAllSupported, logoutAllEnabled, logoutAllForced, configType
+      } = this.authProviderEnabled;
+
+      return configType === 'saml' && logoutAllSupported && logoutAllEnabled && !logoutAllForced;
+    },
+
     appName() {
       return getProduct();
     },
@@ -210,6 +237,13 @@ export default {
   },
 
   methods: {
+    showSloModal() {
+      this.$store.dispatch('management/promptModal', {
+        component:      'SloDialog',
+        componentProps: { authProvider: this.authProviderEnabled },
+        modalWidth:     '500px'
+      });
+    },
     // Sizes the product area of the header such that it shrinks to ensure the whole header bar can be shown
     // where possible - we use a minimum width of 32px which is enough to just show the product icon
     layoutHeader() {
@@ -678,6 +712,7 @@ export default {
               data-testid="user-menu-dropdown"
               @click.stop="showMenu(false)"
             >
+              <!-- username and icon -->
               <li
                 v-if="authEnabled"
                 class="user-info"
@@ -691,6 +726,7 @@ export default {
                   </template>
                 </div>
               </li>
+              <!-- preferences -->
               <router-link
                 v-if="showPreferencesLink"
                 v-slot="{ href, navigate }"
@@ -705,6 +741,7 @@ export default {
                   <a :href="href">{{ t('nav.userMenu.preferences') }}</a>
                 </li>
               </router-link>
+              <!-- account & api keys -->
               <router-link
                 v-if="showAccountAndApiKeyLink"
                 v-slot="{ href, navigate }"
@@ -719,8 +756,18 @@ export default {
                   <a :href="href">{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
                 </li>
               </router-link>
+              <!-- SLO modal -->
+              <li
+                v-if="authEnabled && shouldShowSloLogoutModal"
+                class="user-menu-item no-link"
+                @click="showSloModal"
+                @keypress.enter="showSloModal"
+              >
+                <span>{{ t('nav.userMenu.logOut') }}</span>
+              </li>
+              <!-- logout -->
               <router-link
-                v-if="authEnabled"
+                v-else-if="authEnabled"
                 v-slot="{ href, navigate }"
                 custom
                 :to="generateLogoutRoute"
@@ -1100,8 +1147,8 @@ export default {
   }
 
   .user-menu-item {
-    a {
-      cursor: hand;
+    a, &.no-link > span {
+      cursor: pointer;
       padding: 0px 10px;
 
       &:hover {
@@ -1118,6 +1165,12 @@ export default {
       }
     }
 
+    &.no-link > span {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+    }
+
     div.menu-separator {
       cursor: default;
       padding: 4px 0;

shell/components/templates/home.vue

@@ -9,6 +9,7 @@ import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
+import PromptModal from '@shell/components/PromptModal';
 
 export default {
 
@@ -18,7 +19,8 @@ export default {
     GrowlManager,
     AzureWarning,
     AwsComplianceBanner,
-    Inactivity
+    Inactivity,
+    PromptModal
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -55,7 +57,7 @@ export default {
     <Inactivity />
     <AwsComplianceBanner />
     <AzureWarning />
-
+    <PromptModal />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"

shell/components/templates/plain.vue

@@ -13,6 +13,7 @@ import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
+import PromptModal from '@shell/components/PromptModal';
 
 export default {
 
@@ -22,6 +23,7 @@ export default {
     Header,
     IndentedPanel,
     PromptRemove,
+    PromptModal,
     FixedBanner,
     GrowlManager,
     AwsComplianceBanner,
@@ -75,6 +77,7 @@ export default {
         </IndentedPanel>
         <ActionMenu />
         <PromptRemove />
+        <PromptModal />
         <AssignTo />
         <button
           v-if="themeShortcut"

shell/config/query-params.js

@@ -7,6 +7,7 @@ export const SETUP = 'setup';
 export const STEP = 'step';
 export const LOGGED_OUT = 'logged-out';
 export const IS_SSO = 'is-sso';
+export const IS_SLO = 'is-slo';
 export const UPGRADED = 'upgraded';
 export const TIMED_OUT = 'timed-out';
 export const AUTH_TEST = 'test';

shell/dialog/SloDialog.vue

@@ -0,0 +1,95 @@
+<script>
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+import { IS_SSO, LOGGED_OUT } from '@shell/config/query-params';
+
+export default {
+  components: { Card, AsyncButton },
+
+  props: {
+    authProvider: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  computed: {
+    name() {
+      return this.authProvider?.nameDisplay;
+    }
+  },
+
+  methods: {
+    async doLogout(logoutAll = false) {
+      const options = { force: true, provider: this.authProvider };
+
+      if (logoutAll) {
+        // SLO - Single Log Out
+        options.slo = true;
+        options.provider = this.authProvider;
+
+        await this.$store.dispatch('auth/logout', options, { root: true });
+
+        this.$emit('close');
+      } else {
+        // Rancher Log Out (ensure we show the logging out page as per standard log out)
+        this.$router.replace({ name: 'auth-logout', query: { [LOGGED_OUT]: true, [IS_SSO]: true } });
+      }
+    },
+
+    cancel() {
+      this.$emit('close');
+    }
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-remove"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptSlo.title', { name }) }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="pl-10 pr-10 mt-20 mb-20">
+        {{ t('promptSlo.text', { name }) }}
+      </div>
+    </template>
+    <template #actions>
+      <div class="btn-block">
+        <button
+          class="btn role-secondary"
+          @click="cancel()"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <div class="spacer" />
+        <button
+          class="btn role-secondary"
+          @click="doLogout()"
+        >
+          {{ t('promptSlo.rancher.active') }}
+        </button>
+        <AsyncButton
+          class="ml-10"
+          :action-label="t('promptSlo.all.active', { name })"
+          :waiting-label="t('promptSlo.all.waiting')"
+          @click="doLogout(true)"
+        />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .btn-block {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+  }
+</style>