admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(sso): add support for identityProviderId in SAML flow (#9411)

Browse Source 
Updated SAML callback URLs and relevant logic to include
identityProviderId, ensuring better handling of multiple identity
providers. Refactored client and server-side code to streamline form
interactions and validation within the SSO module.

Fix https://github.com/twentyhq/twenty/issues/9323
https://github.com/twentyhq/twenty/issues/9325
This commit is contained in:
Antoine Moreaux
2025-01-07 10:30:13 +01:00
committed by GitHub
parent 9392acbee5
commit 00e71477d3
6 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersForm.tsx
View File

@ -7,7 +7,7 @@ import { SettingsSSOSAMLForm } from '@/settings/security/components/SettingsSSOS
import { SettingSecurityNewSSOIdentityFormValues } from '@/settings/security/types/SSOIdentityProvider';
import { TextInput } from '@/ui/input/components/TextInput';
import styled from '@emotion/styled';
import { ReactElement } from 'react';
import { ReactElement, useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { H2Title, IconComponent, IconKey, Section } from 'twenty-ui';
import { IdentityProviderType } from '~/generated/graphql';
@ -27,7 +27,7 @@ const StyledInputsContainer = styled.div`
`;
export const SettingsSSOIdentitiesProvidersForm = () => {
const { control, getValues } =
const { control, watch } =
useFormContext<SettingSecurityNewSSOIdentityFormValues>();
const IdentitiesProvidersMap: Record<
@ -62,8 +62,10 @@ export const SettingsSSOIdentitiesProvidersForm = () => {
},
};
const getFormByType = (type: Uppercase<IdentityProviderType> | undefined) => {
switch (type) {
const selectedType = watch('type');
const formByType = useMemo(() => {
switch (selectedType) {
case IdentityProviderType.Oidc:
return IdentitiesProvidersMap.OIDC.form;
case IdentityProviderType.Saml:
@ -71,7 +73,11 @@ export const SettingsSSOIdentitiesProvidersForm = () => {
default:
return null;
}
};
}, [
IdentitiesProvidersMap.OIDC.form,
IdentitiesProvidersMap.SAML.form,
selectedType,
]);
return (
<SettingsPageContainer>
@ -115,7 +121,7 @@ export const SettingsSSOIdentitiesProvidersForm = () => {
/>
</StyledInputsContainer>
</Section>
{getFormByType(getValues().type)}
{formByType}
</SettingsPageContainer>
);
};

5
packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
View File

@ -56,7 +56,7 @@ const StyledButtonCopy = styled.div`
export const SettingsSSOSAMLForm = () => {
const { enqueueSnackBar } = useSnackBar();
const theme = useTheme();
const { setValue, getValues, watch } = useFormContext();
const { setValue, getValues, watch, trigger } = useFormContext();
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
if (isDefined(e.target.files)) {
@ -72,11 +72,12 @@ export const SettingsSSOSAMLForm = () => {
setValue('ssoURL', samlMetadataParsed.data.ssoUrl);
setValue('certificate', samlMetadataParsed.data.certificate);
setValue('issuer', samlMetadataParsed.data.entityID);
trigger();
}
};
const entityID = `${REACT_APP_SERVER_BASE_URL}/auth/saml/login/${getValues('id')}`;
const acsUrl = `${REACT_APP_SERVER_BASE_URL}/auth/saml/callback`;
const acsUrl = `${REACT_APP_SERVER_BASE_URL}/auth/saml/callback/${getValues('id')}`;
const inputFileRef = useRef<HTMLInputElement>(null);