feat(*): allow to select auth providers + add multiworkspace with subdomain management (#8656)

## Summary
Add support for multi-workspace feature and adjust configurations and
states accordingly.
- Introduced new state isMultiWorkspaceEnabledState.
- Updated ClientConfigProviderEffect component to handle
multi-workspace.
- Modified GraphQL schema and queries to include multi-workspace related
configurations.
- Adjusted server environment variables and their respective
documentation to support multi-workspace toggle.
- Updated server-side logic to handle new multi-workspace configurations
and conditions.

packages/twenty-front/src/pages/auth/Invite.tsx

@@ -1,7 +1,7 @@
 import { Logo } from '@/auth/components/Logo';
 import { Title } from '@/auth/components/Title';
 import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
-import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm';
+import { SignInUpWorkspaceScopeForm } from '@/auth/sign-in-up/components/SignInUpWorkspaceScopeForm';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -16,6 +16,7 @@ import {
   useAddUserToWorkspaceMutation,
 } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { currentUserState } from '@/auth/states/currentUserState';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -28,6 +29,7 @@ export const Invite = () => {
 
   const { form } = useSignInUpForm();
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentUser = useRecoilValue(currentUserState);
   const [addUserToWorkspace] = useAddUserToWorkspaceMutation();
   const [addUserToWorkspaceByInviteToken] =
     useAddUserToWorkspaceByInviteTokenMutation();
@@ -77,7 +79,7 @@ export const Invite = () => {
         <Logo secondaryLogo={workspaceFromInviteHash?.logo} />
       </AnimatedEaseIn>
       <Title animate>{title}</Title>
-      {isDefined(currentWorkspace) ? (
+      {isDefined(currentUser) ? (
         <>
           <StyledContentContainer>
             <MainButton
@@ -91,7 +93,7 @@ export const Invite = () => {
           <FooterNote />
         </>
       ) : (
-        <SignInUpForm />
+        <SignInUpWorkspaceScopeForm />
       )}
     </>
   );

packages/twenty-front/src/pages/auth/PasswordReset.tsx

@@ -19,7 +19,7 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { AnimatedEaseIn, MainButton } from 'twenty-ui';
 import { z } from 'zod';
 import {
@@ -27,6 +27,7 @@ import {
   useValidatePasswordResetTokenQuery,
 } from '~/generated/graphql';
 import { logError } from '~/utils/logError';
+import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 
 const validationSchema = z
   .object({
@@ -71,6 +72,8 @@ const StyledInputContainer = styled.div`
 export const PasswordReset = () => {
   const { enqueueSnackBar } = useSnackBar();
 
+  const workspacePublicData = useRecoilValue(workspacePublicDataState);
+
   const navigate = useNavigate();
 
   const [email, setEmail] = useState('');
@@ -163,7 +166,7 @@ export const PasswordReset = () => {
     isTokenValid && (
       <StyledMainContainer>
         <AnimatedEaseIn>
-          <Logo />
+          <Logo secondaryLogo={workspacePublicData?.logo} />
         </AnimatedEaseIn>
         <Title animate>Reset Password</Title>
         <StyledContentContainer>

packages/twenty-front/src/pages/auth/SSOWorkspaceSelection.tsx

@@ -1,68 +0,0 @@
-/* @license Enterprise */
-
-import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
-import { HorizontalSeparator, MainButton } from 'twenty-ui';
-import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
-import { availableSSOIdentityProvidersState } from '@/auth/states/availableWorkspacesForSSO';
-import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
-import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
-import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
-
-const StyledContentContainer = styled.div`
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
-`;
-
-const StyledTitle = styled.h2`
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin: 0;
-`;
-
-export const SSOWorkspaceSelection = () => {
-  const availableSSOIdentityProviders = useRecoilValue(
-    availableSSOIdentityProvidersState,
-  );
-
-  const { redirectToSSOLoginPage } = useSSO();
-
-  const availableWorkspacesForSSOGroupByWorkspace =
-    availableSSOIdentityProviders.reduce(
-      (acc, idp) => {
-        acc[idp.workspace.id] = [...(acc[idp.workspace.id] ?? []), idp];
-        return acc;
-      },
-      {} as Record<string, typeof availableSSOIdentityProviders>,
-    );
-
-  return (
-    <>
-      <StyledContentContainer>
-        {Object.values(availableWorkspacesForSSOGroupByWorkspace).map(
-          (idps) => (
-            <>
-              <StyledTitle>
-                {idps[0].workspace.displayName ?? DEFAULT_WORKSPACE_NAME}
-              </StyledTitle>
-              <HorizontalSeparator visible={false} />
-              {idps.map((idp) => (
-                <>
-                  <MainButton
-                    title={idp.name}
-                    onClick={() => redirectToSSOLoginPage(idp.id)}
-                    Icon={guessSSOIdentityProviderIconByUrl(idp.issuer)}
-                    fullWidth
-                  />
-                  <HorizontalSeparator visible={false} />
-                </>
-              ))}
-            </>
-          ),
-        )}
-      </StyledContentContainer>
-      <FooterNote />
-    </>
-  );
-};

packages/twenty-front/src/pages/auth/SignInUp.tsx

@@ -1,58 +1,70 @@
-import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
+import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
+import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
+import { SignInUpStep } from '@/auth/states/signInUpStepState';
+import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
+
+import { SignInUpGlobalScopeForm } from '@/auth/sign-in-up/components/SignInUpGlobalScopeForm';
+import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
+import { AnimatedEaseIn } from 'twenty-ui';
 import { Logo } from '@/auth/components/Logo';
 import { Title } from '@/auth/components/Title';
-import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm';
-import { SignInUpMode, useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
-import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { SignInUpStep } from '@/auth/states/signInUpStepState';
-import { IconLockCustom } from '@ui/display/icon/components/IconLock';
-import { AnimatedEaseIn } from 'twenty-ui';
+import { SignInUpWorkspaceScopeForm } from '@/auth/sign-in-up/components/SignInUpWorkspaceScopeForm';
+import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
+import { SignInUpSSOIdentityProviderSelection } from '@/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection';
+import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
+import { useUrlManager } from '@/url-manager/hooks/useUrlManager';
+import { useMemo } from 'react';
 import { isDefined } from '~/utils/isDefined';
-import { SSOWorkspaceSelection } from './SSOWorkspaceSelection';
 
 export const SignInUp = () => {
   const { form } = useSignInUpForm();
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const { signInUpStep } = useSignInUp(form);
+  const { isTwentyHomePage, isTwentyWorkspaceSubdomain } = useUrlManager();
 
-  const { signInUpStep, signInUpMode } = useSignInUp(form);
+  const workspacePublicData = useRecoilValue(workspacePublicDataState);
+  const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
+
+  const signInUpForm = useMemo(() => {
+    if (isTwentyHomePage && isMultiWorkspaceEnabled) {
+      return <SignInUpGlobalScopeForm />;
+    }
 
-  const title = useMemo(() => {
     if (
-      signInUpStep === SignInUpStep.Init ||
-      signInUpStep === SignInUpStep.Email
+      (!isMultiWorkspaceEnabled ||
+        (isMultiWorkspaceEnabled && isTwentyWorkspaceSubdomain)) &&
+      signInUpStep === SignInUpStep.SSOIdentityProviderSelection
     ) {
-      return 'Welcome to Twenty';
+      return <SignInUpSSOIdentityProviderSelection />;
     }
-    if (signInUpStep === SignInUpStep.SSOWorkspaceSelection) {
-      return 'Choose SSO connection';
-    }
-    return signInUpMode === SignInUpMode.SignIn
-      ? 'Sign in to Twenty'
-      : 'Sign up to Twenty';
-  }, [signInUpMode, signInUpStep]);
 
-  if (isDefined(currentWorkspace)) {
-    return <></>;
-  }
+    if (
+      isDefined(workspacePublicData) &&
+      (!isMultiWorkspaceEnabled || isTwentyWorkspaceSubdomain)
+    ) {
+      return <SignInUpWorkspaceScopeForm />;
+    }
+
+    return <SignInUpGlobalScopeForm />;
+  }, [
+    isTwentyHomePage,
+    isMultiWorkspaceEnabled,
+    isTwentyWorkspaceSubdomain,
+    signInUpStep,
+    workspacePublicData,
+  ]);
 
   return (
     <>
       <AnimatedEaseIn>
-        {signInUpStep === SignInUpStep.SSOWorkspaceSelection ? (
-          <IconLockCustom size={40} />
-        ) : (
-          <Logo />
-        )}
+        <Logo secondaryLogo={workspacePublicData?.logo} />
       </AnimatedEaseIn>
-      <Title animate>{title}</Title>
-      {signInUpStep === SignInUpStep.SSOWorkspaceSelection ? (
-        <SSOWorkspaceSelection />
-      ) : (
-        <SignInUpForm />
-      )}
+      <Title animate>
+        {`Welcome to ${workspacePublicData?.displayName ?? DEFAULT_WORKSPACE_NAME}`}
+      </Title>
+      {signInUpForm}
+      {signInUpStep !== SignInUpStep.Password && <FooterNote />}
     </>
   );
 };