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
twentyhq · Dec 13, 2024 · 7e67b1c · 7e67b1c
1 parent 57869d3
commit 7e67b1c
Show file tree

Hide file tree

Showing 26 changed files with 380 additions and 234 deletions.
diff --git a/packages/twenty-front/src/generated/graphql.tsx b/packages/twenty-front/src/generated/graphql.tsx
@@ -1,5 +1,5 @@
-import * as Apollo from '@apollo/client';
 import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
@@ -169,6 +169,7 @@ export type ClientConfig = {
   __typename?: 'ClientConfig';
   analyticsEnabled: Scalars['Boolean'];
   api: ApiConfig;
+  authProviders: AuthProviders;
   billing: Billing;
   captcha: Captcha;
   chromeExtensionId?: Maybe<Scalars['String']>;
@@ -1577,7 +1578,7 @@ export type Field = {
   id: Scalars['UUID'];
   isActive?: Maybe<Scalars['Boolean']>;
   isCustom?: Maybe<Scalars['Boolean']>;
-  isLabelSyncedWithName: Scalars['Boolean'];
+  isLabelSyncedWithName?: Maybe<Scalars['Boolean']>;
   isNullable?: Maybe<Scalars['Boolean']>;
   isSystem?: Maybe<Scalars['Boolean']>;
   isUnique?: Maybe<Scalars['Boolean']>;
@@ -1970,7 +1971,7 @@ export type UpdateBillingSubscriptionMutation = { __typename?: 'Mutation', updat
 export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, isMultiWorkspaceEnabled: boolean, isSSOEnabled: boolean, defaultSubdomain?: string | null, frontDomain: string, debugMode: boolean, analyticsEnabled: boolean, chromeExtensionId?: string | null, billing: { __typename?: 'Billing', isBillingEnabled: boolean, billingUrl?: string | null, billingFreeTrialDurationInDays?: number | null }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null }, sentry: { __typename?: 'Sentry', dsn?: string | null, environment?: string | null, release?: string | null }, captcha: { __typename?: 'Captcha', provider?: CaptchaDriverType | null, siteKey?: string | null }, api: { __typename?: 'ApiConfig', mutationMaximumAffectedRecords: number } } };
+export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, isMultiWorkspaceEnabled: boolean, isSSOEnabled: boolean, defaultSubdomain?: string | null, frontDomain: string, debugMode: boolean, analyticsEnabled: boolean, chromeExtensionId?: string | null, billing: { __typename?: 'Billing', isBillingEnabled: boolean, billingUrl?: string | null, billingFreeTrialDurationInDays?: number | null }, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean, microsoft: boolean, sso: Array<{ __typename?: 'SSOIdentityProvider', id: string, name: string, type: IdentityProviderType, status: SsoIdentityProviderStatus, issuer: string }> }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null }, sentry: { __typename?: 'Sentry', dsn?: string | null, environment?: string | null, release?: string | null }, captcha: { __typename?: 'Captcha', provider?: CaptchaDriverType | null, siteKey?: string | null }, api: { __typename?: 'ApiConfig', mutationMaximumAffectedRecords: number } } };
 
 export type SkipSyncEmailOnboardingStepMutationVariables = Exact<{ [key: string]: never; }>;
 
@@ -3355,6 +3356,18 @@ export const GetClientConfigDocument = gql`
       billingUrl
       billingFreeTrialDurationInDays
     }
+    authProviders {
+      google
+      password
+      microsoft
+      sso {
+        id
+        name
+        type
+        status
+        issuer
+      }
+    }
     signInPrefilled
     isMultiWorkspaceEnabled
     isSSOEnabled

diff --git a/packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx b/packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx
@@ -7,14 +7,14 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 import { iconsState } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
-import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { billingState } from '@/client-config/states/billingState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
 import { supportChatState } from '@/client-config/states/supportChatState';
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 
-import { email, mocks, password, results, token } from '../__mocks__/useAuth';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
+import { email, mocks, password, results, token } from '../__mocks__/useAuth';
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
   <MockedProvider mocks={mocks} addTypename={false}>
@@ -77,7 +77,9 @@ describe('useAuth', () => {
       () => {
         const client = useApolloClient();
         const icons = useRecoilValue(iconsState);
-        const authProviders = useRecoilValue(authProvidersState);
+        const workspaceAuthProviders = useRecoilValue(
+          workspaceAuthProvidersState,
+        );
         const billing = useRecoilValue(billingState);
         const isDeveloperDefaultSignInPrefilled = useRecoilValue(
           isDeveloperDefaultSignInPrefilledState,
@@ -92,7 +94,7 @@ describe('useAuth', () => {
           client,
           state: {
             icons,
-            authProviders,
+            workspaceAuthProviders,
             billing,
             isDeveloperDefaultSignInPrefilled,
             supportChat,
@@ -118,7 +120,7 @@ describe('useAuth', () => {
     const { state } = result.current;
 
     expect(state.icons).toEqual({});
-    expect(state.authProviders).toEqual({
+    expect(state.workspaceAuthProviders).toEqual({
       google: true,
       microsoft: false,
       magicLink: false,

diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@@ -13,7 +13,6 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
 import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
 import { workspacesState } from '@/auth/states/workspaces';
-import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { billingState } from '@/client-config/states/billingState';
 import { captchaProviderState } from '@/client-config/states/captchaProviderState';
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
@@ -48,6 +47,7 @@ import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useL
 import { useReadWorkspaceSubdomainFromCurrentLocation } from '@/domain-manager/hooks/useReadWorkspaceSubdomainFromCurrentLocation';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
 import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
+import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);
@@ -90,7 +90,7 @@ export const useAuth = () => {
         const emptySnapshot = snapshot_UNSTABLE();
         const iconsValue = snapshot.getLoadable(iconsState).getValue();
         const authProvidersValue = snapshot
-          .getLoadable(authProvidersState)
+          .getLoadable(workspaceAuthProvidersState)
           .getValue();
         const billing = snapshot.getLoadable(billingState).getValue();
         const isDeveloperDefaultSignInPrefilled = snapshot
@@ -115,7 +115,7 @@ export const useAuth = () => {
           .getValue();
         const initialSnapshot = emptySnapshot.map(({ set }) => {
           set(iconsState, iconsValue);
-          set(authProvidersState, authProvidersValue);
+          set(workspaceAuthProvidersState, authProvidersValue);
           set(billingState, billing);
           set(
             isDeveloperDefaultSignInPrefilledState,

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/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 { SignInUpMode } from '@/auth/types/signInUpMode';
 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 { 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}>

diff --git a/...nty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx b/...nty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx
@@ -4,26 +4,26 @@ 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)};
   margin-top: ${({ theme }) => theme.spacing(4)};
 `;
 
 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}

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx b/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);

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
@@ -1,23 +1,23 @@
+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)};
   margin-top: ${({ theme }) => theme.spacing(4)};
 `;
 
 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'))}>

diff --git a/.../twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx b/.../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,
   ]);