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/modules/settings/components/SettingsListCard.tsx

@@ -42,6 +42,7 @@ type SettingsListCardProps<ListItem extends { id: string }> = {
   isLoading?: boolean;
   onRowClick?: (item: ListItem) => void;
   RowIcon?: IconComponent;
+  RowIconFn?: (item: ListItem) => IconComponent;
   RowRightComponent: ComponentType<{ item: ListItem }>;
   footerButtonLabel?: string;
   onFooterButtonClick?: () => void;
@@ -58,6 +59,7 @@ export const SettingsListCard = <
   isLoading,
   onRowClick,
   RowIcon,
+  RowIconFn,
   RowRightComponent,
   onFooterButtonClick,
   footerButtonLabel,
@@ -71,7 +73,7 @@ export const SettingsListCard = <
       {items.map((item, index) => (
         <SettingsListItemCardContent
           key={item.id}
-          LeftIcon={RowIcon}
+          LeftIcon={RowIconFn ? RowIconFn(item) : RowIcon}
           label={getItemLabel(item)}
           rightComponent={<RowRightComponent item={item} />}
           divider={index < items.length - 1}

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -16,6 +16,7 @@ import {
   IconTool,
   IconUserCircle,
   IconUsers,
+  IconKey,
   MAIN_COLORS,
 } from 'twenty-ui';
 
@@ -79,6 +80,7 @@ export const SettingsNavigationDrawerItems = () => {
   );
   const isFreeAccessEnabled = useIsFeatureEnabled('IS_FREE_ACCESS_ENABLED');
   const isCRMMigrationEnabled = useIsFeatureEnabled('IS_CRM_MIGRATION_ENABLED');
+  const isSSOEnabled = useIsFeatureEnabled('IS_SSO_ENABLED');
   const isBillingPageEnabled =
     billing?.isBillingEnabled && !isFreeAccessEnabled;
 
@@ -186,6 +188,13 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconCode}
           />
         )}
+        {isSSOEnabled && (
+          <SettingsNavigationDrawerItem
+            label="Security"
+            path={SettingsPath.Security}
+            Icon={IconKey}
+          />
+        )}
       </NavigationDrawerSection>
       <AnimatePresence>
         {isAdvancedModeEnabled && (

packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { IconComponent } from 'twenty-ui';
+import { ReactNode } from 'react';
+
+type SettingsOptionCardContentProps = {
+  Icon?: IconComponent;
+  title: string;
+  description: string;
+  onClick: () => void;
+  children: ReactNode;
+  divider?: boolean;
+};
+
+const StyledCardContent = styled(CardContent)`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+  }
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledDescription = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+const StyledIcon = styled.div`
+  align-items: center;
+  border: 2px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  background-color: ${({ theme }) => theme.background.primary};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(8)};
+  min-width: ${({ theme }) => theme.icon.size.md};
+`;
+
+export const SettingsOptionCardContent = ({
+  Icon,
+  title,
+  description,
+  onClick,
+  children,
+  divider,
+}: SettingsOptionCardContentProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledCardContent onClick={onClick} divider={divider}>
+      {Icon && (
+        <StyledIcon>
+          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />
+        </StyledIcon>
+      )}
+      <div>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledDescription>{description}</StyledDescription>
+      </div>
+      {children}
+    </StyledCardContent>
+  );
+};

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { Radio } from '@/ui/input/components/Radio';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { IconComponent } from 'twenty-ui';
+import { useTheme } from '@emotion/react';
+
+const StyledRadioCardContent = styled(CardContent)`
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => theme.spacing(2)};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  flex-grow: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+  }
+`;
+
+const StyledRadio = styled(Radio)`
+  margin-left: auto;
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledDescription = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+type SettingsRadioCardProps = {
+  value: string;
+  handleClick: (value: string) => void;
+  isSelected: boolean;
+  title: string;
+  description?: string;
+  Icon?: IconComponent;
+};
+
+export const SettingsRadioCard = ({
+  value,
+  handleClick,
+  title,
+  description,
+  isSelected,
+  Icon,
+}: SettingsRadioCardProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledRadioCardContent onClick={() => handleClick(value)}>
+      {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray50} />}
+      <span>
+        {title && <StyledTitle>{title}</StyledTitle>}
+        {description && <StyledDescription>{description}</StyledDescription>}
+      </span>
+      <StyledRadio value={value} checked={isSelected} />
+    </StyledRadioCardContent>
+  );
+};

packages/twenty-front/src/modules/settings/components/SettingsRadioCardContainer.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
+import { SettingsRadioCard } from '@/settings/components/SettingsRadioCard';
+
+const StyledRadioCardContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+type SettingsRadioCardContainerProps = {
+  onChange: (value: string) => void;
+  value: string;
+  options: Array<{
+    value: string;
+    title: string;
+    description?: string;
+    Icon?: IconComponent;
+  }>;
+};
+
+export const SettingsRadioCardContainer = ({
+  options,
+  value,
+  onChange,
+}: SettingsRadioCardContainerProps) => {
+  return (
+    <StyledRadioCardContainer>
+      {options.map((option) => (
+        <SettingsRadioCard
+          key={option.value}
+          value={option.value}
+          isSelected={value === option.value}
+          handleClick={onChange}
+          title={option.title}
+          description={option.description}
+          Icon={option.Icon}
+        />
+      ))}
+    </StyledRadioCardContainer>
+  );
+};