Enforce system wide sso providers (#9058)

We have recently introduced the possibility to specify workspace
specific auth providers.
I'm:
- introducing system wide auth providers (provided by clientConfig)
- making sure workspace specific auth providers belong to system wide
auth providers set

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -1,37 +1,31 @@
 import styled from '@emotion/styled';
-import {
-  IconGoogle,
-  IconMicrosoft,
-  Loader,
-  MainButton,
-  HorizontalSeparator,
-} from 'twenty-ui';
-import { useTheme } from '@emotion/react';
-import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
-import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
-import { FormProvider } from 'react-hook-form';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { FormProvider } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { HorizontalSeparator, Loader, MainButton } from 'twenty-ui';
 
-import { isDefined } from '~/utils/isDefined';
+import { useAuth } from '@/auth/hooks/useAuth';
+import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
+import { SignInUpPasswordField } from '@/auth/sign-in-up/components/SignInUpPasswordField';
+import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/SignInUpWithGoogle';
+import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/SignInUpWithMicrosoft';
+import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
+import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
+import { signInUpModeState } from '@/auth/states/signInUpModeState';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
-import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
-import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
-import { SignInUpPasswordField } from '@/auth/sign-in-up/components/SignInUpPasswordField';
-import { useAuth } from '@/auth/hooks/useAuth';
-import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
-import { signInUpModeState } from '@/auth/states/signInUpModeState';
-import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { SignInUpMode } from '@/auth/types/signInUpMode';
+import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
+import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
+import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { isDefined } from '~/utils/isDefined';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -46,11 +40,9 @@ const StyledForm = styled.form`
 `;
 
 export const SignInUpGlobalScopeForm = () => {
-  const theme = useTheme();
+  const authProviders = useRecoilValue(authProvidersState);
   const signInUpStep = useRecoilValue(signInUpStepState);
 
-  const { signInWithGoogle } = useSignInWithGoogle();
-  const { signInWithMicrosoft } = useSignInWithMicrosoft();
   const { checkUserExists } = useAuth();
   const { readCaptchaToken } = useReadCaptchaToken();
   const { redirectToWorkspaceDomain } = useRedirectToWorkspaceDomain();
@@ -116,20 +108,9 @@ export const SignInUpGlobalScopeForm = () => {
   return (
     <>
       <StyledContentContainer>
-        <MainButton
-          Icon={() => <IconGoogle size={theme.icon.size.lg} />}
-          title="Continue with Google"
-          onClick={signInWithGoogle}
-          fullWidth
-        />
-        <HorizontalSeparator visible={false} />
-        <MainButton
-          Icon={() => <IconMicrosoft size={theme.icon.size.lg} />}
-          title="Continue with Microsoft"
-          onClick={signInWithMicrosoft}
-          fullWidth
-        />
-        <HorizontalSeparator visible={false} />
+        {authProviders.google && <SignInUpWithGoogle />}
+
+        {authProviders.microsoft && <SignInUpWithMicrosoft />}
         <HorizontalSeparator visible />
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <FormProvider {...form}>

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx

@@ -4,10 +4,10 @@ import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { MainButton, HorizontalSeparator } from 'twenty-ui';
+import { HorizontalSeparator, MainButton } from 'twenty-ui';
 
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { isDefined } from '~/utils/isDefined';
-import { authProvidersState } from '@/client-config/states/authProvidersState';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -15,15 +15,15 @@ const StyledContentContainer = styled.div`
 `;
 
 export const SignInUpSSOIdentityProviderSelection = () => {
-  const authProviders = useRecoilValue(authProvidersState);
+  const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
   const { redirectToSSOLoginPage } = useSSO();
 
   return (
     <>
       <StyledContentContainer>
-        {isDefined(authProviders?.sso) &&
-          authProviders?.sso.map((idp) => (
+        {isDefined(workspaceAuthProviders?.sso) &&
+          workspaceAuthProviders?.sso.map((idp) => (
             <>
               <MainButton
                 key={idp.id}

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx

@@ -1,25 +1,25 @@
-import { IconLock, MainButton, HorizontalSeparator } from 'twenty-ui';
+import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { useTheme } from '@emotion/react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
-import { authProvidersState } from '@/client-config/states/authProvidersState';
+import { HorizontalSeparator, IconLock, MainButton } from 'twenty-ui';
 
 export const SignInUpWithSSO = () => {
   const theme = useTheme();
   const setSignInUpStep = useSetRecoilState(signInUpStepState);
-  const authProviders = useRecoilValue(authProvidersState);
+  const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
   const signInUpStep = useRecoilValue(signInUpStepState);
 
   const { redirectToSSOLoginPage } = useSSO();
 
   const signInWithSSO = () => {
-    if (authProviders.sso.length === 1) {
-      return redirectToSSOLoginPage(authProviders.sso[0].id);
+    if (workspaceAuthProviders.sso.length === 1) {
+      return redirectToSSOLoginPage(workspaceAuthProviders.sso[0].id);
     }
 
     setSignInUpStep(SignInUpStep.SSOIdentityProviderSelection);

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx

@@ -1,15 +1,15 @@
+import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/SignInUpWithCredentials';
+import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/SignInUpWithGoogle';
+import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/SignInUpWithMicrosoft';
+import { SignInUpWithSSO } from '@/auth/sign-in-up/components/SignInUpWithSSO';
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
 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 { authProvidersState } from '@/client-config/states/authProvidersState';
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { ActionLink, HorizontalSeparator } from 'twenty-ui';
-import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/SignInUpWithGoogle';
-import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/SignInUpWithMicrosoft';
-import { SignInUpWithSSO } from '@/auth/sign-in-up/components/SignInUpWithSSO';
-import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/SignInUpWithCredentials';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
@@ -17,7 +17,7 @@ const StyledContentContainer = styled.div`
 `;
 
 export const SignInUpWorkspaceScopeForm = () => {
-  const [authProviders] = useRecoilState(authProvidersState);
+  const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
   const { form } = useSignInUpForm();
   const { handleResetPassword } = useHandleResetPassword();
@@ -27,20 +27,20 @@ export const SignInUpWorkspaceScopeForm = () => {
   return (
     <>
       <StyledContentContainer>
-        {authProviders.google && <SignInUpWithGoogle />}
+        {workspaceAuthProviders.google && <SignInUpWithGoogle />}
 
-        {authProviders.microsoft && <SignInUpWithMicrosoft />}
+        {workspaceAuthProviders.microsoft && <SignInUpWithMicrosoft />}
 
-        {authProviders.sso.length > 0 && <SignInUpWithSSO />}
+        {workspaceAuthProviders.sso.length > 0 && <SignInUpWithSSO />}
 
-        {(authProviders.google ||
-          authProviders.microsoft ||
-          authProviders.sso.length > 0) &&
-        authProviders.password ? (
+        {(workspaceAuthProviders.google ||
+          workspaceAuthProviders.microsoft ||
+          workspaceAuthProviders.sso.length > 0) &&
+        workspaceAuthProviders.password ? (
           <HorizontalSeparator visible />
         ) : null}
 
-        {authProviders.password && <SignInUpWithCredentials />}
+        {workspaceAuthProviders.password && <SignInUpWithCredentials />}
       </StyledContentContainer>
       {signInUpStep === SignInUpStep.Password && (
         <ActionLink onClick={handleResetPassword(form.getValues('email'))}>

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx

@@ -1,16 +1,16 @@
-import { SignInUpStep } from '@/auth/states/signInUpStepState';
-import { isDefined } from '~/utils/isDefined';
 import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
-import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
-import { useRecoilState } from 'recoil';
+import { SignInUpStep } from '@/auth/states/signInUpStepState';
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { useCallback, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from '~/utils/isDefined';
 
 const searchParams = new URLSearchParams(window.location.search);
 const email = searchParams.get('email');
 
 export const SignInUpWorkspaceScopeFormEffect = () => {
-  const [authProviders] = useRecoilState(authProvidersState);
+  const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
   const { form } = useSignInUpForm();
 
@@ -20,22 +20,22 @@ export const SignInUpWorkspaceScopeFormEffect = () => {
   const checkAuthProviders = useCallback(() => {
     if (
       signInUpStep === SignInUpStep.Init &&
-      !authProviders.google &&
-      !authProviders.microsoft &&
-      !authProviders.sso
+      !workspaceAuthProviders.google &&
+      !workspaceAuthProviders.microsoft &&
+      !workspaceAuthProviders.sso
     ) {
       return continueWithEmail();
     }
 
-    if (isDefined(email) && authProviders.password) {
+    if (isDefined(email) && workspaceAuthProviders.password) {
       return continueWithCredentials();
     }
   }, [
     signInUpStep,
-    authProviders.google,
-    authProviders.microsoft,
-    authProviders.sso,
-    authProviders.password,
+    workspaceAuthProviders.google,
+    workspaceAuthProviders.microsoft,
+    workspaceAuthProviders.sso,
+    workspaceAuthProviders.password,
     continueWithEmail,
     continueWithCredentials,
   ]);