feat(saml2): Redirect to SLO URL on the frontend (#77036)

Related to #77033

If a SLO URL is returned by the logout API, we will redirect the browser
to that URL. This is needed for Single-Logout to work, because we need
the browser to clear the cookies that are attached to the IdP's domain.

Author: leedongwei

static/app/actionCreators/account.spec.tsx

@@ -0,0 +1,22 @@
+import {redirect} from 'react-router-dom';
+
+import {waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {logout} from './account';
+
+jest.mock('react-router-dom');
+
+describe('logout', () => {
+  it('has can logout', async function () {
+    const mock = MockApiClient.addMockResponse({
+      url: '/auth/',
+      method: 'DELETE',
+    });
+
+    const api = new MockApiClient();
+    logout(api);
+
+    await waitFor(() => expect(mock).toHaveBeenCalled());
+    await waitFor(() => expect(redirect).toHaveBeenCalled());
+  });
+});

static/app/actionCreators/account.tsx

@@ -1,3 +1,5 @@
+import {redirect} from 'react-router-dom';
+
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {Client} from 'sentry/api';
 import ConfigStore from 'sentry/stores/configStore';
@@ -46,8 +48,11 @@ export function updateUser(user: User | ChangeAvatarUser) {
   ConfigStore.set('user', {...previousUser, ...user, options});
 }
 
-export function logout(api: Client) {
-  return api.requestPromise('/auth/', {method: 'DELETE'});
+export async function logout(api: Client, redirectUrl = '/auth/login/') {
+  const data = await api.requestPromise('/auth/', {method: 'DELETE'});
+
+  // If there's a URL for SAML Single-logout, redirect back to IdP
+  redirect(data?.sloUrl || redirectUrl);
 }
 
 export function removeAuthenticator(api: Client, userId: string, authId: string) {

static/app/components/modals/sudoModal.tsx

@@ -222,22 +222,13 @@ function SudoModal({
     return authLoginPath;
   };
 
-  const handleLogout = async () => {
-    try {
-      await logout(api);
-    } catch {
-      // ignore errors
-    }
-    window.location.assign(getAuthLoginPath());
-  };
-
   const renderBodyContent = () => {
     const user = ConfigStore.get('user');
     const isSelfHosted = ConfigStore.get('isSelfHosted');
     const validateSUForm = ConfigStore.get('validateSUForm');
 
     if (errorType === ErrorCodes.INVALID_SSO_SESSION) {
-      handleLogout();
+      logout(api, getAuthLoginPath());
       return null;
     }
 

static/app/components/narrowLayout.tsx

@@ -21,9 +21,8 @@ function NarrowLayout({maxWidth, showLogout, children}: Props) {
     return () => document.body.classList.remove('narrow');
   }, []);
 
-  async function handleLogout() {
-    await logout(api);
-    window.location.assign('/auth/login');
+  function handleLogout() {
+    logout(api);
   }
 
   return (

static/app/components/sidebar/index.spec.tsx

@@ -7,6 +7,7 @@ import {UserFixture} from 'sentry-fixture/user';
 
 import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
+import {logout} from 'sentry/actionCreators/account';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import SidebarContainer from 'sentry/components/sidebar';
 import ConfigStore from 'sentry/stores/configStore';
@@ -16,6 +17,7 @@ import localStorage from 'sentry/utils/localStorage';
 import {useLocation} from 'sentry/utils/useLocation';
 import * as incidentsHook from 'sentry/utils/useServiceIncidents';
 
+jest.mock('sentry/actionCreators/account');
 jest.mock('sentry/utils/useServiceIncidents');
 jest.mock('sentry/utils/useLocation');
 
@@ -122,23 +124,14 @@ describe('Sidebar', function () {
   });
 
   it('has can logout', async function () {
-    const mock = MockApiClient.addMockResponse({
-      url: '/auth/',
-      method: 'DELETE',
-      status: 204,
-    });
-    jest.spyOn(window.location, 'assign').mockImplementation(() => {});
-
     renderSidebar({
       organization: OrganizationFixture({access: ['member:read']}),
     });
 
     await userEvent.click(await screen.findByTestId('sidebar-dropdown'));
     await userEvent.click(screen.getByTestId('sidebar-signout'));
 
-    await waitFor(() => expect(mock).toHaveBeenCalled());
-
-    expect(window.location.assign).toHaveBeenCalledWith('/auth/login/');
+    await waitFor(() => expect(logout).toHaveBeenCalled());
   });
 
   it('can toggle help menu', async function () {

static/app/components/sidebar/sidebarDropdown/index.tsx

@@ -44,11 +44,6 @@ export default function SidebarDropdown({orientation, collapsed, hideOrgLinks}:
   const user = useUser();
   const {projects} = useProjects();
 
-  const handleLogout = async () => {
-    await logout(api);
-    window.location.assign('/auth/login/');
-  };
-
   const hasOrganization = !!org;
   const hasUser = !!user;
 
@@ -59,6 +54,10 @@ export default function SidebarDropdown({orientation, collapsed, hideOrgLinks}:
   const hasTeamRead = org?.access?.includes('team:read');
   const canCreateOrg = ConfigStore.get('features').has('organizations:create');
 
+  function handleLogout() {
+    logout(api);
+  }
+
   // Avatar to use: Organization --> user --> Sentry
   const avatar =
     hasOrganization || hasUser ? (

static/app/components/superuserStaffAccessForm.tsx

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import styled from '@emotion/styled';
-import trimEnd from 'lodash/trimEnd';
 
 import {logout} from 'sentry/actionCreators/account';
 import type {Client} from 'sentry/api';
@@ -163,21 +162,17 @@ class SuperuserStaffAccessForm extends Component<Props, State> {
     });
   };
 
-  handleLogout = async () => {
-    const {api} = this.props;
-    try {
-      await logout(api);
-    } catch {
-      // ignore errors
-    }
-    const authLoginPath = `/auth/login/?next=${encodeURIComponent(window.location.href)}`;
-    const {superuserUrl} = window.__initialData.links;
-    if (window.__initialData?.customerDomain && superuserUrl) {
-      const redirectURL = `${trimEnd(superuserUrl, '/')}${authLoginPath}`;
-      window.location.assign(redirectURL);
-      return;
-    }
-    window.location.assign(authLoginPath);
+  handleLogout = () => {
+    const {superuserUrl} = window.__initialData?.links;
+    const urlOrigin =
+      window.__initialData?.customerDomain && superuserUrl
+        ? superuserUrl
+        : window.location.origin;
+
+    const nextUrl = new URL('/auth/login/', urlOrigin);
+    nextUrl.searchParams.set('next', window.location.href);
+
+    logout(this.props.api, nextUrl.toString());
   };
 
   async getAuthenticators() {

static/app/views/acceptOrganizationInvite/index.spec.tsx

@@ -245,11 +245,8 @@ describe('AcceptOrganizationInvite', function () {
     );
 
     expect(screen.getByTestId('existing-member')).toBeInTheDocument();
-
     await userEvent.click(screen.getByTestId('existing-member-link'));
-
-    expect(logout).toHaveBeenCalled();
-    await waitFor(() => expect(window.location.replace).toHaveBeenCalled());
+    await waitFor(() => expect(logout).toHaveBeenCalled());
   });
 
   it('shows right options for logged in user and optional SSO', function () {
@@ -294,9 +291,7 @@ describe('AcceptOrganizationInvite', function () {
 
     expect(screen.getByTestId('existing-member')).toBeInTheDocument();
     await userEvent.click(screen.getByTestId('existing-member-link'));
-
-    expect(logout).toHaveBeenCalled();
-    await waitFor(() => expect(window.location.replace).toHaveBeenCalled());
+    await waitFor(() => expect(logout).toHaveBeenCalled());
   });
 
   it('shows 2fa warning', function () {

static/app/views/acceptOrganizationInvite/index.tsx

@@ -61,10 +61,9 @@ class AcceptOrganizationInvite extends DeprecatedAsyncView<Props, State> {
     return t('Accept Organization Invite');
   }
 
-  handleLogout = async (e: React.MouseEvent) => {
+  handleLogout = (e: React.MouseEvent) => {
     e.preventDefault();
-    await logout(this.api);
-    window.location.replace('/auth/login/');
+    logout(this.api);
   };
 
   handleAcceptInvite = async () => {