fix(): sleep before redirect (#9079)

## Summary
This Pull Request centralizes the redirection logic by introducing a
reusable `useRedirect` hook, which replaces direct usage of
`window.location.href` with more standardized and testable functionality
across multiple modules.

- Introduced a new `useRedirect` hook for handling redirection logic
with optional controlled delays.
- Refactored redirection implementations in various modules (`useAuth`,
workspace, and settings-related hooks, etc.) to use the newly introduced
`useRedirect` or related high-level hooks.
- Updated API and documentation to include or improve support for SSO,
particularly OIDC and SAML setup processes in server logic.
- Enhanced frontend and backend configurability with new environment
variable settings for SSO.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -48,6 +48,7 @@ import { useReadWorkspaceSubdomainFromCurrentLocation } from '@/domain-manager/h
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
 import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);
@@ -65,6 +66,7 @@ export const useAuth = () => {
   const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
   const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState);
   const setWorkspaces = useSetRecoilState(workspacesState);
+  const { redirect } = useRedirect();
 
   const [challenge] = useChallengeMutation();
   const [signUp] = useSignUpMutation();
@@ -367,9 +369,9 @@ export const useAuth = () => {
       workspacePersonalInviteToken?: string;
       workspaceInviteHash?: string;
     }) => {
-      window.location.href = buildRedirectUrl('/auth/google', params);
+      redirect(buildRedirectUrl('/auth/google', params));
     },
-    [buildRedirectUrl],
+    [buildRedirectUrl, redirect],
   );
 
   const handleMicrosoftLogin = useCallback(
@@ -377,9 +379,9 @@ export const useAuth = () => {
       workspacePersonalInviteToken?: string;
       workspaceInviteHash?: string;
     }) => {
-      window.location.href = buildRedirectUrl('/auth/microsoft', params);
+      redirect(buildRedirectUrl('/auth/microsoft', params));
     },
-    [buildRedirectUrl],
+    [buildRedirectUrl, redirect],
   );
 
   return {

packages/twenty-front/src/modules/domain-manager/hooks/useGetPublicWorkspaceDataBySubdomain.ts

@@ -1,7 +1,6 @@
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { useIsCurrentLocationOnDefaultDomain } from '@/domain-manager/hooks/useIsCurrentLocationOnDefaultDomain';
-import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
 import { useRedirectToDefaultDomain } from '@/domain-manager/hooks/useRedirectToDefaultDomain';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -19,8 +18,6 @@ export const useGetPublicWorkspaceDataBySubdomain = () => {
   const setWorkspacePublicDataState = useSetRecoilState(
     workspacePublicDataState,
   );
-  const { setLastAuthenticateWorkspaceDomain } =
-    useLastAuthenticatedWorkspaceDomain();
 
   const { loading } = useGetPublicWorkspaceDataBySubdomainQuery({
     skip:
@@ -35,7 +32,6 @@ export const useGetPublicWorkspaceDataBySubdomain = () => {
     onError: (error) => {
       // eslint-disable-next-line no-console
       console.error(error);
-      setLastAuthenticateWorkspaceDomain(null);
       redirectToDefaultDomain();
     },
   });

packages/twenty-front/src/modules/domain-manager/hooks/useRedirect.ts

@@ -0,0 +1,14 @@
+// Don't use this hook directly! Prefer the high level hooks like:
+// useRedirectToDefaultDomain and useRedirectToWorkspaceDomain
+
+import { useDebouncedCallback } from 'use-debounce';
+
+export const useRedirect = () => {
+  const redirect = useDebouncedCallback((url: string) => {
+    window.location.href = url;
+  }, 1);
+
+  return {
+    redirect,
+  };
+};

packages/twenty-front/src/modules/domain-manager/hooks/useRedirectToDefaultDomain.ts

@@ -1,12 +1,19 @@
 import { useReadDefaultDomainFromConfiguration } from '@/domain-manager/hooks/useReadDefaultDomainFromConfiguration';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
+import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
 
 export const useRedirectToDefaultDomain = () => {
   const { defaultDomain } = useReadDefaultDomainFromConfiguration();
+  const { setLastAuthenticateWorkspaceDomain } =
+    useLastAuthenticatedWorkspaceDomain();
+
+  const { redirect } = useRedirect();
   const redirectToDefaultDomain = () => {
     const url = new URL(window.location.href);
     if (url.hostname !== defaultDomain) {
+      setLastAuthenticateWorkspaceDomain(null);
       url.hostname = defaultDomain;
-      window.location.href = url.toString();
+      redirect(url.toString());
     }
   };
 

packages/twenty-front/src/modules/domain-manager/hooks/useRedirectToWorkspaceDomain.ts

@@ -1,10 +1,12 @@
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { useRecoilValue } from 'recoil';
 import { useBuildWorkspaceUrl } from '@/domain-manager/hooks/useBuildWorkspaceUrl';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 
 export const useRedirectToWorkspaceDomain = () => {
   const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
   const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
+  const { redirect } = useRedirect();
 
   const redirectToWorkspaceDomain = (
     subdomain: string,
@@ -12,7 +14,7 @@ export const useRedirectToWorkspaceDomain = () => {
     searchParams?: Record<string, string>,
   ) => {
     if (!isMultiWorkspaceEnabled) return;
-    window.location.href = buildWorkspaceUrl(subdomain, pathname, searchParams);
+    redirect(buildWorkspaceUrl(subdomain, pathname, searchParams));
   };
 
   return {

packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerApiOAuth.ts

@@ -7,6 +7,7 @@ import {
   MessageChannelVisibility,
   useGenerateTransientTokenMutation,
 } from '~/generated/graphql';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 
 const getProviderUrl = (provider: string) => {
   switch (provider) {
@@ -21,6 +22,7 @@ const getProviderUrl = (provider: string) => {
 
 export const useTriggerApisOAuth = () => {
   const [generateTransientToken] = useGenerateTransientTokenMutation();
+  const { redirect } = useRedirect();
 
   const triggerApisOAuth = useCallback(
     async (
@@ -60,9 +62,9 @@ export const useTriggerApisOAuth = () => {
 
       params += loginHint ? `&loginHint=${loginHint}` : '';
 
-      window.location.href = `${authServerUrl}/auth/${getProviderUrl(provider)}?${params}`;
+      redirect(`${authServerUrl}/auth/${getProviderUrl(provider)}?${params}`);
     },
-    [generateTransientToken],
+    [generateTransientToken, redirect],
   );
 
   return { triggerApisOAuth };

packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonate.ts

@@ -6,10 +6,11 @@ import { useState } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { useImpersonateMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
-import { sleep } from '~/utils/sleep';
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 
 export const useImpersonate = () => {
   const { clearSession } = useAuth();
+  const { redirect } = useRedirect();
   const [currentUser, setCurrentUser] = useRecoilState(currentUserState);
   const setTokenPair = useSetRecoilState(tokenPairState);
   const [impersonate] = useImpersonateMutation();
@@ -43,8 +44,7 @@ export const useImpersonate = () => {
       await clearSession();
       setCurrentUser(user);
       setTokenPair(tokens);
-      await sleep(0); // This hacky workaround is necessary to ensure the tokens stored in the cookie are updated correctly.
-      window.location.href = AppPath.Index;
+      redirect(AppPath.Index);
     } catch (error) {
       setError('Failed to impersonate user. Please try again.');
       setIsLoading(false);