feat(sso): allow to use OIDC and SAML (#7246)

## What it does
### Backend
- [x] Add a mutation to create OIDC and SAML configuration
- [x] Add a mutation to delete an SSO config
- [x] Add a feature flag to toggle SSO
- [x] Add a mutation to activate/deactivate an SSO config
- [x] Add a mutation to delete an SSO config
- [x] Add strategy to use OIDC or SAML
- [ ] Improve error management

### Frontend
- [x] Add section "security" in settings
- [x] Add page to list SSO configurations
- [x] Add page and forms to create OIDC or SAML configuration
- [x] Add field to "connect with SSO" in the signin/signup process
- [x] Trigger auth when a user switch to a workspace with SSO enable
- [x] Add an option on the security page to activate/deactivate the
global invitation link
- [ ] Add new Icons for SSO Identity Providers (okta, Auth0, Azure,
Microsoft)

---------

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

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

@@ -4,15 +4,14 @@ import { useRecoilValue } from 'recoil';
 import { Logo } from '@/auth/components/Logo';
 import { Title } from '@/auth/components/Title';
 import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm';
-import {
-  SignInUpMode,
-  SignInUpStep,
-  useSignInUp,
-} from '@/auth/sign-in-up/hooks/useSignInUp';
+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 { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 import { isDefined } from '~/utils/isDefined';
+import { SignInUpStep } from '@/auth/states/signInUpStepState';
+import { IconLockCustom } from '@ui/display/icon/components/IconLock';
+import { SSOWorkspaceSelection } from './SSOWorkspaceSelection';
 
 export const SignInUp = () => {
   const { form } = useSignInUpForm();
@@ -27,6 +26,9 @@ export const SignInUp = () => {
     ) {
       return 'Welcome to Twenty';
     }
+    if (signInUpStep === SignInUpStep.SSOWorkspaceSelection) {
+      return 'Choose SSO connection';
+    }
     return signInUpMode === SignInUpMode.SignIn
       ? 'Sign in to Twenty'
       : 'Sign up to Twenty';
@@ -39,10 +41,18 @@ export const SignInUp = () => {
   return (
     <>
       <AnimatedEaseIn>
-        <Logo />
+        {signInUpStep === SignInUpStep.SSOWorkspaceSelection ? (
+          <IconLockCustom size={40} />
+        ) : (
+          <Logo />
+        )}
       </AnimatedEaseIn>
       <Title animate>{title}</Title>
-      <SignInUpForm />
+      {signInUpStep === SignInUpStep.SSOWorkspaceSelection ? (
+        <SSOWorkspaceSelection />
+      ) : (
+        <SignInUpForm />
+      )}
     </>
   );
 };